[XSS] HTML 엔티티 디코딩 시 XSS 공격 방지를 위한 안전한 처리 방법

00. TL;DR

API 응답으로 받은 HTML 엔티티 코드(<div>Hello</div>)를 디코딩하여 올바르게 표시하려면 XSS 공격을 방지해야 합니다.

• html-entities를 사용하여 HTML 엔티티를 디코딩합니다.
• DOMPurify.sanitize()를 사용하여 XSS를 방지합니다.
• dangerouslySetInnerHTML은 신뢰할 수 없는 데이터에는 사용하지 않아야 합니다.
• 서버에서 DOMPurify를 적용하면 클라이언트 부담을 줄일 수 있습니다.

---

01. 개요

API에서 전달받은 HTML 데이터가 엔티티 코드(예: <div>Hello</div>)로 인코딩되어 있다면, 이를 디코딩하여 올바르게 렌더링해야 합니다.

하지만 단순 디코딩 시 XSS(크로스사이트 스크립팅) 공격이 발생할 수 있으므로, 이를 방지하는 방법을 함께 고려해야 합니다.

01.01. XSS 공격이 가능한 예시

잘못된 방법으로 HTML을 디코딩하면 악의적인 스크립트가 실행될 수 있습니다.

01.02. ❌ dangerouslySetInnerHTML 사용 시 보안 위험

const encodedHTML = "<script>alert('XSS')</script>";

function UnsafeComponent() {
  return <div dangerouslySetInnerHTML={{ __html: encodedHTML }} />;
}

🔴 위험: 공격자가 <script>alert('XSS')</script> 같은 악성 코드를 삽입하면 실행될 수 있습니다.

---

02. 프론트엔드에서 HTML 디코딩 및 XSS 방지

02.01. html-entities와 DOMPurify 조합

HTML 엔티티를 디코딩한 후 DOMPurify.sanitize()를 사용하여 XSS를 방지할 수 있습니다.

02.01.01. 설치

npm install html-entities dompurify

02.01.02. 코드 예제

import { decode } from "html-entities";
import DOMPurify from "dompurify";

function decodeAndSanitize(htmlString) {
  // HTML 엔티티 디코딩
  const decoded = decode(htmlString); 
  return DOMPurify.sanitize(decoded, {
    // 허용할 범위를 지정하고 싶다면 다음과 같이 허용 태그와 속성을 설정합니다.
    ALLOWED_TAGS: ["p", "strong", "em", "a"],
    ALLOWED_ATTR: ["href", "title"]
  });
}

const encodedHTML = `
  <script>alert('XSS')</script>
  <p>p태그</p>
  &lt;p&gt;alert('XSS')&lt;/p&gt;
`;

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <div dangerouslySetInnerHTML={{ __html: decodeAndSanitize(encodedHTML) }}></div>
    </div>
  );
}

✅ decode() → HTML 엔티티 디코딩 → DOMPurify.sanitize()로 XSS 방지 적용합니다.

---

03. 백엔드에서 HTML 디코딩 및 XSS 방지

03.01. 서버에서 html-entities와 DOMPurify 적용 (Node.js)

03.01.01. 설치

npm install html-entities dompurify jsdom

03.01.02. 서버 측에서 DOMPurify 적용

const { decode } = require("html-entities");
const DOMPurify = require("dompurify");
const { JSDOM } = require("jsdom");

// DOMPurify를 서버에서 사용 가능하도록 설정
const window = new JSDOM("").window;
const purify = DOMPurify(window);

function decodeAndSanitize(htmlString) {
  const decoded = decode(htmlString);
  return purify.sanitize(decoded, {
    // 허용할 범위를 지정하고 싶다면 다음과 같이 허용 태그와 속성을 설정합니다.
    ALLOWED_TAGS: ["p", "strong", "em", "a"],
    ALLOWED_ATTR: ["href", "title"]
  });
}

const encodedHTML = "<script>alert('XSS')</script>";
console.log(decodeAndSanitize(encodedHTML)); 
// 출력: "<p>alert('XSS')</p>" (XSS는 제거되고 p 태그는 유지됨)

✅ 서버에서 DOMPurify를 적용하면 클라이언트 부담을 줄이고, 사전 필터링 가능합니다.

---

04. 정리

방법	XSS 방지 여부	설명
dangerouslySetInnerHTML 사용 ❌	XSS 위험 있음	직접 사용하면 보안 문제 발생
DOMParser만 사용 ⭕(일부 방어)	<script> 태그 자동 삭제	하지만 onerror, onmouseover 같은 이벤트 속성은 남아있음
html-entities + DOMPurify 사용 (권장) ✅	강력한 XSS 방어	HTML 엔티티 디코딩 + 악성 스크립트 제거
서버에서 DOMPurify 적용 ✅	서버 측에서 방어 가능	클라이언트 부담 줄이기