input 값은 항상 검증하고 정제해야 한다. 자바스크립트에서 사용자 입력값을 정제하는 2가지 방법을 알아보자.

## sanitize-html

허용된 태그와 속성 외에 html 태그를 허용하지 않는다. 허용되지 않는 속성이 있다면 지워진다. 기본값으로 하면 디폴트로 허용된 태그들이 존재한다. 허용하는 태그와 허용하지 않는 태그를 따로 지정할 수 있다.

공식 npm 문서 : [sanitize-html](https://www.npmjs.com/package/sanitize-html) (현재 기준 주간 140만 다운로드)

## DOMPurify

DOM 레벨에서 HTML을 sanitize 해주고 XSS 공격을 막아준다. jsdom 을 사용하면 node 와 같은 서버 레벨에서도 사용 가능하다. DOMPurify는 화이트리스트 접근 방식을 취하는데 특정한 태그와 속성, 프로토콜만 허용한다.

공식 npm 문서 : [GitHub - cure53/DOMPurify: DOMPurify - a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. DOMPurify works with a secure default, but offers a lot of configurability and hooks. Demo:](https://github.com/cure53/DOMPurify) (현재 기준 주간 310만 다운로드)

둘 중에 필요에 따라 사용하면 될 것 같다.

<p>input 값은 항상 검증하고 정제해야 한다. 자바스크립트에서 사용자 입력값을 정제하는 2가지 방법을 알아보자.</p><h2 id="sanitize-html">sanitize-html</h2><p>허용된 태그와 속성 외에 html 태그를 허용하지 않는다. 허용되지 않는 속성이 있다면 지워진다. 기본값으로 하면 디폴트로 허용된 태그들이 존재한다. 허용하는 태그와 허용하지 않는 태그를 따로 지정할 수 있다.</p><p>공식 npm 문서 : <a href="https://www.npmjs.com/package/sanitize-html">sanitize-html</a> (현재 기준 주간 140만 다운로드)</p><h2 id="DOMPurify">DOMPurify</h2><p>DOM 레벨에서 HTML을 sanitize 해주고 XSS 공격을 막아준다. jsdom 을 사용하면 node 와 같은 서버 레벨에서도 사용 가능하다. DOMPurify는 화이트리스트 접근 방식을 취하는데 특정한 태그와 속성, 프로토콜만 허용한다.</p><p>공식 npm 문서 : <a href="https://github.com/cure53/DOMPurify">GitHub - cure53/DOMPurify: DOMPurify - a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. DOMPurify works with a secure default, but offers a lot of configurability and hooks. Demo:</a> (현재 기준 주간 310만 다운로드)</p><p>둘 중에 필요에 따라 사용하면 될 것 같다.</p>

sanitize-html 과 DOMPurify - js에서 HTML Sanitization 하기

sanitize-html

DOMPurify