DOMPurify란?

DOMPurify란?

 

작성 일자 : 2025년 11월 16일

---

 

DOMPurify란?

 

웹 서비스에서 사용자 입력을 그대로 화면에 렌더링하는 것은 높은 자유도를 제공하는 동시에, 보안 취약점을 초래할 수 있는 위험한 동작입니다.

 

특히 innerHTML, dangerouslySetInnerHTML와 같이 HTML을 직접 DOM에 삽입하는 기능은, 적절한 방어 장치 없이 사용할 경우 XSS(Cross-Site Scripting) 공격에 노출되기 쉽습니다.

 

---

 

DOMPurify는 잠재적으로 위험한 HTML 문자열에서 스크립트와 악성 속성 등을 제거하여, 브라우저에 삽입해도 안전한 형태로 변환해 주는 라이브러리입니다.

• 입력: 신뢰할 수 없는 HTML (예: 사용자 입력, WYSIWYG 에디터 결과물 등)
• 출력: 스크립트, 이벤트 핸들러, javascript: URL 등 위험 요소가 제거된 안전한 HTML 문자열

이를 통해, innerHTML이나 dangerouslySetInnerHTML과 같은 기능을 사용하면서도 XSS 공격을 효과적으로 방지할 수 있습니다.

 

---

 

 

DOMPurify 기본 사용 예시

 

<script src="https://unpkg.com/dompurify@3.1.6/dist/purify.min.js"></script>

<div id="content"></div>

<script>
  const dirty = `<img src="x" onerror="alert('XSS')" /><p>안녕하세요</p>`;
  const clean = DOMPurify.sanitize(dirty);

  console.log(clean); // onerror 속성이 제거된 안전한 HTML
  document.getElementById('content').innerHTML = clean;
</script>

 

---

 

실제 Sanitize 동작 예시

 

다음과 같은 잠재적으로 위험한 HTML 문자열이 있을 때,

const dirty = `
  <h1>제목</h1>
  <img src="x" onerror="alert('해킹')">
  <svg onload="alert('svg xss')">
    <a xlink:href="javascript:alert('링크 xss')">Click</a>
  </svg>
  <script>alert('이것도 해킹')</script>
`;

 

이를 DOMPurify로 정화하면,

const clean = DOMPurify.sanitize(dirty);
console.log(clean);

 

출력 결과는 다음과 같습니다:

<h1>제목</h1>
<img src="x">
<svg>
  <a>Click</a>
</svg>

• <script> 태그는 제거
• onerror, onload 등 이벤트 핸들러 제거
• javascript: 프로토콜이 포함된 링크 제거 또는 무력화
• 위험한 속성(xlink:href, on* 계열) 제거