setHTMLUnsafe

setHTMLUnsafe란?

• React나 Vue, Svelte같은 프레임워크에서 HTML 콘텐츠를 동적으로 삽십할 때 사용되는 메서드 중 하나
• 이름에 Unsafe가 붙는데 의미 그대로 안전하지 않다는 뜻을 가진다.
• 프레임워크에서 XSS (Cross-Site  Scripting) 보호를 위해 기본적으로 HTML 콘텐츠를 Escape 처리하지만, 개발자가 이를 우회하여 **"원시 HTML"**을 직접 삽입하고자 할 때 사용한다.

XSS (Cross-Site Scripting) 란?

악의적인 사용자가 웹 어플리케이션에 스크립트 (보통은 자바스크립트)를 삽입하여 다른 사용자에게 전달하고 실행하게 만드는 보안 취약점을 말한다.

⇨ 악의적인 사용자가 웹사이트에 악성 코드(스크립트)를 심고, 그 코드를 다른 사용자의 브라우저에서 실행시키는 공격

 

1. 신뢰할 수 있는 데이터만 setHTMLUnsafe, @html, innerHTML 등 사용 필요
2. sanitization (뜻: 살균, 정화) 사용 
   사용자 입력 데이터를 깨끗하고 안전하게 처리하는 과정 (XSS와 같은 공격을 방지하기 위해 악의적인 코드나 태그를 제거, 변환하는 작업을 의미)

<script>
  let htmlString = '<p>Hello <strong>World</strong>!</p>';
</script>

<div>{@html htmlString}</div>

 

innerHTM과 비교

• innerHTML은 JavaScript의 표준 DOM API에서 사용되는 속성
• 특정 엘리먼트의 HTML 콘텐츠를 문자열로 삽입하거나 가져올 수 있다.

<div id="content"></div>
<script>
  const htmlString = '<p>Hello <strong>World</strong>!</p>';
  document.getElementById('content').innerHTML = htmlString;
</script>

 

setHTMLUnsafe와 innerHTML의 차이점

구분	setHTMLUnsafe (프레임워크)	innerHTML (DOM API)
동작 대상	가상 DOM (React, Vue, Svelte 등)	실제 DOM
보안	기본적으로 Escape 처리, 우회용으로 사용	Escape 처리 없음
주의할 점	외부 입력값 처리 시 XSS 위험	XSS에 취약
사용 목적	프레임워크에서의 강제 HTML 삽입	DOM 조작
사용법	dangerouslySetInnerHTML / v-html / {@html} 등	element.innerHTML = '...'

 

어떻게 주의해서 사용할까?

• XSS 방어 하기 위해 외부 데이터는 반드시 Escape하거나 Sanitization 처리 후 삽입
• 가능하면 setHTMLUnsafe 대신 안전한 렌더링 방식을 고려 (예: React/Vue/Svelte 컴포넌트로 변환)
• innerHTML도 동일한 보안 취약점 존재하므로 주의 필요