【くろすさいとすくりぷてぃんぐ】

XSS（クロスサイトスクリプティング）とは？

最終更新: 2026年10月8日

💡 表示するはずの文字が、動くコードになる罠

信頼できない入力などがWebページのコードとして解釈され、利用者のブラウザーで意図しないスクリプトなどが動く脆弱性・攻撃。表示先に合う出力処理が重要です。

📌 このページのポイント

攻撃コードを載せず流れを示した例です。CSPやCookie属性は追加の防御になります。

ひよこ

XSSって、何が起きる攻撃？

ペンギン先生

たとえばコメントを表示するとき、投稿内容を普通の文字ではなく動くコードとして解釈してしまうと、見た人のブラウザーで意図しない処理が動くことがある。情報の窃取や、利用者の権限を使った不正操作につながるんだ。

ひよこ

Stored、Reflected、DOM-basedって違うの？

ペンギン先生

Storedは保存された入力、Reflectedはリクエストの入力が応答に返される流れ。DOM-basedはブラウザー内のDOM操作などが関わる流れだよ。これらは完全に別の3箱ではなく、重なる場合もある。名前だけで危険度は決められないね。

ひよこ

文字をエスケープすれば防げる？

ペンギン先生

どこに出すかに合う処理が必要だよ。HTMLの本文、属性、URL、JavaScriptでは扱いが違う。普通のdivなどに文字を表示するならtextContentのような方法を使い、入力をむやみにHTMLやコードとして解釈させないことが大事なんだ。

ひよこ

Reactを使っていれば大丈夫？

ペンギン先生

フレームワークの通常の表示には保護があるけれど、全部の使い方を守るわけではないよ。dangerouslySetInnerHTMLなどで信頼できないHTMLを直接入れる場合は別。HTMLを許す必要があるなら、適切なサニタイズとライブラリの更新も必要だね。

ひよこ

CSPやHttpOnlyも役立つの？

ペンギン先生

CSPはコードなどの読み込みや実行を制限する追加の防御になる。HttpOnlyはそのCookieをJavaScriptから読ませない設定だよ。ただしCookieが読めなくても、ページ内の不正操作などは残り得る。どちらも安全な出力処理の代用にはならないんだ。

まとめ：ざっくりこれだけ覚えればOK！

「XSS」って出てきたら「Webページで不正なコードを動かされる攻撃」と思えばだいたいOK！

📖 おまけ：英語の意味

「Cross-Site Scripting」＝クロスサイトスクリプティング

💬 略称はXSS。初期のサイトをまたぐ情報窃取から名前が付いたけれど、現在は別サイトからの攻撃に限らないよ

参考資料