Chrome 64 Uncaught DOMException:无法在'CSSStyleSheet'上执行'insertRule':无法访问StyleSheet以插入规则

Question

啊!我的网站在Chrome中被破坏了.

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

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

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

样式表在头部定义:

<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成为我们问题的根本原因:

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

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

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

只需重新排序我们的样式表,以确保我们网站的脚本位于第一个位置(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">