この記事はZOZO Advent Calendar 2024 シリーズ7の4日目の記事です。

はじめに

先日初めてDOMPurifyを用いたサニタイズの実装をしました
せっかくなので今回はそれについて簡単にまとめようと思います

サニタイズとは

サニタイズとは、ユーザーが入力したデータや外部から取得したデータを表示する際、不正なスクリプトや危険な文字列を無害化する処理を指します
特にフロントエンドではクロスサイトスクリプティング（XSS）などのセキュリティリスクを防ぐ目的で実装されたりします

DOMPurify

DOMPurifyとは

DOMPurifyとはHTMLやSVGなどのコンテンツをサニタイズするために使用されるJavaScriptライブラリです

非常に高速なサニタイズを提供し、大量のデータを処理する際にも優れたパフォーマンスを発揮するため、数あるサニタイズライブラリの中でも高い人気を誇っています

使い方

今回はReactで使用する例を紹介したいと思います

１. ライブラリのインストールします(今回はnpm経由)

npm install dompurify

２. インストールしたDOMPurifyをインポートしDOMPurifyのsanitize関数にサニタイズしたいHTMLを渡す

import DOMPurify from 'dompurify';

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

以上で基本的なサニタイズは実現できます

実例

今回は以下のようなHTMLを元に実例を見ていきたいと思います

`<div style="color: red;"><p>サニタイズデモ</p><script>alert('scriptタグを用いたXSS');</script></div>`

以下のようなコードでサニタイズなしで表示するとscriptタグなどもそのまま埋め込まれているのが確認できます

function App() {
  // サニタイズ前のHTML
  const html = `<div style="color: red;"><p>サニタイズデモ</p><script>alert('scriptタグを用いたXSS');</script></div>`;

  return (
    <>
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </>
  );
}

これでは悪意のあるスクリプトが入っていた際に、情報漏洩などのリスクを伴ってしまいます
そこでDOMPurifyを用いてサニタイズを実装してみます

すると、scriptタグが切り取られているのが確認できると思います

function App() {
  // サニタイズ前のHTML
  const html = `<div style="color: red;"><p>サニタイズデモ</p><script>alert('scriptタグを用いたXSS');</script></div>`;

  // サニタイズ後のHTML
  const cleanHTML = DOMPurify.sanitize(html);

  return (
    <>
      <div dangerouslySetInnerHTML={{ __html: cleanHTML }} />
    </>
  );
}

ちなみに、sanitize関数の第二引数にて細かい設定を追加することもできます
以下ではstyle属性も取り除くように設定を追加し、実際に取り除かれているのが確認できます

const cleanHTML = DOMPurify.sanitize(html, { FORBID_ATTR: ["style"] });

他にもDOMPurifyのリポジトリのREADMEに設定回りついても書いてあるので興味ある方は覗いてみてください

おわり

今回はDOMPurifyを用いたサニタイズの実装について簡単にまとめてみました
引き続きDOMPurifyやセキュリティ周りついての知見を増やし、機会があればアウトプットもしていきたいと思います！

内容やソースコードに間違い等ありましたらご指摘いただけますと学びになり大変幸いです。
ここまで読んでいただきましてありがとうございました！