【実務・中級編】SVG画像ファイルに埋め込まれたスクリプトによるXSS – アプリケーションセキュリティ & 安全な開発防御ガイド

SVGは「画像」にあらず。そのアップロード機能が招くXSSの深淵

現場でよくある光景だ。「ユーザーがプロフィールアイコンをアップロードできるようにしたい」という機能要望に対し、開発者が深く考えずに「画像ならOK」と拡張子チェックだけで実装を完了させてしまう。

しかし、現代のWebアプリケーションにおいて、SVGを単なる「画像」として扱うのは、「爆弾の導火線に火をつけながら、これはただの紐です」と主張するに等しい。

SVG（Scalable Vector Graphics）は画像ファイルではない。あれはXMLであり、DOMを内包し、JavaScriptを実行できる「Webドキュメント」だ。今日は、SVGを介したXSS（クロスサイトスクリプティング）のメカニズムと、泥臭い現場で生き残るための防御策について話をしよう。

—

1. なぜSVGでXSSが成立するのか？

SVGファイルの中に


このファイルを、WebサーバーがContent-Type: image/svg+xmlで返却し、かつブラウザがその画像に直接アクセス（またはタグでインライン表示）すると、ブラウザは「これは画像だ」と認識しつつも、SVG内のJavaScriptをコンテキスト上で実行してしまう。
特に危険なのは、「サーバーサイドで画像サイズをチェックしたから大丈夫」という誤解だ。ファイルの内容をパースせずにバイナリサイズだけを見ているなら、そのセキュリティ対策はザルと同じだ。
---
2. 現場で使える防御戦略：多層防御の鉄則
SVGのアップロードを許可する場合、以下の3つを組み合わせて「完全に無害化」する必要がある。
1.  Content-Security-Policy (CSP) の厳格化: ブラウザ側でスクリプトの実行を禁止する。

2.  DOMPurifyによるサニタイズ: XMLをパースし、