React 中 dangerouslySetInnerHTML 的 XSS 风险

页面看似正常，但用户提交的凭证会直接发送到恶意站点。

如何安全地使用 dangerouslySetInnerHTML

1. 使用 DOMPurify 净化 HTML

DOMPurify 是专门用于 XSS 过滤的库，可移除恶意脚本和事件处理属性，只保留安全的 HTML 标签。

npm install dompurify

import DOMPurify from 'dompurify';

function SafeComponent({ dirtyHTML }) {
  const cleanHTML = DOMPurify.sanitize(dirtyHTML, {
    ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'br'], // 按需限定
    ALLOWED_ATTR: ['href', 'title', 'target']
  });
  return <div dangerouslySetInnerHTML={{ __html: cleanHTML }} />;
}

净化器会剔除 <script>、onerror、onclick 等危险内容，大幅降低风险。

2. 避免在用户可控内容上使用

如果内容完全由后端服务或 CMS 生成，且你信任其数据源，风险相对可控。但对于任何用户输入或可被用户修改的数据，应优先使用文本节点渲染（如 {text}）而非 HTML 插入。例如：

// 安全：纯文本显示，自动转义
<p>{userInput}</p>

3. 结合 Content Security Policy (CSP)

即使前端做了净化，仍应配置 CSP 响应头作为纵深防御。CSP 可以限制脚本来源、禁止内联脚本执行等。

Content-Security-Policy: default-src 'self'; script-src 'self'; object-src 'none';