DOMPurify

npm package minimized gzipped size (select exports)

DOMPurify는 HTML, MathML 및 SVG를 위한 DOM 전용의 초고속이며 매우 관대한 XSS 새니타이저입니다.

사용법과 시작 방법도 매우 간단합니다. DOMPurify는 2014년 2월에 시작되었으며, 그동안 v3.4.17 버전에 도달했습니다.

DOMPurify는 JavaScript로 실행되며 모든 최신 브라우저(Safari (10+), Opera (15+), Edge, Firefox 및 Chrome - 그리고 Blink, Gecko 또는 WebKit을 사용하는 거의 모든 것)에서 작동합니다. MSIE나 다른 레거시 브라우저에서도 깨지지 않습니다. 그저 아무것도 하지 않을 뿐입니다.

참고로 DOMPurify v2.5.9는 MSIE를 지원하는 최신 버전입니다. MSIE와 호환되는 중요한 보안 업데이트를 위해서는 2.x 브랜치를 사용하시기 바랍니다.

당사의 자동화된 테스트는 매 푸시마다 현재 엔진(Ubuntu, macOS, Windows 전반의 Chromium, Firefox, WebKit)에서 9개의 브라우저/OS 조합을 커버하며, 별도의 매트릭스가 오래된 엔진 스냅샷(대략 Chromium 110, Firefox 108, WebKit 16.4로 약 3년 전)에서도 스위트를 재실행하여 구형 브라우저에서의 회귀도 잡아냅니다. 또한 jsdom에서 DOMPurify와 함께 Node.js v20, v22, v24, v25 및 v26을 실행합니다. 더 오래된 Node 버전도 작동하는 것으로 알려져 있지만, 뭐... 보장은 없습니다.

DOMPurify는 웹 공격과 XSS에 대한 방대한 배경 지식을 가진 보안 전문가들이 작성했습니다. 걱정하지 마세요. 자세한 내용은 보안 목표 및 위협 모델도 읽어보시기 바랍니다. 꼭 읽어보세요. 정말로요. 그리고 잔혹한 세부 사항을 즐기신다면, 공격 클래스 및 우회 이력 페이지에서 DOMPurify가 방어하는 파서 변이, 네임스페이스, 클로버링 및 템플릿 트릭을 정리해 두었습니다.

DOMPurify 프로젝트는 HTML Sanitizer API의 탄생에 영감을 주었으며, 이는 이미 많은 브라우저에서 제공되고 있습니다. 동일한 기능이 이제 WHATWG HTML 명세에서 직접 표준화되고 있습니다.

무엇을 하나요?
어떻게 사용하나요?
데모가 있나요?
보안 버그를 발견하면 어떻게 하나요?
정화 샘플 몇 가지 보여주시겠어요?
무엇이 지원되나요?
Internet Explorer와 같은 레거시 브라우저는 어떻게 하나요?
DOMPurify와 Trusted Types는 어떻게 되나요?
DOMPurify를 구성할 수 있나요?
영구 구성
훅
제거된 구성
지속적 통합
보안 메일링 리스트
누가 기여했나요?

무엇을 하나요?

DOMPurify는 HTML을 정화하고 XSS 공격을 방지합니다. 예를 들어 위험한 HTML로 가득 찬 문자열을 DOMPurify에 입력하면 깨끗한 HTML이 담긴 문자열을 반환합니다(별도로 구성하지 않는 한). DOMPurify는 위험한 HTML을 포함하는 모든 것을 제거하여 XSS 공격 및 기타 위험 요소를 방지합니다. 또한 굉장히 빠릅니다. 브라우저가 제공하는 기술을 활용하여 XSS 필터로 전환합니다. 브라우저가 빠를수록 DOMPurify도 더 빨라집니다.

어떻게 사용하나요?

간단합니다. 웹사이트에 DOMPurify를 포함하기만 하면 됩니다.

축소되지 않은 버전 사용 (source-map 사용 가능)

<script type="text/javascript" src="dist/purify.js"></script>

축소되고 테스트된 프로덕션 버전 사용하기 (source-map 사용 가능)

<script type="text/javascript" src="dist/purify.min.js"></script>

그런 다음 다음 코드를 실행하여 문자열을 정리할 수 있습니다:

const clean = DOMPurify.sanitize(dirty);

또는 Angular 같은 것을 다루는 걸 좋아한다면 이렇게 할 수도 있습니다:

import DOMPurify from 'dompurify';

const clean = DOMPurify.sanitize('<b>hello there</b>');

결과 HTML은 innerHTML을 사용하여 DOM 요소에 작성하거나 document.write()를 사용하여 DOM에 작성할 수 있습니다. 이는 전적으로 사용자에게 달려 있습니다. 기본적으로 HTML, SVG 그리고 MathML을 허용한다는 점에 유의하십시오. HTML만 필요한 경우(매우 일반적인 사용 사례일 수 있음) 다음과 같이 쉽게 설정할 수 있습니다:

const clean = DOMPurify.sanitize(dirty, { USE_PROFILES: { html: true } });

함정이 될 가능성이 있나요?

