Firefox中函数调用获取cssRules触发SecurityError，控制台调用正常

我之前也踩过这个坑，Firefox在样式表的同源策略管控上确实比Chrome严格很多，而且浏览器控制台的执行环境和普通脚本权限不一样——控制台有浏览器赋予的特殊权限，所以直接执行能拿到结果，但普通函数调用就会触发安全限制。

下面说说可能的原因和对应的解决办法：

1. 先排查CORS配置是否完整 #

你已经给<link>标签加了crossorigin属性，但这只是客户端的配置，服务器端必须配合返回对应的CORS响应头才能生效：

• 如果样式表是跨域加载的，服务器需要返回Access-Control-Allow-Origin头（比如设置为*或者你的具体域名），否则Firefox还是会阻止访问cssRules。
• 如果样式表是同源的（比如你的../styles/style.css和页面同域名/同协议），那大概率是你用了file://协议打开页面——Firefox对file://协议下的同源策略限制非常严格，哪怕是本地文件也会触发跨域错误。这种情况建议你用本地HTTP服务器（比如live-server、http-server这类工具）来打开页面，别直接双击HTML文件。

2. 换个思路：避免直接访问cssRules #

如果你只是需要获取元素的样式，不一定非要读取cssRules，可以用getComputedStyle来获取元素的计算样式，示例代码：

const getElementStyle = (el, prop) => {
  return window.getComputedStyle(el).getPropertyValue(prop);
};
// 比如获取body的背景色
console.log(getElementStyle(document.body, 'background-color'));

3. 特殊情况：样式表未加载完成 #

如果你的样式表是动态插入或者异步加载的，函数调用时可能样式表还没加载完成，也会触发错误。这种情况可以监听load事件，等样式表加载完成后再访问：

const styleLink = document.querySelector('link[rel="stylesheet"]');
styleLink.addEventListener('load', () => {
  try {
    const rules = document.styleSheets[0].cssRules;
    console.log(rules);
  } catch (e) {
    console.error('访问cssRules失败:', e);
  }
});

内容的提问来源于stack exchange，提问作者kyb