새로운 브라우저 메서드 setHTML과 setHTMLUnsafe

setHTMLUnsafe란 무엇인가요?

setHTMLUnsafe는 innerHTML과 유사하게 작동하지만, 그 이름에서 알 수 있듯이 안전하지 않은(unsafe) 방법으로 HTML을 설정하는 메서드입니다. 이 메서드는 입력 값에 대한 검증을 수행하지 않기 때문에, XSS(Cross-Site Scripting) 공격에 노출될 수 있는 위험이 있습니다.

예를 들어, 사용자가 텍스트 입력 필드에 `<img src=”doesnotexist”>`와 같은 값을 입력하면, 해당 값이 그대로 HTML로 렌더링됩니다. 이 경우 이미지가 로드되지 않더라도 자바스크립트는 실행될 수 있습니다. 이러한 위험 때문에 setHTMLUnsafe는 신중하게 사용해야 합니다.

왜 setHTMLUnsafe가 필요할까요?

innerHTML 메서드는 HTML 조각(fragment)을 보관하거나 렌더링되지 않는 HTML을 삽입하는 데 유용합니다. 그러나 선언적 섀도 DOM(declarative shadow DOM)을 생성하려면 setHTMLUnsafe가 필요합니다. 섀도 DOM은 웹 컴포넌트의 핵심 기술로, 특정 요소의 스타일과 구조를 캡슐화하여 다른 요소와 독립적으로 작동하도록 합니다.

예를 들어, 다음 코드를 보겠습니다:

const main = document.querySelector('main');
main.setHTMLUnsafe(`
    <h2>I am in the Light DOM</h2>
    <div>
        <template shadowrootmode="open">
            <style>
                h2 { color: blue; }
            </style>
            <h2>Shadow DOM</h2>
        </template>
    </div>
`);

이 코드는 섀도 DOM을 동적으로 추가하여 `template`의 내용을 렌더링합니다. 이를 통해 스타일과 구조가 독립적으로 작동하게 됩니다.

const main = document.querySelector('main');
main.setHTML(`
    <h2>I am in the Light DOM</h2>
    <div>
        <template shadowrootmode="open">
            <style>
                h2 { color: blue; }
            </style>
            <h2>Shadow DOM</h2>
        </template>
    </div>
`);

const main = document.querySelector('main');
const html = main.getHTML({ serializableShadowRoots: true });