前端安全：XSS / CSRF 与防御

存储型：恶意脚本存进服务器（如评论），所有人访问都中招
反射型：恶意脚本在 URL 参数里，诱导用户点击钓鱼链接触发
DOM 型：前端自己把不可信数据写进 DOM（innerHTML / v-html）触发

// 运行环境：Node.js 14+（仅用内置 http）
// 步骤：node brw-l14-server.js  启动在 3000
//       浏览器访问 http://localhost:3000/?name=<img src=x onerror=alert(1)>
//       若服务端直接把 name 拼进 HTML（漏洞版），浏览器会执行 onerror 里的脚本

const http = require('node:http')
http.createServer((req, res) => {
  const url = new URL(req.url, 'http://localhost')
  const name = url.searchParams.get('name') || '访客'

  // ❌ 漏洞版：直接拼接不可信输入（演示用，请勿在生产这么写）
  const unsafe = `<h1>你好, ${name}</h1>`

  // ✅ 安全版：做 HTML 转义（把 < > & " ' 转成实体）
  const escape = (s) => s.replace(/[&<>"']/g, (c) => ({
    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
  })[c])
  const safe = `<h1>你好, ${escape(name)}</h1>`

  res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' })
  // 这里输出「安全版」，你可以把 safe 改成 unsafe 亲自看漏洞效果
  res.end(`<p>安全版输出：</p>${safe}<p>把上面 safe 换成 unsafe 再访问带恶意参数的 URL 即可复现 XSS</p>`)
}).listen(3000, () => console.log('http://localhost:3000  （试 ?name=<img src=x onerror=alert(1)>）'))

用户登录银行 → 点开钓鱼页 → <img src="/api/transfer?to=hacker&amount=1000">
浏览器自动带 cookie 发出 → 银行以为是本人操作

// 运行环境：Node.js 14+（仅用内置 http）
// 步骤：node brw-l14-csrf.js  → 先访问 http://localhost:3000/login 登录（种 cookie），
//       再访问 http://localhost:4000 钓鱼页，点里面的链接，看银行是否「真的转了账」
// 注：CSRF 本质是「借你的 cookie 冒名办事」。这里用两个端口（同站不同源）让 demo 能在本地跑通；
//     真实攻击是跨「站点」（attacker.com → bank.com），那时才轮到 SameSite 出手拦截。

const http = require('node:http')

// ① 银行（3000）：/login 种一个「已登录」cookie，/transfer 校验 cookie 后转账
http.createServer((req, res) => {
  const loggedIn = (req.headers.cookie || '').includes('login=1')
  if (req.url.startsWith('/transfer')) {
    if (loggedIn) return res.end('⚠️ 银行真的执行了转账！因为请求自动带上了你的登录 cookie（CSRF 成功）')
    return res.end('银行：你未登录，拒绝转账')
  }
  if (req.url === '/login') {
    res.writeHead(200, { 'Set-Cookie': 'login=1' })
    return res.end('你已登录银行（cookie 已种下）。现在访问 http://localhost:4000 试试')
  }
  res.end('银行首页：先访问 /login 登录')
}).listen(3000, () => console.log('银行: http://localhost:3000/login'))

// ② 钓鱼页（4000）：诱导用户点一个指向银行的链接（浏览器会自动带上银行 cookie）
http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' })
  res.end(`<h3>恭喜你中奖了！点我领取</h3>
    <p><a href="http://localhost:3000/transfer?to=hacker&amount=1000">点击领取奖金</a></p>
    <p>你在银行已登录的状态下点这个链接，浏览器会自动带上银行的 cookie，银行会以为是你本人操作。</p>`)
}).listen(4000, () => console.log('钓鱼页: http://localhost:4000（先在 3000 登录，再来点链接）'))

<div v-html="userComment"></div>