Web アプリケーションにおける HTML サニタイズライブラリの選定：DOMPurify vs sanitize-html vs xss vs xss-filters

first

// dompurify: ブラウザ環境での使用例
const clean = DOMPurify.sanitize('<img src=x onerror=alert(1)>');
// 結果：<img src="x">

// sanitize-html: Node.js 環境での使用例
const sanitizeHtml = require('sanitize-html');
const clean = sanitizeHtml('<img src=x onerror=alert(1)>');
// 結果：<img src="x" />

// xss: Node.js 環境での使用例
const { filterXSS } = require('xss');
const clean = filterXSS('<img src=x onerror=alert(1)>');
// 結果：<img src="x">

// xss-filters: 非推奨のため使用しないこと
// const xssFilters = require('xss-filters');
// const clean = xssFilters.inHTMLData('<img src=x onerror=alert(1)>');

// dompurify: 設定とフックの例
DOMPurify.sanitize(dirty, {
  ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a'],
  ALLOWED_ATTR: ['href']
});

// フックを使用してリンクのターゲットを強制設定
DOMPurify.addHook('afterSanitizeAttributes', function(node) {
  if (node.tagName === 'A') {
    node.setAttribute('target', '_blank');
  }
});

// sanitize-html: 詳細な設定例
const clean = sanitizeHtml(dirty, {
  allowedTags: ['b', 'i', 'em', 'strong', 'a'],
  allowedAttributes: {
    'a': ['href']
  },
  allowedSchemes: ['http', 'https']
});

// xss: カスタマイズオプションの例
const clean = filterXSS(dirty, {
  whiteList: {
    a: ['href', 'title'],
    b: []
  },
  onTag: function(tag, html, options) {
    // 特定のタグを処理するカスタムロジック
  }
});

// xss-filters: 文脈による使い分けが必要だった（非推奨）
// const clean = xssFilters.inHTMLData(dirty);
// const cleanAttr = xssFilters.inUnQuotedAttr(dirty);

// ⚠️ 警告: xss-filters は使用しないでください
// 代わりに dompurify または sanitize-html を選定してください

// 入力：<a href="javascript:alert(1)">click</a>
// dompurify 出力：<a>click</a> (危険なプロトコルを除去)

// 入力：<a href="javascript:alert(1)">click</a>
// sanitize-html 出力：<a>click</a>

// 入力：<a href="javascript:alert(1)">click</a>
// xss 出力：<a href>click</a> (属性名は残るが値は消える設定もあり)

// どのライブラリも、単純な文字列置換ではない
// 例：'<scr' + 'ipt>' といった回避策も検知可能

// 入力：<div onclick="evil()" style="background:url(evil)">text</div>
// 出力：<div>text</div> (イベントとスタイルが除去される)

// 入力：<a href="javascript:void(0)">link</a>
// 出力：<a>link</a>

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

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

const clean = DOMPurify.sanitize(dirty);

import DOMPurify from 'dompurify';

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

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

npm install dompurify
npm install 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>');

npm install isomorphic-dompurify

import DOMPurify from 'isomorphic-dompurify';

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

DOMPurify.sanitize('<img src=x onerror=alert(1)//>'); // becomes <img src="https://raw.githubusercontent.com/cure53/DOMPurify/HEAD/x">
DOMPurify.sanitize('<svg><g/onload=alert(2)//<p>'); // becomes <svg><g></g></svg>
DOMPurify.sanitize('<p>abc<iframe//src=jAva&Tab;script:alert(3)>def</p>'); // becomes <p>abc</p>
DOMPurify.sanitize('<math><mi//xlink:href="data:x,<script>alert(4)</script>">'); // becomes <math><mi></mi></math>
DOMPurify.sanitize('<TABLE><tr><td>HELLO</tr></TABL>'); // becomes <table><tbody><tr><td>HELLO</td></tr></tbody></table>
DOMPurify.sanitize('<UL><li><A HREF=//google.com>click</UL>'); // becomes <ul><li><a href="https://github.com/cure53/DOMPurify/blob/HEAD///google.com">click</a></li></ul>

window.trustedTypes.createPolicy('default', {
  createHTML: (to_escape) =>
    DOMPurify.sanitize(to_escape, { RETURN_TRUSTED_TYPE: false }),
});

