엄격한 보안 정책을 켠 가상 사이트

결과

버튼을 눌러 보세요.

① 막히는 코드

box.innerHTML = '<div class="chat">…</div>';

② 통과하는 코드

const host = document.createElement('div');
const root = host.attachShadow({mode:'open'});
const panel = document.createElement('div');
panel.textContent = 'AI 도우미';   // 문자열을 HTML로 해석하지 않음
root.appendChild(panel);

보안이 엄격한 사이트에 창 띄우기

능력 사전

보안Trusted Types · Shadow DOM설치 없음

보안이 엄격한 사이트에 창 띄우기

GitHub처럼 보안 정책(Trusted Types)이 엄격한 사이트에서는 문자열로 화면을 넣는 innerHTML이 막힙니다. 아래 상자는 그런 정책을 켠 가상 사이트입니다. 같은 채팅창을 두 방식으로 띄워 보고, 왜 하나는 막히고 하나는 되는지 확인하세요.