React 中的 XSS：dangerouslySetInnerHTML 与第三方脚本

React 会在将通过 JSX 渲染的所有值插入 DOM 之前自动进行转义。在 JSX 中写入 {userInput} 时，React 会执行等效于 textContent 赋值的操作，因此该值会被当作文本处理，而不会被当作 HTML。这一机制默认可以防止 React 应用中的大多数 XSS 攻击。

dangerouslySetInnerHTML={{ __html: htmlString }} 是 React 中绕过自动转义的特殊机制。这个名称故意具有警示性，提醒您需要自行负责 HTML 字符串的安全性。React 会直接设置 innerHTML，从而执行其中的任何 HTML，包括脚本和事件处理程序。

当您要渲染来自富文本编辑器（例如 TipTap 或 Quill）、存储 HTML 的 CMS，或 Markdown 转 HTML 转换器的 HTML 时，确实需要使用 dangerouslySetInnerHTML。这些来源会生成真正的 HTML 标记，必须将其作为 HTML 渲染，而不能作为经过转义的文本渲染。

如果 HTML 字符串包含 <script>stealCookies()</script> 或 <img src=x onerror="stealData()">，将其设置为 innerHTML 就会执行攻击者的代码。任何未经净化就直接传递给 dangerouslySetInnerHTML 的用户提供内容，都是严重的 XSS 漏洞。

DOMPurify 是浏览器中符合行业标准的 HTML 净化工具。它会在沙箱环境中解析 HTML 字符串，移除危险的元素和属性（脚本标签、事件处理程序、javascript: URL），然后返回安全的 HTML 字符串。使用方式：在将内容传递给 dangerouslySetInnerHTML 之前，先调用 DOMPurify.sanitize(dirtyHtml)。

第三方脚本（分析工具、聊天组件、广告网络）拥有与应用 JavaScript 相同的权限。遭到入侵或带有恶意的第三方脚本可以读取 document.cookie、访问 localStorage、读取表单输入内容，并向外部服务器发送请求，而用户完全不会察觉。

内容安全策略是一个 HTTP 标头，用于声明允许执行哪些脚本。即使 XSS 载荷被注入 DOM，配置正确的 CSP 也可以通过限制内联脚本并只允许列入白名单的脚本来源来阻止其执行。CSP 是输入净化之后的第二道防线。

npm 软件包是现实中的 XSS 攻击途径。依赖项可能包含用于窃取并外传环境变量或用户数据的恶意代码。2022 年的 node-ipc 事件和 2021 年的 ua-parser-js 入侵事件表明，广泛使用的软件包也可能被接管并植入恶意代码。请使用 npm audit 审计依赖项，并使用锁定文件。

成功的 XSS 攻击可以让攻击者窃取用户存储在 sessionStorage 中的 JWT 令牌（将其发送到攻击者控制的服务器），以已认证用户的身份执行操作（使用用户会话发起接口调用），修改 DOM 以显示钓鱼内容，或者记录用户在应用中输入的每一次按键。

Trusted Types 浏览器接口要求所有 DOM 接收点（innerHTML、eval、script.src）接收特殊的类型化对象，而不是原始字符串。这样可以在平台层面阻止基于字符串的 XSS 载荷到达 DOM。React 正在逐步支持 Trusted Types，CSP 也可以强制启用它。

渲染 CMS HTML 的安全模式是：获取 HTML，通过带有安全标签和属性允许列表的 DOMPurify.sanitize() 进行净化，然后使用 dangerouslySetInnerHTML={{ __html: cleanHtml }} 进行渲染。永远不要跳过净化步骤，即使您信任 CMS 也不能例外，因为 CMS 数据库本身也可能遭到入侵。

调用 DOMPurify.sanitize(htmlString) 时，DOMPurify 会做什么？

React 会自动转义 JSX 值，从而防止大多数 XSS 攻击。dangerouslySetInnerHTML 可以绕过这一机制来渲染合法的 HTML，但必须先使用 DOMPurify 净化输入。第三方脚本和遭到入侵的 npm 软件包都是供应链 XSS 攻击途径。内容安全策略提供第二道防御层。成功的 XSS 攻击可能导致令牌窃取、身份冒充和钓鱼攻击。