如何修复Dotnet Web Form中innerHTML的TrustedHTML赋值错误

看起来你遇到的问题是Chrome浏览器特有的Trusted Types强制执行导致的——毕竟Chrome是最早全面支持Trusted Types规范的浏览器，其他浏览器可能还没严格执行这个规则，所以只有Chrome会弹出这个错误。咱们先看看你的CSP配置里的关键问题点：

<add name="Content-Security-Policy" value="default-src 'self' 'unsafe-inline' 'unsafe-eval' https://userservices.vip.symantec.com  https://www.gstatic.com https://translate.google.com https://translate.googleapis.com https://translate-pa.googleapis.com; style-src 'unsafe-inline' 'unsafe-eval' 'unsafe-hashes'; object-src 'none';  img-src 'self' data: https: http://translate.google.com; child-src https://dxc.mediaplatform.com; require-trusted-types-for 'script'; script-src 'self' 'unsafe-eval'; script-src-elem 'self' 'unsafe-inline';" />

你配置了require-trusted-types-for 'script'这个指令，它会强制所有脚本使用**可信类型（Trusted Types）**来设置innerHTML、document.write等可能引入XSS风险的API，但你的CSP里并没有定义任何允许的Trusted Types策略，Chrome就会直接拦截非可信的innerHTML操作。

下面给你两种可行的解决思路：

1. 快速临时解决：移除Trusted Types强制指令 #

如果你的应用暂时不需要Trusted Types的安全增强，可以直接删掉require-trusted-types-for 'script'这部分，这样Chrome就不会强制要求可信类型，innerHTML操作就能正常工作。修改后的CSP如下：

<add name="Content-Security-Policy" value="default-src 'self' 'unsafe-inline' 'unsafe-eval' https://userservices.vip.symantec.com  https://www.gstatic.com https://translate.google.com https://translate.googleapis.com https://translate-pa.googleapis.com; style-src 'unsafe-inline' 'unsafe-eval' 'unsafe-hashes'; object-src 'none';  img-src 'self' data: https: http://translate.google.com; child-src https://dxc.mediaplatform.com; script-src 'self' 'unsafe-eval'; script-src-elem 'self' 'unsafe-inline';" />

2. 长期安全方案：配置Trusted Types策略 #

如果想保留Trusted Types的安全防护（这更推荐，能有效降低XSS风险），需要两步操作：

• 第一步：在CSP中添加Trusted Types允许策略
  在你的CSP值里加入trusted-types指令，指定一个自定义的策略名称（比如mySafeHtmlPolicy），完整配置如下：

  <add name="Content-Security-Policy" value="default-src 'self' 'unsafe-inline' 'unsafe-eval' https://userservices.vip.symantec.com  https://www.gstatic.com https://translate.google.com https://translate.googleapis.com https://translate-pa.googleapis.com; style-src 'unsafe-inline' 'unsafe-eval' 'unsafe-hashes'; object-src 'none';  img-src 'self' data: https: http://translate.google.com; child-src https://dxc.mediaplatform.com; require-trusted-types-for 'script'; trusted-types mySafeHtmlPolicy; script-src 'self' 'unsafe-eval'; script-src-elem 'self' 'unsafe-inline';" />
  

• 第二步：在JS代码中创建并使用可信策略
  编写代码创建这个可信策略，用来处理你要插入的HTML内容（这里可以添加安全过滤逻辑，比如移除危险标签/属性）：

  // 创建可信类型策略
  const htmlPolicy = trustedTypes.createPolicy('mySafeHtmlPolicy', {
    createHTML: (inputHtml) => {
      // 示例：简单过滤<script>标签，实际可以根据需求做更严格的校验
      return inputHtml.replace(/<script[^>]*>.*?<\/script>/gi, '');
    }
  });
  
  // 使用策略设置innerHTML
  document.getElementById('your-element-id').innerHTML = htmlPolicy.createHTML(yourHtmlContent);
  

  这样Chrome就会允许通过这个可信策略处理后的innerHTML操作，同时保持安全防护。

3. 排查第三方脚本的影响 #

你的CSP允许了多个第三方域名（比如Google翻译相关服务），如果是这些第三方脚本在设置innerHTML时没有使用可信类型，也会触发错误。这种情况下：

• 如果能联系第三方开发者，建议他们适配Trusted Types；
• 临时方案可以在trusted-types指令中添加'allow-duplicates'（允许重复注册策略）或者'unsafe-inline'（不推荐，会降低安全性），比如：trusted-types mySafeHtmlPolicy 'allow-duplicates';

内容的提问来源于stack exchange，提问作者VimalSingh