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

IT技术 javascript html css google-chrome cors
2021-03-04 18:30:35

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

<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>

样式文件 body{background-color:green;}

该脚本与 <style></style>

解决方案:

  1. 当文件在线/本地主机时工作。
  2. 适用于其他浏览器。(即 Internet Explorer、Microsoft Edge、Firefox)
  3. chrome --allow-file-access-from-files
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() / 规则()
  • 插入规则()
  • 删除规则()

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

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

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

  • 这个关于原始安全漏洞的评论抱怨现在检测样式表无法从 JavaScript 访问的唯一方法是使用try/catch.
  • 1 月 23 日打开的 Chromium 错误(document.styleSheets.cssRules 为 null 即使使用 Access-Control-Allow-Origin: *)表明新安全规则可能存在实施问题,从而破坏了某些解决方法。
  • 正在实施的规范似乎非常稳定,但它仍然处于“工作草案”状态,因此谁知道它将在哪里着陆以及其他浏览器将实施什么。
2021-04-21 18:30:35
这一切都很好,但是为什么从本地加载的文档(例如 SVG 图形)访问 CSS 文件,全部通过 FILE:// 协议,会触发 CORS 违规?我正在通过 Windows 文件资源管理器(例如用 Chrome 打开)查看本地文件系统 (graphic.svg) 中的 SVG 图形。SVG 图形引用与“graphic.svg”文件位于同一目录中的文件“my.css”。SVG 图形中的 ECMAscript 尝试通过以下方式访问 cssRules:document.styleSheets[0].cssRules 并获取 DOMException。似乎从同一个来源加载所有内容:FILE://,那么为什么会出现错误?
2021-04-26 18:30:35
浏览器可以选择如何处理这种情况。W3C规范CORS会从RFC6454“网络起源观”的“原产地”,其中它的定义说,一个文件的来源:// URI是实现相关的
2021-05-03 18:30:35