DOMPurify のインストール方法から基本的な使い方

要約

DOMPurify（ドムピュリファイ）は、HTML のサニタイズに使える便利なツールです。ユーザーから入力された内容をクリーンにして、XSS 攻撃などを防ぎます。

意見はこのエリアに表示されます

フロントエンドエンジニアとして日々コードを書いている私ですが、セキュリティに関してはいつも頭を悩ませてます。

今回は安全にデータを扱うための強い味方、DOMPurify の使い方を解説します。ドムピュリファイと発音します。

このツールを使えば、悪意のあるコードをしっかり除去してくれるので、安心してユーザーの入力を受け付けられます。ユーザー投稿型のアプリケーションを作るときは、まずこれ実装しとけって話ですね。

DOMPurify は、ユーザーからの入力や外部ソースからの HTML をクリーンアップして、悪意のあるコード（例えば XSS 攻撃）を防ぐためのライブラリです。HTML を直接 DOM に挿入する際に、セキュリティ対策としてこれを使うと安全です。

サニタイズとは？ データの安全性を確保するために、ユーザーから入力された情報を「きれいにする」ことです。簡単に言うと、悪意のあるコードや不要な部分を取り除いて、意図しない動作を防ぐ作業のことを指します。

詳しくは公式の GitHub リポジトリをチェックしてみてください。

まずは、DOMPurify をインストールしましょう。以下のコマンドでインストールできます。TypeScript を使っている場合は、型定義も一緒にインストールしておくと便利です。

DOMPurify の基本的な使い方はとてもシンプル。例えば、ユーザーから入力された HTML をクリーンにするには、以下のようにします。

sanitize() メソッドを使うことで、危険な要素を自動的に除去してくれます。

以下、オプションを解説します。

例えば、特定のタグだけを許可したい場合は、ALLOWED_TAGS オプションを使います。以下の例では、b と q タグだけが許可されます。

これにより、意図しないタグを排除しつつ、必要な要素だけを残せます。

特定の属性だけを許可することもできます。例えば、href 属性のみを許可したい場合は以下のように設定します。

こうすることで、リンクの属性だけが残り、他の不要な属性は削除されます。

ARIA 属性を許可するかどうかも設定可能です。ARIA 属性はアクセシビリティ向上のために使われますが、不要な場合はオフにできます。

USE_PROFILES を使うことで、特定のプロファイルに基づいたタグや属性のセットを簡単に利用できます。例えば、HTML 用のプロファイルを使いたいときには以下のようにします。

これにより、標準的な HTML の要素と属性を簡単に利用することができます。

SVG など特定の名前空間を使いたい場合は、NAMESPACE オプションを使います。例えば、SVG 用の名前空間を指定するには以下のようにします。

特定のタグを禁止したい場合には、FORBID_TAGS オプションを使います。例えば、style タグを禁止したい場合は以下のようにします。

これで、危険なスタイルを含むタグを除去することができます。

カスタム要素をどう扱うかも設定できます。例えば、特定のカスタム要素をサニタイズの対象外にしたりすることができます。

これで特定のカスタムタグをそのまま使えるように設定できます。

タグ自体は削除したいけど、その中身のテキストだけは保持したい場合、KEEP_CONTENT オプションを使います。

クリーンアップした内容を必ず <body> 内に収めたいときには、FORCE_BODY オプションを使います。

DOMPurify を使うことで、ユーザー入力を安全に扱いながら、アプリケーションのセキュリティを大幅に向上させることができます。特に XSS 攻撃の対策として強力なツールなので、ぜひ活用してみてください。シンプルな使い方からカスタマイズまで自由度が高く、フロントエンドの安心感が増します。以上。

Explore More