Trusted Types 在 React 中怎么正确使用？

倩云 Dev 提问于 2026-03-27 16:12:22 阅读 3

安全

我在项目里启用了 Trusted Types 策略，但一用 innerHTML 就报错，说违反了策略。我试过用 createHTML，但不知道在 React 里该怎么集成。

比如下面这段代码，在 useEffect 里动态设置 HTML 内容，浏览器直接拦了：

useEffect(() => {
  const el = document.getElementById('content');
  if (el) {
    el.innerHTML = userContent; // 这里触发 Trusted Types 错误
  }
}, [user]);

是不是得用 policy.createHTML 包一下？但全局定义 policy 又怕影响其他模块，有没有更 React 的写法？

我来解答赞 2 收藏

反馈

1 条解答

UX蕴轩 Lv1

确实，Trusted Types 对 innerHTML 的使用限制挺烦人的。不过在 React 里有更好的写法来处理这个问题。

首先别直接操作 DOM 元素的 innerHTML，React 自带的 dangerouslySetInnerHTML 属性可以和 Trusted Types 很好地配合。你可以创建一个专用的 policy 来处理 HTML 内容：

const createHtmlPolicy = () => {

  if (!window.trustedTypes || !window.trustedTypes.createPolicy) return null;

  

  return window.trustedTypes.createPolicy('react-app', {

    createHTML: (input) => input

  });

};



const htmlPolicy = createHtmlPolicy();



function ContentComponent({ userContent }) {

  const html = htmlPolicy ? htmlPolicy.createHTML(userContent) : userContent;



  return (

    

  );

}

这样写有几个好处：只在需要的地方应用策略，不会全局污染。而且利用了 React 的属性机制，代码更清晰。

如果要动态更新内容，就让 ContentComponent 根据 props 变化自动刷新就行，不用手动操作 DOM 元素。这种方式不仅解决了问题，还让代码更 React 风格。说实话，这种小重构真能让维护轻松不少。

2026-03-27 16:29