Gmail.js中compose.body()方法调用错误的解决方案

问题背景

在使用Gmail.js库进行Gmail界面扩展开发时，开发者可能会遇到调用compose.body()方法时抛出"Uncaught TypeError: Illegal invocation"错误的情况。这个错误通常发生在尝试通过JavaScript动态修改Gmail撰写邮件正文内容时。

错误分析

错误堆栈显示问题出在jQuery的html()方法调用上，具体表现为非法调用异常。这通常是由于现代浏览器引入的安全策略——Trusted Types API导致的。Trusted Types是一种安全机制，旨在防止DOM型XSS攻击，它限制了直接向DOM插入HTML字符串的操作。

解决方案

方案一：创建默认的Trusted Types策略

最直接的解决方案是创建一个默认的Trusted Types策略，允许所有HTML字符串通过：

if (window.trustedTypes && window.trustedTypes.createPolicy) {
  window.trustedTypes.createPolicy("default", {
    createHTML: (string) => string,
    createScriptURL: (string) => string,
    createScript: (string) => string,
  });
}

这段代码会检查浏览器是否支持Trusted Types API，如果支持则创建一个默认策略，该策略对所有HTML、脚本URL和脚本内容都直接放行。

方案二：针对特定场景的解决方案

对于只是修改邮件正文的场景，可以更精确地处理：

const replyContent = "my reply";
const editor = document.querySelector('[role="textbox"]');
if (editor) {
  editor.innerHTML = replyContent;
}

这种方法绕过了jQuery的html()方法，直接操作DOM元素，避免了Trusted Types的限制。

影响范围

这个问题不仅影响compose.body()方法，还会影响Gmail.js中其他需要修改DOM的方法，比如add_toolbar_button()等。因此，上述解决方案对这些场景同样有效。

安全考虑

虽然创建默认的Trusted Types策略可以快速解决问题，但从安全角度考虑，在生产环境中应该创建更严格的策略，只允许必要的HTML内容通过。例如：

if (window.trustedTypes && window.trustedTypes.createPolicy) {
  window.trustedTypes.createPolicy("gmail-extension", {
    createHTML: (string) => {
      // 在这里添加对string的安全检查
      return string;
    },
    createScriptURL: () => { throw new Error("Script URL not allowed"); },
    createScript: () => { throw new Error("Script not allowed"); }
  });
}

兼容性考虑

Trusted Types API目前主要在现代浏览器中实现，特别是Chrome和基于Chromium的浏览器。对于不支持此API的浏览器，上述代码会自动跳过，不会产生任何影响。

结论

Gmail.js中的DOM操作问题主要是由浏览器安全策略更新引起的。通过理解Trusted Types机制并适当配置，开发者可以既保证扩展功能正常运行，又兼顾应用安全性。在实际项目中，建议根据具体需求选择最适合的解决方案，并在安全性和功能性之间取得平衡。