Javascript 无法从 Chrome 64 中的本地 css 文件访问 cssRules
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48753691/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cannot access cssRules from local css file in Chrome 64
提问by Puddle
here's a simple example of the problem:
这是问题的一个简单示例：
<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;}
我的样式文件 body{background-color:green;}
script works fine if you were to use <style></style>
如果您要使用，脚本可以正常工作 <style></style>
SOLUTIONS:
1. works when files are online/localhost
2. works with other browsers (i.e. Internet Explorer, Microsoft Edge, Firefox)
3. chrome --allow-file-access-from-files
解决方案：
1. 文件在线/本地主机时工作
2. 与其他浏览器（即 Internet Explorer、Microsoft Edge、Firefox）一起工作
3. chrome --allow-file-access-from-files
回答by Brad Buchanan
TL;DR: As of Chrome 64 you'll need to use a local development server to test functionality that depends on the CSS Object Model.
TL;DR：从 Chrome 64 开始，您需要使用本地开发服务器来测试依赖于 CSS 对象模型的功能。
Accessing CSS rules in a stylesheet loaded from the local filesystem violates a Cross-Origin Resource Sharing (CORS)policy - but Chrome didn't enforce this until recently, and other browsers don't seem to enforce it yet.
访问从本地文件系统加载的样式表中的 CSS 规则违反了跨源资源共享 (CORS)策略 - 但 Chrome 直到最近才强制执行此操作，而其他浏览器似乎尚未强制执行它。
Chrome 64.0.3282.0 (released January 2018, full change list) includes a change to security rules for stylesheets. I couldn't find this change in any changelog less detailed than the full commit list.
Chrome 64.0.3282.0（2018 年 1 月发布，完整更改列表）包括对样式表安全规则的更改。我在任何比完整提交列表更详细的变更日志中都找不到此更改。
Commit a4ebe08in Chromium is described:
在 Chromium 中提交a4ebe08描述如下：
Update behavior of CSSStyleSheet to match spec for Security origin
Spec is here: https://www.w3.org/TR/cssom-1/#the-cssstylesheet-interface
Updated: the following methods now throw a SecurityError if the style sheet is not accessible:
- cssRules() / rules()
- insertRule()
- deleteRule()
更新 CSSStyleSheet 的行为以匹配安全源的规范
规范在这里：https: //www.w3.org/TR/cssom-1/#the-cssstylesheet-interface
更新：如果样式表不可访问，以下方法现在会抛出 SecurityError：
- cssRules() / 规则()
- 插入规则()
- 删除规则()
This commit is a fix for the bug Security: Inconsistent CORS implementation regarding CSS and the link element.The linked W3C spec describes in detail where use of the CSS Object Model requires same-origin access.
此提交是对错误安全性的修复：关于 CSS 和链接元素的 CORS 实现不一致。链接的 W3C 规范详细描述了使用 CSS 对象模型需要同源访问的地方。
This is a real security constraint and the solution you posted (online/localhost) is probably the most typical workaround. For more information check out MDN's How do you set up a local testing server?- it discusses why and how to use a local development server to avoid CORS issues.
这是一个真正的安全约束，您发布的解决方案（在线/本地主机）可能是最典型的解决方法。有关更多信息，请查看 MDN 的如何设置本地测试服务器？- 它讨论了为什么以及如何使用本地开发服务器来避免 CORS 问题。
That said, there's still some open issues and debate around this change.
也就是说，围绕这一变化仍然存在一些悬而未决的问题和争论。
- This commenton the original security bug complains that the only way now to detect that the stylesheet is not accessible from JavaScript is with a
try/catch. - A Chromium bug opened January 23rd (document.styleSheets.cssRules is null even with Access-Control-Allow-Origin: *) suggests there may be an implementation issue with the new security rule that breaks certain workarounds.
- The spec being implemented seems pretty stable, but it still has "Working Draft" status so who knows where it will land and what other browsers will implement.
- 这个关于原始安全漏洞的评论抱怨现在检测样式表无法从 JavaScript 访问的唯一方法是使用
try/catch. - 1 月 23 日打开的 Chromium 错误（document.styleSheets.cssRules 为 null 即使使用 Access-Control-Allow-Origin: *）表明新安全规则可能存在实施问题，从而破坏了某些解决方法。
- 正在实施的规范似乎非常稳定，但它仍然处于“工作草案”状态，所以谁知道它将在哪里落地以及其他浏览器将实施什么。
