🔒 はじめに：なぜHTMLのサニタイズが必要なのか？
MarkdownをHTMLに変換して表示するアプリを作っていると、必ず直面するのが**XSS（クロスサイト・スクリプティング）**の問題です。
たとえば、ユーザーの入力に次のような内容が含まれていた場合…
<script>alert('あなたのセッションが狙われています');</script>
このまま innerHTML に出力してしまうと、他のユーザーのブラウザ上で 勝手にスクリプトが実行されてしまいます。
💡 DOMPurifyとは？
DOMPurify は、Cure53 によって開発された高性能な HTML サニタイザーです。
「ユーザーが入力したHTMLを安全にブラウザに表示する」ことに特化しており、あらゆるXSS攻撃から保護してくれます。
主な特徴
-
<script>タグやイベント属性（onload,onclickなど）を自動除去 -
javascript:URIの除去 - SVG・MathMLの攻撃ベクトルにも対応
- 軽量で高速、クライアント／Node.js両対応
🔧 DOMPurifyの導入方法
CDNでサクッと導入できます：
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.5/dist/purify.min.js"></script>
Node.jsやWebpack環境では以下でインストール可能：
npm install dompurify
🧪 実践：marked.jsと組み合わせてMarkdownを安全に表示
MarkdownをHTMLに変換するライブラリとして有名な marked.js を使った例です。
<div id="output"></div>
<script>
const dirtyMarkdown = `
# ユーザーが入力した内容
<script>alert('XSS!')</script>
<img src="x" onerror="alert('画像が壊れてます')">
`;
const html = marked.parse(dirtyMarkdown); // Markdown → HTML
const clean = DOMPurify.sanitize(html); // HTMLをサニタイズ
document.getElementById('output').innerHTML = clean; // 安全に出力
</script>
✅ DOMPurifyで防げるXSSの例
| 攻撃内容 | DOMPurifyの挙動 |
|---|---|
<script>alert(1)</script> |
タグごと削除される |
<img onerror=alert(1)> |
onerror が削除される |
<a href="javascript:..."> |
href が無効化される |
<svg><script>...</script> |
SVGタグの中も無効化 |
<div style="background-image:url(javascript:...)"> |
危険なstyleは除去される |
⚙️ オプション設定で制御も可能
特定のタグや属性だけを許可するように制御できます：
DOMPurify.sanitize(dirtyHtml, {
ALLOWED_TAGS: ['b', 'i', 'a', 'p', 'img'],
ALLOWED_ATTR: ['href', 'src', 'alt', 'title']
});
🚨 注意：marked()単体ではXSS対策できません！
marked.js のオプションにかつて存在していた sanitize: true は現在非推奨です。
XSSを防ぐには、必ず DOMPurify で HTML をサニタイズすることが必要です。
🧼 おすすめの組み合わせ
| 処理内容 | 使用ライブラリ |
|---|---|
| Markdown → HTML変換 |
marked, markdown-it
|
| HTML → サニタイズ | DOMPurify |
| 安全な出力 |
innerHTML に挿入可 |
🔗 参考リンク
✍️ まとめ
DOMPurifyは、ユーザー生成コンテンツを取り扱うWebアプリにとって、不可欠なセキュリティ対策ライブラリです。
Markdown表示、コメント欄、レビュー欄などにJavaScriptの罠を仕込まれないよう、今すぐ導入を検討しましょう！