如何修复VueJS开发Gmail Chrome扩展的TrustedHTML赋值错误

我维护一个使用VueJS开发的Gmail Chrome扩展，近期Gmail启用Trusted Types后，扩展停止工作，加载时抛出以下错误：

This document requires 'TrustedHTML' assignment.

Uncaught (in promise) TypeError: Failed to set the 'innerHTML' property on 'Element': This document requires 'TrustedHTML' assignment.

我尝试通过创建默认Trusted Types策略结合DOMPurify修复，代码如下：

import { createApp } from "vue";
import { DOMPurify } from "dompurify";
import App from "./App.vue";


if (window.trustedTypes && trustedTypes.createPolicy) {
  window.trustedTypes.createPolicy('default', {
    createHTML: (string, sink) => DOMPurify.sanitize(string, {RETURN_TRUSTED_TYPE: true})
  });
} else {
  console.error('Trusted Types not supported in this browser.');
}

export async function injectApp() {
  const vueApp = createApp(App);
  
  const extensionContainerNode = document.createElement('div');
  extensionContainerNode.classList.add('gmail-extension-container');

  const parentNode = document.querySelector('div.AO');
  parentNode.appendChild(extensionContainerNode);
  
  // Error thrown here due to Vue internal use of elt.innerHTML = ...
  vueApp.mount('.gmail-extension-container');
}

injectApp()

但错误仍存在，我原本以为default策略会作为所有elt.innerHTML赋值的兜底方案，在vueApp.mount执行时生效。请问如何让我的Vue应用在Trusted Types限制下重新加载？

• 提前创建Trusted Types策略：Vue内部初始化阶段就会用到innerHTML，如果策略创建时机晚于Vue加载，就无法覆盖Vue的DOM操作。把策略创建代码抽成独立文件，在导入Vue前加载：

  // trusted-types-init.js
  import { DOMPurify } from "dompurify";
  
  if (window.trustedTypes && trustedTypes.createPolicy) {
    window.trustedTypes.createPolicy('default', {
      createHTML: (string, sink) => DOMPurify.sanitize(string, {RETURN_TRUSTED_TYPE: true})
    });
  } else {
    console.error('Trusted Types not supported in this browser.');
  }
  

  主文件中先导入初始化文件：

  import './trusted-types-init.js';
  import { createApp } from "vue";
  import App from "./App.vue";
  
  // 后续代码不变
  

• 直接挂载到DOM节点而非选择器：当前用选择器挂载会触发Vue额外的DOM查询逻辑，改为直接传入已创建的节点，减少不必要的DOM交互：

  // 替换原mount调用
  vueApp.mount(extensionContainerNode);
  

• 验证DOMPurify返回值类型：确认RETURN_TRUSTED_TYPE配置生效，可在策略中添加日志排查：

  createHTML: (string, sink) => {
    const trustedHTML = DOMPurify.sanitize(string, {RETURN_TRUSTED_TYPE: true});
    console.log('生成TrustedHTML:', sink, trustedHTML instanceof window.TrustedHTML);
    return trustedHTML;
  }
  

• 配置Chrome扩展权限：在manifest.json中添加Trusted Types相关CSP规则，确保扩展有权限使用该API：

  {
    "permissions": ["activeTab"],
    "content_security_policy": {
      "extension_pages": "trusted-types default; script-src 'self'; object-src 'none';"
    }
  }
  

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