// strip {{ ... }}, ${ ... } and <% ... %> to make output safe for template systems
// be careful please, this mode is not recommended for production usage.
// allowing template parsing in user-controlled HTML is not advised at all.
// only use this mode if there is really no alternative.
const clean = DOMPurify.sanitize(dirty, { SAFE_FOR_TEMPLATES: true });

// change how e.g. comments containing risky HTML characters are treated.
// be very careful, this setting should only be set to `false` if you really only handle
// HTML and nothing else, no SVG, MathML or the like.
// Otherwise, changing from `true` to `false` will lead to XSS in this or some other way.
const clean = DOMPurify.sanitize(dirty, { SAFE_FOR_XML: false });

// allow only <b> elements, very strict
const clean = DOMPurify.sanitize(dirty, { ALLOWED_TAGS: ['b'] });

// allow only <b> and <q> with style attributes
const clean = DOMPurify.sanitize(dirty, {
  ALLOWED_TAGS: ['b', 'q'],
  ALLOWED_ATTR: ['style'],
});

// allow all safe HTML elements but neither SVG nor MathML
// note that the USE_PROFILES setting will override the ALLOWED_TAGS setting
// so don't use them together
const clean = DOMPurify.sanitize(dirty, { USE_PROFILES: { html: true } });

// allow all safe SVG elements and SVG Filters, no HTML or MathML
const clean = DOMPurify.sanitize(dirty, {
  USE_PROFILES: { svg: true, svgFilters: true },
});

// allow all safe MathML elements and SVG, but no SVG Filters
const clean = DOMPurify.sanitize(dirty, {
  USE_PROFILES: { mathMl: true, svg: true },
});

// change the default namespace from HTML to something different
const clean = DOMPurify.sanitize(dirty, {
  NAMESPACE: 'http://www.w3.org/2000/svg',
});

// leave all safe HTML as it is and add <style> elements to block-list
const clean = DOMPurify.sanitize(dirty, { FORBID_TAGS: ['style'] });

// leave all safe HTML as it is and add style attributes to block-list
const clean = DOMPurify.sanitize(dirty, { FORBID_ATTR: ['style'] });

// extend the existing array of allowed tags and add <my-tag> to allow-list
const clean = DOMPurify.sanitize(dirty, { ADD_TAGS: ['my-tag'] });

// extend the existing array of allowed attributes and add my-attr to allow-list
const clean = DOMPurify.sanitize(dirty, { ADD_ATTR: ['my-attr'] });

// use functions to control which additional tags and attributes are allowed
const allowlist = {
  one: ['attribute-one'],
  two: ['attribute-two'],
};
const clean = DOMPurify.sanitize(
  '<one attribute-one="1" attribute-two="2"></one><two attribute-one="1" attribute-two="2"></two>',
  {
    ADD_TAGS: (tagName) => {
      return Object.keys(allowlist).includes(tagName);
    },
    ADD_ATTR: (attributeName, tagName) => {
      return allowlist[tagName]?.includes(attributeName) || false;
    },
  }
); // <one attribute-one="1"></one><two attribute-two="2"></two>

// prohibit ARIA attributes, leave other safe HTML as is (default is true)
const clean = DOMPurify.sanitize(dirty, { ALLOW_ARIA_ATTR: false });

// prohibit HTML5 data attributes, leave other safe HTML as is (default is true)
const clean = DOMPurify.sanitize(dirty, { ALLOW_DATA_ATTR: false });

// DOMPurify allows to define rules for Custom Elements. When using the CUSTOM_ELEMENT_HANDLING
// literal, it is possible to define exactly what elements you wish to allow (by default, none are allowed).
//
// The same goes for their attributes. By default, the built-in or configured allow.list is used.
//
// You can use a RegExp literal to specify what is allowed or a predicate, examples for both can be seen below.
// When using a predicate function for attributeNameCheck, it can optionally receive the tagName as a second parameter
// for more granular control over which attributes are allowed for specific elements.
// The default values are very restrictive to prevent accidental XSS bypasses. Handle with great care!

const clean = DOMPurify.sanitize(
  '<foo-bar baz="foobar" forbidden="true"></foo-bar><div is="foo-baz"></div>',
  {
    CUSTOM_ELEMENT_HANDLING: {
      tagNameCheck: null, // no custom elements are allowed
      attributeNameCheck: null, // default / standard attribute allow-list is used
      allowCustomizedBuiltInElements: false, // no customized built-ins allowed
    },
  }
); // <div is=""></div>

