HTML Sanitizer APIについて

2025年12月7日（更新: 2025年12月7日）

Web
ブラウザ

はじめに

12月1日から25日まで、毎日1記事ずつ公開していくアドベントカレンダー企画です。この連載では、Web標準とDDDについて学びを深めていきます。第7回は「HTML Sanitizer API」がテーマです。 HTML Sanitizer APIとは何か、実際どのように実装するのかを学んでいきます。

HTML Sanitizer APIとは

HTML Sanitizer APIはHTML文字列を受け取り、DOMまたは ShadowDOMに挿入される際に不要な要素や属性、その他のHTMLをフィルタリングします。Webアプリケーションはクライアント側で作成したデータをもとにHTMLを構築することがありますよね。この時に<script>を埋め込んだり、onErrorを埋め込んだりすると、アプリケーションとして意図しない挙動をする可能性があります。（XSS攻撃）このような攻撃から守るために、不要な要素や属性などをフィルタリングする処理が必要です。 HTMLを代入するプロパティとして、documentElement.innerHTMLが提供されていますが、ユーザーの入力データを利用したい場合は推奨されていません。理由としては、意図しない要素や属性が埋め込まれる可能性があり、innerHTMLはフィルタリングを行っていないからです。ユーザー入力データを利用してHTMLを構築する場合はHTML Sanitizer APIが提供しているsetHTMLを使うのが良いとされています。ただ、2025/12/7時点ではHTML Sanitizer APIは主要なブラウザで実装されておらずベースラインになっていないので、WebAPIとして利用することが出来ません。 HTMLのサニタイズで提供されているものだとDOMPurifyがありますね。 HTML Sanitizer APIと同じく不要な要素や属性、HTMLをフィルタリング出来ます。しかし、新しいHTML要素が追加されたり、利用者側のアップデートが遅れたりすると脆弱性につながる可能性があると考えています。 HTML Sanitizer APIであれば、このあたりは保証されるはずです。

HTML Sanitizer APIの実装例

<html>
  <body>
    <a id="target" href="/history/page2">Go to Page 2</a>
  </body>
</html>

<script>
  const unsanitizedHTML = "untrastedHTML <script>alert(1)<" + "/script>";
  const target = document.getElementById("target");

  // setHTMLでサニタイズ
  target.setHTML(unsanitizedHTML);

  // Sanitizerのコンストラクタでサニタイズの詳細設定
  // setHTMLの第二引数は任意の引数のoptionsを代入可能
  // optionsにサニタイズの設定を代入すると反映される
  const sanitizer1 = new Sanitizer({
    elements: ["div", "p", "button", "script"],
  });
  target.setHTML(unsanitizedHTML, { sanitizer: sanitizer1 });

  // removeElementsはサニタイズによって削除される要素を指定
  // 反対に、サニタイズをしない設定としてallowElementがある
  target.setHTML(unsanitizedHTML, {
    sanitizer: { removeElements: ["div", "p", "button", "script"] },
  });
</script>

クイズ

2025/12/7時点でユーザーの入力をHTMLに組み込む場合、次のうちどれを使うべきでしょうか。

DOMPurify.sanitize()
documentElement.setHTML
documentElement.innerHTML

:::details 回答

DOMPurify.sanitize()が正解。 documentElement.setHTMLはAPIとして提供されていない、documentElement.innerHTMLはサニタイズがされていないため不正解。 :::

まとめ

今回はHTML Sanitizer APIを紹介しました。 Web APIとしてサニタイズの機能を持っているのは便利だと思うので、ベースラインになると嬉しいなと思います。

参考

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API https://wicg.github.io/sanitizer-api/ https://developer.mozilla.org/en-US/docs/Web/API/Element/setHTML https://developer.mozilla.org/en-US/docs/Web/API/Sanitizer https://developer.mozilla.org/en-US/docs/Web/API/Sanitizer/Sanitizer https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility