1. 首页
  2. 问题
  3. 无法从Chrome 64中的本地CSS文件访问cssRules
一尘不染

无法从Chrome 64中的本地CSS文件访问cssRules

css

这是问题的一个简单示例：

<html>
<head>
<link rel='stylesheet' href='myStyle.css'>
<script>
window.onload=function(){
    try{
        alert(document.styleSheets[0]); // works
        alert(document.styleSheets[0].cssRules); // doesn't even print undefined
    }catch(e){alert(e)} // catch and alert the error
}
</script>
</head>
<body>
</body>
</html>

myStyle.css body{background-color:green;}

如果要使用脚本，效果很好 <style></style>

解决方案：
1.在文件在线/本地主机时工作
2.在其他浏览器（例如Internet Explorer，Microsoft Edge，Firefox）下工作
3. chrome –allow-file-access-from-files


阅读 546

收藏
2020-05-16

共1个答案

一尘不染

TL; DR：从Chrome 64开始，您需要使用本地开发服务器来测试依赖于CSS对象模型的功能。

访问从本地文件系统加载的样式表中的CSS规则违反了跨域资源共享（CORS）策略-但是Chrome直到最近才强制实施此规则，而其他浏览器似乎尚未强制实施。

Chrome
64.0.3282.0（于2018年1月发布，[完整的更改列表]）包括样式表安全规则的更改。我找不到比完整提交列表更详细的任何更改日志中的更改。

在Chromium中提交a4ebe08说明：

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

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

已更新：现在，如果无法访问样式表，以下方法将引发SecurityError：

  • cssRules（）/ rules（）
  • insertRule（）
  • deleteRule（）

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

这是一个真正的安全约束，您发布的解决方案（在线/本地主机）可能是最典型的解决方法。有关更多信息，请查看MDN的“
如何设置本地测试服务器”？-讨论了为什么以及如何使用本地开发服务器来避免CORS问题。

也就是说，围绕此更改仍然存在一些未解决的问题和争论。

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

2020-05-16