음, 주의하세요. HTML을 먼저 정리(sanitize)한 다음 그 이후에 수정하면, 정리 효과를 무효화하기 쉽습니다. 정리된 마크업을 정리 후에 다른 라이브러리에 넘긴다면, 그 라이브러리가 자체적으로 HTML을 건드리지 않는지 반드시 확인하세요. 안전한 사용법과 두 번 생각해봐야 할 태그/속성에 대해서는 보안 목표 및 위협 모델을, 후처리와 마크업 컨텍스트 변경이 왜 정리를 무력화하는지에 대해서는 공격 클래스 및 우회 이력을 참고하세요.

문자열 대신 DOM 노드를 전달하면 어떻게 되나요?

DOMPurify.sanitize()는 DOM 노드(Element, DocumentFragment 또는 Document)도 받아들입니다. 3.4.14부터 이 경로는 HTML 파서에서 나오지 않은 노드에 대해 강화되었습니다. DOM API로 만들었거나 XML/XHTML로 파싱된 노드(예: application/xhtml+xml과 importNode()를 사용하는 DOMParser를 통해)는 ONERROR처럼 대소문자가 보존된 속성 이름을 가질 수 있고, 또는 <style> 같은 rawtext 요소가 텍스트 안에 자식 요소나 자체 종료 태그를 가질 수 있습니다. 두 형태 모두 HTML 파서가 절대 만들 수 없기 때문에 문자열 정리기에는 보이지 않지만, 재파싱 시 빠져나옵니다. 이제 DOMPurify는 정확한 Attr 노드로 속성을 제거하고 이러한 리터럴 텍스트 트리를 안전하지 않은 것으로 취급하므로, 입력 측에서 문서 컨텍스트를 섞는 경우도 커버됩니다. 출력 측에서 컨텍스트를 섞지 않는 것은 여전히 여러분의 몫입니다. 위 단락을 참고하세요.

좋아요, 이해됩니다. 계속 진행하죠

마크업을 정리한 후에는 DOMPurify.removed 속성을 살펴보고 어떤 요소와 속성이 제거되었는지 확인할 수도 있습니다. 이 속성을 보안상 중요한 결정을 내리는 데 사용하지 마세요. 이것은 호기심 많은 사람들을 위한 작은 도우미일 뿐입니다.

서버에서 DOMPurify 실행하기

DOMPurify는 기술적으로 Node.js와 함께 서버 측에서도 작동합니다. 우리의 지원은 Node.js 릴리스 주기를 따르기 위해 노력합니다.

서버에서 DOMPurify를 실행하려면 DOM이 존재해야 하는데, 이는 아마 놀랍지 않을 것입니다. 보통 jsdom이 선택되는 도구이며, 우리는 최신 버전의 jsdom 사용을 강력히 권장합니다.

왜일까요? 오래된 버전의 _jsdom_은 DOMPurify가 100% 올바르게 동작하더라도 XSS를 초래하는 방식으로 버그가 있는 것으로 알려져 있기 때문입니다. 예를 들어 _jsdom v19.0.0_에는 알려진 공격 벡터가 있으며 이는 _jsdom v20.0.0_에서 수정되었습니다. 그렇기 때문에 _jsdom_을 최신 상태로 유지할 것을 정말 권장합니다.

또한 happy-dom 같은 도구가 존재하지만 현재 시점에서는 안전한 것으로 간주되지 않는다는 점을 유의하세요. DOMPurify를 _happy-dom_과 결합하는 것은 현재 권장되지 않으며 XSS로 이어질 가능성이 높습니다. 선택한 서버 측 DOM이 왜 신뢰 컴퓨팅 기반(trusted computing base)의 일부인지에 대한 배경은 공격 클래스 및 우회 이력을 참고하세요.

Cloudflare Workers나 Vercel Edge처럼 _jsdom_이 실행될 수 없는 런타임에서는 purify-edge가 parse5 기반 window에서 수정되지 않은 DOMPurify를 실행하는 서드파티 프로젝트입니다. 우리의 테스트 스위트는 호환성 검사로 npm run test:purify-edge를 통해 이에 대해 실행할 수 있습니다. 이는 우리가 유지 관리하지 않으며, 통과 실행은 보증도 보안 보장도 아닙니다.

그 외에는 서버에서 DOMPurify를 사용해도 괜찮습니다. 아마도요. 이는 정말로 jsdom 또는 서버 측에서 사용하는 DOM에 달려 있습니다. 이를 감수할 수 있다면, 작동시키는 방법은 다음과 같습니다:

npm install dompurify
npm install jsdom

_jsdom_의 경우(최신 버전을 사용하세요), 다음이면 충분합니다:

const createDOMPurify = require('dompurify');
const { JSDOM } = require('jsdom');

const window = new JSDOM('').window;
const DOMPurify = createDOMPurify(window);
const clean = DOMPurify.sanitize('<b>hello there</b>');

또는 임포트로 작업하는 것을 선호한다면 다음과 같이 할 수도 있습니다:

import { JSDOM } from 'jsdom';
import DOMPurify from 'dompurify';

const window = new JSDOM('').window;
const purify = DOMPurify(window);
const clean = purify.sanitize('<b>hello there</b>');

DOMPurify v3.4.13