XSS 攻击与防护

什么是 XSS？

XSS（Cross-Site Scripting，跨站脚本攻击）是一类常见的 Web 安全漏洞。
攻击者通过向页面注入恶意脚本（通常是 JavaScript），使得脚本在其他用户的浏览器中执行。
这类攻击可能导致：

• 窃取用户敏感信息（如 Cookie、会话令牌）。
• 伪造用户操作，冒充用户进行恶意请求。
• 在网站上扩散木马或钓鱼内容。

💡 注意：为了避免和 CSS（Cascading Style Sheets，层叠样式表）混淆，虽然全称是 Cross-Site Scripting，但缩写写作 XSS 而不是 CSS。

---

防护方案

最常见的防护方法之一是对用户输入进行转义或清理，避免恶意脚本被注入页面。
前端开发中推荐使用 DOMPurify 来过滤和清理 HTML 内容：

import DOMPurify from 'dompurify';

const dirty = '<img src=x onerror=alert(1)>';
const clean = DOMPurify.sanitize(dirty);

console.log(clean); // <img src="x">

DOMPurify 详细使用介绍

我来为你详细讲解 DOMPurify 的配置选项，帮你根据智能体聊天页面的需求进行合适的配置。

基础使用回顾

你现在的基础用法是正确的：

import DOMPurify from 'dompurify';
const clean = DOMPurify.sanitize(dirty);

常用配置选项

1. ALLOWED_TAGS - 允许的HTML标签

const clean = DOMPurify.sanitize(dirty, {
  ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'a', 'img', 'code', 'pre', 'blockquote']
});

2. ALLOWED_ATTR - 允许的属性

const clean = DOMPurify.sanitize(dirty, {
  ALLOWED_ATTR: ['href', 'src', 'alt', 'title', 'target', 'class', 'id']
});

3. FORBID_TAGS - 禁止的标签

const clean = DOMPurify.sanitize(dirty, {
  FORBID_TAGS: ['script', 'object', 'embed', 'base', 'link']
});

页面推荐配置

基于你的使用场景，这里是一个推荐的配置：

const chatConfig = {
  // 允许常用的文本格式化标签
  ALLOWED_TAGS: [
    'p', 'br', 'div', 'span',           // 基础布局
    'strong', 'b', 'em', 'i', 'u',      // 文本格式化
    'h1', 'h2', 'h3', 'h4', 'h5', 'h6', // 标题
    'ul', 'ol', 'li',                   // 列表
    'a',                                // 链接
    'img',                              // 图片
    'code', 'pre',                      // 代码
    'blockquote',                       // 引用
    'table', 'thead', 'tbody', 'tr', 'td', 'th' // 表格
  ],
  
  // 允许的属性
  ALLOWED_ATTR: [
    'href', 'target',                   // 链接属性
    'src', 'alt', 'width', 'height',    // 图片属性
    'class', 'id',                      // 样式属性
    'title'                             // 提示属性
  ],
  
  // 禁止危险标签
  FORBID_TAGS: ['script', 'style', 'iframe', 'object', 'embed'],
  
  // 禁止危险属性
  FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover'],
  
  // 允许的协议
  ALLOWED_URI_REGEXP: /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i,
  
  // 其他安全选项
  ALLOW_DATA_ATTR: false,             // 不允许 data-* 属性
  ADD_TAGS: [],                       // 额外允许的标签
  ADD_ATTR: [],                       // 额外允许的属性
  SANITIZE_DOM: true,                 // 清理DOM
  KEEP_CONTENT: true,                 // 保留被禁标签的内容
  RETURN_DOM: false,                  // 返回字符串而不是DOM
  RETURN_DOM_FRAGMENT: false          // 返回字符串而不是DocumentFragment
};

const clean = DOMPurify.sanitize(dirty, chatConfig);

针对特定需求的配置

如果需要保留样式：

const configWithStyle = {
  ...chatConfig,
  ALLOWED_TAGS: [...chatConfig.ALLOWED_TAGS, 'style'],
  ALLOWED_ATTR: [...chatConfig.ALLOWED_ATTR, 'style']
};

如果需要更严格的安全性（纯文本场景）：

const strictConfig = {
  ALLOWED_TAGS: ['p', 'br', 'strong', 'em'],
  ALLOWED_ATTR: [],
  KEEP_CONTENT: true
};

如果需要支持更多富文本功能：

const richTextConfig = {
  ...chatConfig,
  ALLOWED_TAGS: [
    ...chatConfig.ALLOWED_TAGS, 
    'del', 'ins', 'sub', 'sup', 'mark', 'small'
  ],
  ALLOWED_ATTR: [
    ...chatConfig.ALLOWED_ATTR,
    'style', 'align', 'color'  // 添加更多样式属性
  ]
};

使用建议

1. 根据实际需求调整：根据你的智能体返回的HTML内容类型，调整允许的标签和属性

2. 安全优先：宁可严格一些，也不要留下XSS隐患

3. 测试验证：用一些包含潜在危险代码的HTML测试你的配置

4. 定期更新：保持DOMPurify版本更新，获得最新的安全防护

在线测试 DOMPurify

如果你想快速测试 DOMPurify 的效果，可以直接使用以下在线工具：

名称	功能简介	链接
DOMPurify 官方 Demo	官方提供的 demo，可以在 textarea 输入 “脏” HTML／SVG／MathML，实时查看清理后的结果。	cure53.de
Dompurify Playground - Lab	一个简易 playground，可以输入 Dirty（脏 HTML）→ 点击 Sanitize → 查看结果。	lab.veryhax.ninja
CodeSandbox 示例	提供预设模板，可 fork 修改代码，直接在浏览器中查看 DOMPurify 效果。	CodeSandbox
JSFiddle / CodePen 示例	社区提供的在线 demo，可实时修改 HTML / JS 并查看 sanitize 效果。	jsfiddle.net；codepen.io

---

参考链接

• DOMPurify GitHub 仓库
• OWASP: Cross Site Scripting (XSS)

---