未捕获的 DOMException：无法从“CSSStyleSheet”读取“规则”属性

Question

在 Code.org 的 App Lab 编辑器中，我们最近开始在 Chrome 64 中看到这个错误：

 Uncaught DOMException: Failed to read the 'rules' property from 'CSSStyleSheet'

在这个旨在检测浏览器是否正在使用 CSS 媒体查询的函数中抛出错误，在包含 styleSheets[i].cssRules 的行中。

 /**
 * IE9 throws an exception when trying to access the media field of a stylesheet
 */
export function browserSupportsCssMedia() {
  var styleSheets = document.styleSheets;
  for (var i = 0; i < styleSheets.length; i++) {
    var rules = styleSheets[i].cssRules || styleSheets[i].rules;
    try {
      if (rules.length > 0) {
        // see if we can access media
        rules[0].media;
      }
    } catch (e) {
      return false;
    }
  }
  return true;
}

该问题已在 Windows、OSX、Ubuntu 和 ChromeOS 上出现；在 Chrome 版本 64.0.3282.167 和 64.0.3282.186 上。然而，我们也发现这个问题 并没有 发生在完全相同的 Chrome 版本和平台上——而且我们似乎无法在隐身窗口中重现这个问题。

这个错误的根本原因是什么？

原文由 Brad Buchanan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是一个很好的故事，也是网络开发人员的一个新“问题”，所以我不得不分享：

Chrome 64.0.3282.0（2018 年 1 月发布， 完整更改列表）引入了对样式表安全规则的更改。我很生气，因为我在任何比完整提交列表更详细的变更日志中找不到此更改。

Chromium 中的提交 a4ebe08 描述如下：

更新 CSSStyleSheet 的行为以匹配安全来源的规范

规范在这里： https ://www.w3.org/TR/cssom-1/#the-cssstylesheet-interface

更新：如果样式表不可访问，以下方法现在会抛出 SecurityError：

• cssRules() / 规则()
• 插入规则()
• 删除规则()

此提交修复了错误 安全性：关于 CSS 和链接元素的 CORS 实现不一致。 链接的 W3C 规范详细描述了 CSS 对象模型的使用需要同源访问的地方。

综上所述，为什么这个问题会出现在 App Lab 中？我们不应该遇到任何 CORS 问题，因为我们只从我们自己的来源加载样式表：

最后的线索是我们无法在私人选项卡中重现此问题。我们开始查看 Chrome 扩展并意识到一些受影响的用户启用了 Loom Video Recorder 扩展，它似乎将自己的 CSS 注入到页面中。由于我们的（原始）函数正在遍历 所有 已加载的样式表，因此它试图访问由扩展注入的样式表，从而导致 CORS 错误。

也就是说，围绕 Chrome 中的这一变化仍然存在一些悬而未决的问题和争论：

• 这个对原始安全漏洞的评论 抱怨说，现在检测样式表无法从 JavaScript 访问的唯一方法是使用 try/catch 。
• 1 月 23 日出现的 Chromium 错误（ document.styleSheets.cssRules 为空，即使使用 Access-Control-Allow-Origin: * ）表明新安全规则可能存在实施问题，会破坏某些解决方法。
• 正在实施的规范看起来相当稳定，但它仍然处于“工作草案”状态，因此谁知道它会在哪里落地以及其他浏览器将实施什么。

为了解决我们的问题，我们只是撕掉了整个功能。 我们不再支持 IE9，而且我们知道我们支持的所有浏览器都能正确处理媒体查询。

相关（但不完全重复）的问题：

• 无法访问外部 CSSStyleSheet 中的规则
• 无法从 Chrome 中的本地 css 文件访问 cssRules

原文由 Brad Buchanan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果其他人遇到与跨源资源共享 (CORS) 政策相关的问题，请在此处讨论： https ://github.com/Modernizr/Modernizr/issues/2296

您必须使用本地主机进行测试： https ://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server

这是解决方法“try/catch”方法：

 try {
  var classes = stylesheets[s].rules || stylesheets[s].cssRules;
} catch (e) {
  console.warn("Can't read the css rules of: " + stylesheets[s].href, e);
  continue
}

有这个问题并且正在绞尽脑汁，这似乎有效……祝你好运！

原文由 Omnichief 发布，翻译遵循 CC BY-SA 4.0 许可协议