const clean = DOMPurify.sanitize(
  '<foo-bar baz="foobar" forbidden="true"></foo-bar><div is="foo-baz"></div>',
  {
    CUSTOM_ELEMENT_HANDLING: {
      tagNameCheck: /^foo-/, // allow all tags starting with "foo-"
      attributeNameCheck: /baz/, // allow all attributes containing "baz"
      allowCustomizedBuiltInElements: true, // customized built-ins are allowed
    },
  }
); // <foo-bar baz="foobar"></foo-bar><div is="foo-baz"></div>

const clean = DOMPurify.sanitize(
  '<foo-bar baz="foobar" forbidden="true"></foo-bar><div is="foo-baz"></div>',
  {
    CUSTOM_ELEMENT_HANDLING: {
      tagNameCheck: (tagName) => tagName.match(/^foo-/), // allow all tags starting with "foo-"
      attributeNameCheck: (attr) => attr.match(/baz/), // allow all containing "baz"
      allowCustomizedBuiltInElements: true, // allow customized built-ins
    },
  }
); // <foo-bar baz="foobar"></foo-bar><div is="foo-baz"></div>

// Example with attributeNameCheck receiving tagName as a second parameter
const clean = DOMPurify.sanitize(
  '<element-one attribute-one="1" attribute-two="2"></element-one><element-two attribute-one="1" attribute-two="2"></element-two>',
  {
    CUSTOM_ELEMENT_HANDLING: {
      tagNameCheck: (tagName) => tagName.match(/^element-(one|two)$/),
      attributeNameCheck: (attr, tagName) => {
        if (tagName === 'element-one') {
          return ['attribute-one'].includes(attr);
        } else if (tagName === 'element-two') {
          return ['attribute-two'].includes(attr);
        } else {
          return false;
        }
      },
      allowCustomizedBuiltInElements: false,
    },
  }
); // <element-one attribute-one="1"></element-one><element-two attribute-two="2"></element-two>

// extend the existing array of elements that can use Data URIs
const clean = DOMPurify.sanitize(dirty, { ADD_DATA_URI_TAGS: ['a', 'area'] });

// extend the existing array of elements that are safe for URI-like values (be careful, XSS risk)
const clean = DOMPurify.sanitize(dirty, { ADD_URI_SAFE_ATTR: ['my-attr'] });

// allow external protocol handlers in URL attributes (default is false, be careful, XSS risk)
// by default only http, https, ftp, ftps, tel, mailto, callto, sms, cid, xmpp and matrix are allowed.
const clean = DOMPurify.sanitize(dirty, { ALLOW_UNKNOWN_PROTOCOLS: true });

// allow specific protocol handlers in URL attributes via regex (default is false, be careful, XSS risk)
// by default only (protocol-)relative URLs, http, https, ftp, ftps, tel, mailto, callto, sms, cid, xmpp and matrix are allowed.
// Default RegExp: /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i;
const clean = DOMPurify.sanitize(dirty, {
  ALLOWED_URI_REGEXP:
    /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|matrix):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i,
});

// return a DOM HTMLBodyElement instead of an HTML string (default is false)
const clean = DOMPurify.sanitize(dirty, { RETURN_DOM: true });

// return a DOM DocumentFragment instead of an HTML string (default is false)
const clean = DOMPurify.sanitize(dirty, { RETURN_DOM_FRAGMENT: true });

// use the RETURN_TRUSTED_TYPE flag to turn on Trusted Types support if available
const clean = DOMPurify.sanitize(dirty, { RETURN_TRUSTED_TYPE: true }); // will return a TrustedHTML object instead of a string if possible

// use a provided Trusted Types policy
const clean = DOMPurify.sanitize(dirty, {
  // supplied policy must define createHTML and createScriptURL
  TRUSTED_TYPES_POLICY: trustedTypes.createPolicy('dompurify', {
    createHTML(s) {
      return s;
    },
    createScriptURL(s) {
      return s;
    },
  }),
});

// return entire document including <html> tags (default is false)
const clean = DOMPurify.sanitize(dirty, { WHOLE_DOCUMENT: true });

// disable DOM Clobbering protection on output (default is true, handle with care, minor XSS risks here)
const clean = DOMPurify.sanitize(dirty, { SANITIZE_DOM: false });

// enforce strict DOM Clobbering protection via namespace isolation (default is false)
// when enabled, isolates the namespace of named properties (i.e., `id` and `name` attributes)
// from JS variables by prefixing them with the string `user-content-`
const clean = DOMPurify.sanitize(dirty, { SANITIZE_NAMED_PROPS: true });

