문제 발생 상황

유트브를 강의의 자바스크립트 코드 구현 중 이해가 되지 않는 부분의 스크립트내용을 복사해 구글 번역기를 돌려 번역을 시도해보았습니다.

다만, 스크립트마다 엔터가 너무 많이 있어 번역할 내용을 가져와 엔터를 지우면 어떨까? 라는 생각에 아래와 같이 코드를 실행했습니다.

const innerText = document.querySelector('.D5aOJc');

const originText = innerText.innerHTML;
const replaceText = text1.replace(/\n/g, "");

innerText.innerHTML=replaceText;

그런데 마지막 코드부분에서 아래와 같은 에러가 발생했습니다.

이 문서에는 'TrustedHTML' 할당이 필요합니다. 오류 유형 오류: '요소'에 대한 'innerHTML' 속성을 설정하지 못했습니다. 이 문서에는 'TrustedHTML' 할당이 필요합니다.

콘텐츠 보안정책

이는 콘텐츠 보안정책 때문에 발생하는 에러로 컨텐츠 보안 정책 (CSP)은 front-end 애플리케이션의 안전을 위해 시작할 수 있는 첫 단계라고 할 수 있습니다.

이 콘텐츠보안 정책 중 스크립Trusted Types 정책은 Trusted Types API 를 우회하여 잠재적으로 XSS에 취약한 DOM 수신기의 직접 시작을 금지 합니다 .

Trusted Types API

신뢰할 수 있는 유형은 다음과 같은 위험한 싱크 기능을 봉쇄하는 방식으로 작동합니다. 브라우저 공급업체와 웹 프레임워크가 이미 보안상의 이유로 이러한 기능을 사용하지 않도록 지시하기 때문에 일부는 이미 알고 있을 수 있습니다.

• 스크립트 조작:
  <script src> 및 <script> 요소의 텍스트 내용 설정.

• 문자열에서 HTML 생성:
  innerHTML , outerHTML ,insertAdjacentHTML , <iframe> srcdoc , document.write , document.writeln 및 DOMParser.parseFromString

• 플러그인 콘텐츠 실행:
  <embed src> , <object data> 및 <object codebase>

• 런타임 JavaScript 코드 컴파일:
  eval , setTimeout , setInterval , new Function()

신뢰할 수 있는 유형을 사용하려면 위의 싱크 함수에 데이터를 전달하기 전에 데이터를 처리해야 합니다. 브라우저는 데이터가 신뢰할 수 있는지 알지 못하기 때문에 문자열을 사용하는 것만으로는 실패합니다.

금지

anElement.innerHTML  = location.href;

신뢰할 수 있는 유형이 활성화되면 브라우저에서 TypeError를 발생시키고 문자열이 있는 DOM XSS 싱크 사용을 방지합니다.

허용

anElement.innerHTML = aTrustedHTML;

신뢰할 수 있는 유형이 활성화되면 브라우저는 HTML 스니펫을 예상하는 싱크에 TrustedHTML 개체를 수락합니다. 다른 민감한 싱크에 대한 TrustedScript 및 TrustedScriptURL 개체도 있습니다.

참고자료

프론트엔드 개발자를 위한 10가지 보안 관련 팁

신뢰할 수 있는 유형으로 DOM 기반 교차 사이트 스크립팅 취약점 방지