Chrome 64出现Uncaught DOMException: insertRule执行失败问题求助

这个错误我之前帮朋友排查过好几次，Chrome 64开始收紧了对样式表操作的安全限制，第三方插件尝试修改页面现有样式表时特别容易踩这个坑。下面给你拆解原因和可行的解决办法：

错误原因分析 #

• 跨域样式表权限限制：如果第三方插件要操作的样式表是从其他域名加载的（比如第三方CDN），且服务器没有返回正确的CORS响应头，Chrome会禁止JS对这类样式表执行insertRule这类修改操作——这是同源策略的强化规则。
• 内容安全策略（CSP）拦截：如果你的页面设置了严格的CSP规则，比如style-src指令没有包含插件的来源，或者不允许内联样式操作，浏览器会直接阻止插件修改样式表的行为。
• 插件操作了页面原生样式表：不少旧插件习惯直接获取页面head里的现有样式表进行修改，但Chrome 64后对这类操作的权限控制变得更严格了。

具体解决办法 #

• 检查样式表的CORS配置：打开Chrome开发者工具的Network面板，找到报错指向的样式表请求，查看Response Headers里是否有Access-Control-Allow-Origin，且值包含你的网站域名。如果没有，要么联系样式表服务商开启CORS，要么把样式表下载到自己的服务器（同域部署）。
• 调整页面CSP规则：如果你的网站设置了CSP，在style-src中添加插件的域名，示例如下：

  Content-Security-Policy: style-src 'self' https://third-party-plugin-domain.com;
  

  要是插件需要内联修改样式，可能需要临时添加unsafe-inline（但尽量避免，优先让插件用合规方式）。
• 让插件使用独立样式表：最稳妥的方式是让插件开发者修改代码，不要直接操作页面已有的样式表，而是动态创建专属的<style>标签后再执行insertRule，示例代码：

  // 插件应该采用的正确写法
  const customStyle = document.createElement('style');
  document.head.appendChild(customStyle);
  // 操作这个自建样式表就不会触发权限报错了
  customStyle.sheet.insertRule('.target-element { display: block; }', 0);
  

• 替换或更新插件：如果这个插件已经很久没维护，不兼容Chrome的新安全规则，要么找功能类似的替代插件，要么联系开发者推送修复版本。

快速排查小技巧 #

打开Chrome Console的「Security」面板，看看有没有CSP相关的警告信息，这往往能帮你快速定位是CSP还是跨域的问题。

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