// keep an element's content when the element is removed (default is true)
const clean = DOMPurify.sanitize(dirty, { KEEP_CONTENT: false });

// glue elements like style, script or others to document.body and prevent unintuitive browser behavior in several edge-cases (default is false)
const clean = DOMPurify.sanitize(dirty, { FORCE_BODY: true });

// remove all <a> elements under <p> elements that are removed
const clean = DOMPurify.sanitize(dirty, {
  FORBID_CONTENTS: ['a'],
  FORBID_TAGS: ['p'],
});

// extend the default FORBID_CONTENTS list to also remove <a> elements under <p> elements
const clean = DOMPurify.sanitize(dirty, {
  ADD_FORBID_CONTENTS: ['a'],
  FORBID_TAGS: ['p'],
});

// change the parser type so sanitized data is treated as XML and not as HTML, which is the default
const clean = DOMPurify.sanitize(dirty, {
  PARSER_MEDIA_TYPE: 'application/xhtml+xml',
});

// use the IN_PLACE mode to sanitize a node "in place", which is much faster depending on how you use DOMPurify
const dirty = document.createElement('a');
dirty.setAttribute('href', 'javascript:alert(1)');

const clean = DOMPurify.sanitize(dirty, { IN_PLACE: true }); // see https://github.com/cure53/DOMPurify/issues/288 for more info

DOMPurify.addHook(
  'uponSanitizeAttribute',
  function (currentNode, hookEvent, config) {
    // Do something with the current node
    // You can also mutate hookEvent for current node (i.e. set hookEvent.forceKeepAttr = true)
    // For other than 'uponSanitizeAttribute' hook types hookEvent equals to null
  }
);

パッケージ	ダウンロード数	Stars	サイズ	Issues	公開日時	ライセンス
パッケージ	ダウンロード数	Stars	サイズ	Issues	公開日時	ライセンス
dompurify	40,531,084	17,052	687 kB	0	4日前	(MPL-2.0 OR Apache-2.0)
sanitize-html	8,450,937	4,561	69.8 kB	133	18日前	MIT
xss	4,567,736	5,316	145 kB	68	2年前	MIT
xss-filters	114,486	1,075	-	7	10年前	-

特徴	`dompurify`	`sanitize-html`	`xss`	`xss-filters`
主環境	ブラウザ / Node.js	Node.js	Node.js	両方（非推奨）
設定性	高い	非常に高い	中	低
メンテナンス	活発	安定的	安定的	終了（非推奨）
推奨度	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	❌

Web アプリケーションにおける HTML サニタイズライブラリの選定

npmのダウンロードトレンド

GitHub Starsランキング

統計詳細

Web アプリケーションにおける HTML サニタイズライブラリの選定：DOMPurify vs sanitize-html vs xss vs xss-filters

🌍 実行環境：ブラウザか Node.js か

⚙️ 設定の柔軟性とカスタマイズ

🛡️ セキュリティとメンテナンス状況

📊 実装の違いによる出力結果

🌱 共通点：基本的な仕組み

1. HTML パーシング

2. 属性のフィルタリング

3. プロトコルの検証

📌 選定ガイドまとめ

💡 結論：どれを選ぶべきか

選び方: dompurify vs sanitize-html vs xss vs xss-filters

人気の比較

dompurifyと類似したnpmパッケージ

sanitize-htmlと類似したnpmパッケージ

xssと類似したnpmパッケージ

xss-filtersと類似したnpmパッケージ

dompurify のREADME

DOMPurify

What does it do?

How do I use it?

Using the unminified version (source-map available)

Using the minified and tested production version (source-map available)

Is there any foot-gun potential?

Okay, makes sense, let's move on

Running DOMPurify on the server

Is there a demo?

What if I find a security bug?

Some purification samples please?

What is supported?

What about legacy browsers like Internet Explorer?

What about DOMPurify and Trusted Types?

Can I configure DOMPurify?

General settings

Control our allow-lists and block-lists

Control behavior relating to Custom Elements

Control behavior relating to URI values

Control permitted attribute values

Influence the return-type

Influence how we sanitize

Influence where we sanitize

Persistent Configuration

Hooks

Removed Configuration

Continuous Integration

Development and contributing

Installation (npm i)

Scripts

Security Mailing List

Who contributed?

Installation (`npm i`)