IT

자바스크립트 "Trusted Types API"

아름다운전진 2023. 3. 11. 12:34
728x90

Trusted Types API는 XSS(교차 사이트 스크립팅) 공격을 방지하는 것을 목표로 하는 최신 브라우저의 새로운 보안 기능입니다. 특정 컨텍스트에서 특정 유형의 데이터만 사용할 수 있도록 허용하는 정책을 시행하는 메커니즘을 제공하여 신뢰할 수 없는 입력을 코드로 사용하는 것을 방지합니다.

Trusted Types API는 주어진 컨텍스트에서 사용할 수 있는 값 유형을 지정하는 콘텐츠 보안 정책(CSP) 지시문을 시행하여 작동합니다. 예를 들어 신뢰할 수 있는 유형을 사용하여 특정 컨텍스트에서 삭제된 HTML만 사용하거나 수학 계산에 숫자만 사용할 수 있도록 할 수 있습니다.

다음은 JavaScript에서 Trusted Types API를 사용하는 방법의 예입니다.

// create a policy that only allows sanitized HTML

const policy = TrustedTypes.createPolicy('myPolicy', {

createHTML: (input) => sanitize(input),

});

// create an element and set its innerHTML to an untrusted value

const div = document.createElement('div');

div.innerHTML = '<script>alert("Hello!");</script>';

// try to set the element's innerHTML to the untrusted value

try {

div.innerHTML = policy.createHTML(div.innerHTML);

} catch (e) {

console.error(e.message);

}

이 예제에서는 먼저 검증된 HTML만 사용하도록 허용하는 `TrustedTypes.createPolicy()`를 사용하여 정책을 생성합니다. 입력 값을 받아서 `sanitize()`라는 함수를 사용하여 삭제하고 신뢰할 수 있는 HTML 문자열을 반환하는 `createHTML()` 함수를 정의합니다.

그런 다음 `div`라는 요소를 만들고 `innerHTML` 속성을 경고 메시지가 있는 스크립트 태그를 포함하는 신뢰할 수 없는 값으로 설정합니다. 마지막으로 정책을 사용하여 `innerHTML` 속성을 신뢰할 수 없는 값의 삭제된 버전으로 설정하려고 합니다.

정책에서 삭제된 HTML의 사용을 허용하면 `innerHTML`이 삭제된 버전의 입력으로 설정됩니다. 정책이 신뢰할 수 없는 입력을 허용하지 않으면 오류가 발생합니다.

Trusted Types API는 신뢰할 수 있는 데이터가 특정 컨텍스트에서만 사용되도록 허용하여 인젝션 공격이나 CSRF(Cross-Site Request Forgery) 공격과 같은 다른 유형의 공격을 방지하는 데 사용할 수 있습니다.

728x90