如何阻止/允许访问document.styleSheets信息,以及这是什么原因

Question

我最近发现了document.styleSheets API,它允许获取网站使用的样式表.

使用很简单,document.styleSheets[0].cssRules例如,它将为我提供页面上第一个样式表的所有css规则.所以当我在google.com的控制台中写这个时,它会返回一个正确的列表,但是当我在stackoverflow页面的控制台中写入时,它会返回null.

我假设一些网站可以阻止这些信息.我的问题是:

• 如何阻止/允许此作为网站所有者.
• 阻止它的原因是什么？(任何想要获得它的人都可以通过复制样式表并解析它来获得它)

PS这个问题看起来很相似,但事实并非如此.我不是在寻找如何克服这个问题,我正在寻找原因,我怎么能阻止这个作为拥有者.我也怀疑这是跨源问题.

PPS这是一个证据,我得到null了一些人没有得到的奇怪.

Answer 1

我也怀疑这是跨源问题.

这是一个跨学科的问题.防止访问的原因是控制台的来源是从页面的URL(http://stackoverflow.com/questions/25128165/how-can-i-block-allow-access-to-document-stylesheets-information-and-what-is-th例如)派生的,但Stack Overflow上的第一个样式表的URL(截至本文撰写)是http://cdn.sstatic.net/stackoverflow/all.css?v=d75250aa015c - 不同的来源.因此程序化访问被拒绝.

如果您在Firefox + FireBug中尝试过,那么您会收到一条(略微)更清晰的消息:Error: The operation is insecure.

在您自己的网站上,您可能从同一个来源提供CSS,因此SOP不起作用.如果您想要与Stack Overflow相同的结果,请从不同的来源提供CSS(它甚至可以是同一服务器的别名,只要它看起来与浏览器不同).请注意,这样做可以防止你的 JavaScript代码访问它.:-)