出力エスケープでXSSを防ごう

import escapeHtml from 'escape-html';

app.get('/profile', (req, res) => {
  const name = req.query.name;
  res.send(`<h1>こんにちは、${escapeHtml(name)}さん</h1>`);
});

// 入力: <script>alert('XSS')</script>
// 出力: <h1>こんにちは、&lt;script&gt;alert(&#39;XSS&#39;)&lt;/script&gt;さん</h1>
// → 安全に文字列として表示される

// 危険: innerHTML はHTMLとして解釈される
const userInput = '<img src=x onerror="alert(1)">';
document.getElementById('output').innerHTML = userInput;
// → スクリプトが実行される

// 安全: textContent はテキストとして表示される
document.getElementById('output').textContent = userInput;
// → 「<img src=x onerror="alert(1)">」が文字列として表示される

import DOMPurify from 'dompurify';

// HTMLコンテンツをサニタイズ
const dirtyHtml = '<p>Hello</p><script>alert("XSS")</script><b>World</b>';
const cleanHtml = DOMPurify.sanitize(dirtyHtml);
// 結果: '<p>Hello</p><b>World</b>'
// → <script> タグが除去される

// 許可するタグを制限
const cleanHtml = DOMPurify.sanitize(dirtyHtml, {
  ALLOWED_TAGS: ['p', 'b', 'i', 'em', 'strong', 'a', 'br'],
  ALLOWED_ATTR: ['href', 'title']
});

// Express での CSP ヘッダー設定
app.use((req, res, next) => {
  res.setHeader('Content-Security-Policy', [
    "default-src 'self'",                    // デフォルトは同一オリジンのみ
    "script-src 'self'",                     // スクリプトは同一オリジンのみ
    "style-src 'self' 'unsafe-inline'",      // スタイルは同一オリジンとインライン
    "img-src 'self' data: https:",           // 画像は同一オリジン、data URI、HTTPS
    "font-src 'self' https://fonts.gstatic.com", // フォントの許可元
    "connect-src 'self' https://api.example.com", // API接続先
    "frame-ancestors 'none'",                // iframeへの埋め込みを禁止
  ].join('; '));
  next();
});

// CSP違反をレポートする設定
res.setHeader('Content-Security-Policy-Report-Only', [
  "default-src 'self'",
  "script-src 'self'",
  "report-uri /api/csp-report"  // 違反レポートの送信先
].join('; '));

// 違反レポートを受け取るエンドポイント
app.post('/api/csp-report', express.json({ type: 'application/csp-report' }), (req, res) => {
  console.log('CSP Violation:', req.body);
  res.status(204).end();
});

// HTMLコンテキスト
const safeHtml = escapeHtml(userInput);
res.send(`<p>${safeHtml}</p>`);

// JavaScript コンテキスト
const safeJs = JSON.stringify(userInput);
res.send(`<script>var name = ${safeJs};</script>`);

// URL コンテキスト
const safeUrl = encodeURIComponent(userInput);
res.send(`<a href="/search?q=${safeUrl}">検索</a>`);

// 安全: React が自動的にエスケープ
function UserProfile({ name }: { name: string }) {
  return <h1>こんにちは、{name}さん</h1>;
  // name が "<script>alert(1)</script>" でも安全に表示される
}

// 危険: dangerouslySetInnerHTML はエスケープしない
function RichContent({ html }: { html: string }) {
  // 使用する場合は必ず DOMPurify でサニタイズする
  const sanitized = DOMPurify.sanitize(html);
  return <div dangerouslySetInnerHTML={{ __html: sanitized }} />;
}