尝试将规则添加到CSS样式表会在Firefox中显示“操作不安全”

[英]Attempt to add a rule to a CSS stylesheet gives “The operation is insecure” in Firefox

本文翻译自 MetaDebugger 查看原文 2013/03/05 4495 stylesheet/ css/ firefox/ greasemonkey/ javascript

I'm using Greasemonkey and trying to add a rule in a specific domain. But it results in an error saying The operation is insecure.
The code works fine on Chrome.

我正在使用Greasemonkey并尝试在特定域中添加规则。但它导致错误说操作不安全。该代码在Chrome上正常运行。

The script runs on http://mydomain.com/test/test.php
And the CSS file is http://cdn.mydomain.com/test/css/global.css

该脚本在http://mydomain.com/test/test.php上运行,CSS文件为http://cdn.mydomain.com/test/css/global.css

My function:

function css(selector, property, value) {
    for (var i=0; i<document.styleSheets.length;i++) 
    {
        try 
        { 
            document.styleSheets[i].insertRule(selector+ ' {'+property+':'+value+'}', document.styleSheets[i].cssRules.length);
        } 
        catch(err) 
        { 
            try // IE
            { 
                document.styleSheets[i].addRule(selector, property+':'+value);
            } 
            catch(err) {}
        }
    }
}

On Google I found that it could be because I'm trying to access cross-domains, so I've tried adding the URL to the CSS file to the 'accepted URLs' but no result.

在谷歌上我发现可能是因为我试图访问跨域,所以我尝试将CSS文件的URL添加到“接受的URL”但没有结果。

How do I fix this?

我该如何解决?

3 个解决方案

#1

Yes, Firefox blocks access to stylesheets that are cross-domain. It can (or at least used to) throw the exception:

是的,Firefox阻止访问跨域样式表。它可以(或至少用于)抛出异常:

"Access to restricted URI denied" code: "1012"
nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)"
location: ... ...

“访问受限制的URI被拒绝”代码:“1012”nsresult:“0x805303f4(NS_ERROR_DOM_BAD_URI)”位置:......

But, with CSS, you don't need to add rules to a specific style sheet. Just overwrite the style you care about.

但是,使用CSS,您无需向特定样式表添加规则。只是覆盖你关心的风格。

For example, if the page sets:

例如,如果页面设置:

body {
    background: white;
}

And your script sets:

你的脚本设置:

body {
    background: red;
}

Then the page will be red (nominally).

然后页面将为红色(名义上)。

For the easiest, smartest way to change target page styles, see previous answers like this one.

有关更改目标页面样式的最简单,最智能的方法,请参阅此前的答案。

#2

I found this solution works around the issue:

我发现这个解决方案解决了这个问题:

var style = document.createElement("style");
document.head.appendChild(style);
style.sheet.insertRule("body { font-size:40px; }", 0);

#3

Rules from a stylesheet run with the permissions of that stylesheet in various ways. Which means that if you can inject rules into a cross-site stylesheet you can carry out some cross-site attacks. That's why Firefox blocks adding a rule to a cross-site stylesheet.

样式表中的规则以各种方式使用该样式表的权限运行。这意味着如果您可以将规则注入跨站点样式表,则可以执行一些跨站点攻击。这就是Firefox阻止向跨站点样式表添加规则的原因。

It's possible that Chrome runs all rules with the permissions of the linking document instead, which is why it allows you to add things to the sheet.... However note that Chrome won't let you read a cross-site stylesheet.

相反,Chrome可能会使用链接文档的权限运行所有规则,这就是为什么它允许您向工作表添加内容....但请注意,Chrome不会让您阅读跨站点样式表。

Note that if you load your stylesheet with CORS (by setting the "crossorigin" attribute on the <link> and making sure your CDN is serving the right headers) then you will be able to get cross-site access to it.

请注意,如果您使用CORS加载样式表(通过在上设置“crossorigin”属性并确保您的CDN正在提供正确的标题),那么您将能够获得跨站点访问权限。

智能推荐

注意！

本站翻译的文章，版权归属于本站，未经许可禁止转摘，转摘请注明本文地址：http://www.silva-art.net/blog/2013/03/05/b34aab21edd66b927760da3797f535c.html。

猜您在找

可以将XSLT样式表添加到序列化的XML文档中吗? - Possible to add a XSLT Stylesheet to a serialized XML document? 混合内容页面：请求不安全的样式表错误 - Mixed Content Page: requested an insecure stylesheet error 如何将CSS样式表添加到WCF生成的RSS源？ - How do I add a CSS stylesheet to a WCF generated RSS feed? 样式表何时添加到document. stylesheet(样式表) - When is a stylesheet added to document.styleSheets 使用正文中的javascript将样式表添加到Head - Add stylesheet to Head using javascript in body

赞助商链接