フロントエンドのXSS対策：サニタイズ（DOMPurify）とエスケープの決定的な違いと実践的使い分け
ウェブアプリケーション開発において、ユーザーからの入力を安全に扱うことは最も重要なセキュリティ対策の一つです。中でも「XSS（クロスサイトスクリプティング）」は、悪意のあるスクリプトがWebサイトに埋め込まれ、ユーザーのブラウザで実行されてしまうという、頻繁に発生する脆弱性です。このXSS対策の二大柱として「エスケープ」と「サニタイズ」がありますが、その違いと使い分けを明確に理解することは、堅牢なフロントエンドを構築する上で不可欠です。本記事では、この二つの手法の決定的な違いと、2026年現在における実践的な使い分けについて解説します。
1. エスケープ：データを「無害な文字列」として扱う技術
エスケープとは、ユーザーからの入力に含まれる特殊文字（例: <, >, &, ", ' など）を、HTMLやJavaScriptのコードとしてではなく、単なる「文字」としてブラウザに解釈させるための処理です。具体的には、<を<に、>を>のように、HTMLエンティティと呼ばれる形式に変換します。
目的と役割:
エスケープの主な目的は、悪意のあるスクリプトの挿入を防ぎ、ユーザー入力を安全なプレーンテキストとして画面に表示することです。たとえば、掲示板に誰かが<script>alert('XSS!')</script>と書き込んだとしても、適切にエスケープされていれば、ブラウザはこれを実行可能なスクリプトとしてではなく、「<script>alert('XSS!')</script>」という単なる文字列として表示します。これにより、攻撃者の意図するスクリプト実行を防ぎます。
適用シーン:
- ユーザー名、コメントのプレーンテキスト部分、検索キーワードなど、HTMLタグを含まないことが想定されるデータを表示する場合。
- HTML属性値（例:
<input value="ユーザー入力">）としてユーザーデータを埋め込む場合。 - URLパラメータとしてユーザーデータを扱う場合（
encodeURIComponentを使用）。
現代の主要なフロントエンドフレームワーク（React, Vue, Angularなど）は、コンポーネントにテキストを挿入する際に、デフォルトでこのエスケープ処理を自動的に行ってくれるため、基本的なXSS対策は非常に簡単になっています。例えば、JSXの{variable}記法やVueの{{variable}}記法は、自動的にエスケープを行います。
2. サニタイズ（DOMPurify等）：信頼できないHTMLを「安全なHTML」に整形する技術
サニタイズとは、ユーザーが入力したHTMLコンテンツ（例: リッチテキストエディタからの入力）の中から、悪意のあるスクリプトや不適切なタグ、属性などを「取り除く（削除・修正する）」ことで、そのHTMLを安全な状態に整形する処理です。エスケープが特殊文字を文字として扱うのに対し、サニタイズはHTML構造そのものを解析し、危険な要素を除去します。
目的と役割:
サニタイズの主な目的は、ユーザーにHTMLの入力を許可するようなケース（例えば、ブログ記事の本文、フォーラムの投稿など）で、そのHTMLが安全であることを保証することです。悪意のある<script>タグや、onerrorのような危険なイベントハンドラ属性、javascript:スキームを含むURLなどを除去し、ホワイトリスト方式で許可された安全なタグと属性のみを残します。
代表的なライブラリ:
フロントエンドでのサニタイズには、DOMPurifyのような堅牢なライブラリを利用するのが一般的です。DOMPurifyは、高速かつ安全にHTMLをサニタイズすることで広く知られています。
エンジニアのスキルシェアプラットフォーム「DokuPro」
教えたい人と学びたい人を繋ぐDokuProでは、新規登録（先生・生徒）を募集中です。
詳細はこちら: https://dokupro.dev/