小编典典
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