javascript - Chrome 64 未捕获的 DOMException : Failed to execute 'insertRule' on 'CSSStyleSheet' : Cannot access StyleSheet to insertRule

Question

啊!我的网站在 Chrome 中损坏了。

在控制台中获取此消息:Uncaught DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Cannot access StyleSheet to insertRule

指向这行代码，来自第三方插件:

document.styleSheets[0].insertRule(rule,0);

head 中定义的样式表:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,700">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="/Public/js/jquery-ui/jquery-ui.css" />
<link type="text/css" rel="stylesheet" href="/Public/js/jquery-ui/jquery-ui.theme.min.css" />
<link type="text/css" rel="stylesheet" href="/Public/css/msgPop.css" />
<link type="text/css" rel="stylesheet" href="/Public/js/select2/select2.css">

Answer 1

我们认为对 Chromium 的这种 promise 是我们问题的根本原因:

Update behavior of CSSStyleSheet to match spec for Security origin

我们的快速解决方案是简单地重新排序 CSS。似乎之前罪魁祸首的插件正在向这个远程 CSS 插入 CSS 规则:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,700">

简单地重新排序我们的样式表以确保来 self 们网站的脚本位于第一位 (document.styleSheets[0])，解决了这个问题:

<link type="text/css" rel="stylesheet" href="/Public/js/jquery-ui/jquery-ui.css" />
<link type="text/css" rel="stylesheet" href="/Public/js/jquery-ui/jquery-ui.theme.min.css" />
<link type="text/css" rel="stylesheet" href="/Public/css/msgPop.css" />
<link type="text/css" rel="stylesheet" href="/Public/js/select2/select2.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,700">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">