悪意ある「落書き」からウェブサイトを守る！DOMPurifyでHTML入力を安全にクリーンアップしよう

皆さん、こんにちは！セキュリティ担当の〇〇です。
日々の開発、お疲れ様です。ウェブサイトやアプリケーションを開発していると、ユーザーからの入力を受け付ける機会はたくさんありますよね。例えば、コメント欄やプロフィール編集、問い合わせフォームなど。これらの「ユーザーからの入力」が、実はサイバー攻撃の入口になってしまうことがあるんです。

今回は、そんな悪意ある入力からウェブサイトを守るための強力な味方、「DOMPurify」というライブラリについて、その基本的な使い方から、ちょっと踏み込んだ設定まで、初心者の方にも分かりやすく解説していきたいと思います。「インジェクション攻撃？」「サニタイズって何？」という方も、ご安心ください。身近な例え話を交えながら、一歩ずつ対策を学んでいきましょう！

そもそも「インジェクション攻撃」って、どんな怖いものなの？

まず、DOMPurifyがなぜ必要になるのか、その背景にある「インジェクション攻撃」について、簡単に触れておきましょう。

インジェクション攻撃は、様々な種類がありますが、中でもHTMLやJavaScriptを悪用するものは、ウェブサイトの見た目を書き換えたり、ユーザーの情報を盗み出したりするのに使われやすいんです。

例えるなら、あなたの家の壁に、勝手に落書きをされたり、防犯カメラの映像を書き換えられたりするようなイメージです。

• SQLインジェクション: これは、データベースに命令を送る際に、悪意のある命令を紛れ込ませる攻撃です。家の鍵に、ピッキングツールとは別に、合鍵を作るための特殊な道具を差し込まれるようなイメージでしょうか。データベースにある大切な情報（顧客リストなど）が盗まれたり、改ざんされたりする可能性があります。
• OSコマンドインジェクション: これは、サーバー上で動いているOS（WindowsやLinuxなど）に、普段は使わないような「裏口」から命令を送る攻撃です。家のドアに鍵がかかっていても、勝手に窓をこじ開けられたり、電話回線を使って勝手に指示を出されたりするようなイメージです。サーバーを踏み台にされて、他のシステムに攻撃を仕掛けられたり、データを破壊されたりする危険性があります。

そして、今回焦点を当てるのは、HTMLインジェクションと呼ばれるものです。これは、ウェブページに表示されるHTMLコードの中に、悪意のあるコードを紛れ込ませる攻撃です。

例えば、コメント欄に以下のようなコードが投稿されたとします。

この製品は素晴らしい！

もし、このコメントがそのままウェブサイトに表示されてしまったらどうなるでしょう？「あなたのクッキーを盗みました！」というメッセージが、ユーザーのブラウザに表示されてしまいます。これは、ユーザーのログイン情報などを盗むための、第一歩となる可能性があるんです。まるで、家のポストに「この郵便物、中身は秘密だよ」と書かれた怪しい封筒が勝手に投函されているようなものです。

DOMPurify：ウェブサイトの「検閲官」として悪意あるコードを無力化！

そこで登場するのが、DOMPurifyです。DOMPurifyは、JavaScriptで書かれたライブラリで、ウェブサイトが受け取ったHTML入力を「検閲」し、悪意のあるコードを無害なものに変換してくれる役割を担います。

例えるなら、あなたが書いた手紙を、ポストに投函する前に「検閲官」がチェックしてくれるようなものです。もし、手紙の中に「危険な道具の作り方」のような怪しい情報が書かれていたら、「これはダメですよ！」と消したり、無害な文章に書き換えたりしてくれます。

DOMPurifyは、次のような方法で悪意あるコードを無害化します。

• 不審なタグや属性の削除:
  
  

  ユーザーからのコメント

  
  
  

  このコードでは、

  1. でDOMPurifyライブラリを読み込んでいます。
  2. userInput という変数に、悪意のある可能性のあるHTMLコードを格納しています。
  3. DOMPurify.sanitize(userInput) で、userInput の内容をDOMPurifyに渡して、安全なHTMLに変換しています。
  4. 変換された cleanHtml を、comment-output というIDのdiv要素の中に表示しています。

  このコードを実行すると、alert()関数やonerror属性は削除され、安全なHTMLとして表示されるはずです。まるで、落書きされた壁紙が、きれいに塗り直されたようなイメージですね。

  設定をカスタマイズしよう：より強固なセキュリティのために

  DOMPurifyは、デフォルトでも十分安全なのですが、ウェブサイトの要件に合わせて、さらに細かく設定をカスタマイズすることも可能です。これにより、攻撃者がさらに巧妙な手口で侵入しようとしても、しっかりと防御できるようになります。

  許可するタグや属性を限定する (ALLOWED_TAGS, ALLOWED_ATTR)

  「うちのサイトでは、タグは使うけど、