innerHTMLによるXSSと防止方法

el.innerHTML = userInputは、文字列をHTMLとして解析します。userInputに<script>タグやイベントハンドラー属性（onclick、onerror）が含まれていると、ブラウザーはそれらを解釈し、攻撃者が制御するコードをページ上で実行します。

HTMLにユーザーデータを埋め込むコード、つまりサーバーテンプレートやクライアントサイドレンダリングでは、データがエスケープされていないとXSSの危険があります。APIレスポンスからinnerHTMLを構築するシングルページアプリケーションは、レスポンスにユーザーコンテンツが含まれる場合、特に危険にさらされます。

ユーザー名"Bob<img src=x onerror=alert(1)>"をdiv.innerHTML = `Welcome, ${user}`で設定すると、imgの読み込みに失敗したときにalert(1)が実行されます。同じペイロードをtextContentでプレーンテキストとして設定すれば無害です。ブラウザーにはタグではなく文字だけが見えるためです。

textContentはテキストだけを設定するため、HTMLの特殊文字はタグではなくリテラル文字として表示されます。これはほとんどの場合に適した方法です。実際にマークアップを表示する必要がある場合にだけinnerHTMLへ切り替え、テキストの表示には使用しないでください。

ユーザーデータを含む要素を作成するには、createElementとtextContentを使って構築します：const li = document.createElement("li"); li.textContent = name; ul.appendChild(li);。結果の構造はinnerHTMLと同じですが、最初からXSSに安全です。

サーバーで生成された信頼できるHTML（独自のテンプレート出力や、信頼できるエディターでサニタイズされたリッチテキスト）であれば、innerHTMLを使用しても問題ありません。信頼できないソースのデータには、サニタイズせず直接適用しないでください。

ユーザーがリッチテキスト（コメントエディターの入力やMarkdownのレンダリング結果など）を送信する場合は、innerHTMLに設定する前にサニタイズします：el.innerHTML = DOMPurify.sanitize(richHtml)。DOMPurifyは危険なタグや属性を除去しつつ、<b>、<em>、<a>のような安全な書式は保持します。

el.insertAdjacentHTML("beforeend", html)はHTML文字列を解析するため、innerHTMLと同じXSS攻撃面を持ちます。同じルールが適用されます。ユーザーデータを直接渡さず、サニタイズするかDOMメソッドを使用してください。document.writeも同様ですが、これはもう誰も使うべきではありません。

React、Vue、Svelte、Angularは、補間されたテキストをデフォルトでエスケープします。{name}は安全です。これらのフレームワークにはエスケープを回避する機能（ReactのdangerouslySetInnerHTMLやVueのv-html）がありますが、同じXSSの危険を伴います。サニタイズと併用し、慎重に使用してください。

属性値でさえ攻撃経路になることがあります。<a href={url}>で、url="javascript:alert(1)"の場合、クリック時に実行されます。ユーザー入力をhref、srcなどのURLを受け取る属性に設定する前に、URLのスキームを1つずつ検証し、http:、https:、mailto:、tel:だけを許可してください。

モダンブラウザーはTrusted Typesをサポートしています。CSPでrequire-trusted-types-for 'script'を設定すると、innerHTMLは生の文字列を拒否し、ポリシーでラップされた値だけを受け入れるようになります。これにより、開発者の注意力ではなくAPIによってXSSを防止できます。

単一のレイヤーだけでは十分ではありません。サーバーでの入力検証、レンダリング時の出力エスケープ、注入されたスクリプトをブロックする CSP、生の文字列を拒否する Trusted Types、そして innerHTML の使用箇所に対するセキュリティレビューを組み合わせてください。多層防御により、いずれか 1 つのレイヤーにバグがあっても耐えられます。

ユーザー入力に対する innerHTML は、典型的な XSS の攻撃経路です。テキストには textContent を使い、構造の生成には createElement と textContent を使い、リッチ HTML が必要な場合は DOMPurify を使ってください。属性値の URL スキームを検証してください。CSP と Trusted Types を重ねて、コードレビューをすり抜けたバグを無力化してください。最新のフレームワークはデフォルトでエスケープしますが、安全でないエスケープハッチはできるだけ少なくし、レビューしてください。