避免“混合内容”的规则到底是什么?由于背景图像而在 IE 中发出警告?

发布于 2024-11-28 13:17:46 字数 1097 浏览 0 评论 0原文

这与 由于 CSS 背景图像而导致的 SSL 和混合内容< /a> 但这个问题没有公认的答案,而我要问的问题更具体一些。

在某些情况下,当访问 HTTPS 网站时,如果元素被赋予带有背景图像的样式,IE 将抛出“混合内容”警告。我发现一个论坛参考表示,如果您将参考放入样式表中,则可以避免警告,例如,

#someElement a {
    width:11px;
    height:11px;
    display:block;
    overflow:hidden;
    background:url(../images/sprites_list.png) no-repeat;
    cursor:hand;
    cursor:pointer;
    background-position:0px -72px;
}

但如果您尝试内联创建元素,则不能避免

$('#someElement').append("<a title='something' style='background: url(../images/sprites_list.png) no-repeat; ... // etc

,事实上,这有效为我。我见过其他人说您必须使用绝对 https URL 来引用图像,而不是相对 URL。

这里的真实故事是什么?是否有一些“官方”解释或至少参考了规则是什么?或者如果做不到这一点,是否有一套标准的指导方针,如果遵循这些指导方针,就极不可能触发警告?

This is related to SSL and mixed content due to CSS background images but that question had no accepted answer and the one I'm asking is a little more specific.

Under some circumstances when accessing an HTTPS website, IE will throw the "mixed content" warning if an element is given a style with a background image. I found one forum reference that said the warning can be avoided if you put the reference in a stylesheet, for example

#someElement a {
    width:11px;
    height:11px;
    display:block;
    overflow:hidden;
    background:url(../images/sprites_list.png) no-repeat;
    cursor:hand;
    cursor:pointer;
    background-position:0px -72px;
}

but not if you try to create the element inline, a la

$('#someElement').append("<a title='something' style='background: url(../images/sprites_list.png) no-repeat; ... // etc

and indeed, this works for me. I've seen others that say you have to use an absolute https URL to refer to the image, rather than a relative one.

What is the real story here? Is there some "official" explanation or at least a reference to what the rules are? Or failing that, is there a standard set of guidelines which if followed makes it extremely unlikely to trigger the warning?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

香橙ぽ 2024-12-05 13:17:46

使用完全限定的 URI 将避免 IE8 及以下版本错误地创建虚假 URI(例如 about:/relative/file.png )从而触发混合内容警告的问题。这个问题在 IE9 中已得到修复。

Using the fully-qualified URI will avoid the problem of IE8 and below incorrectly creating a bogus URI like about:/relative/file.png that triggers the mixed content warning. This problem was fixed in IE9.

攀登最高峰 2024-12-05 13:17:46

我认为您得到不同结果的原因不是因为一种方法“更安全”,而是因为当 IE 加载它时,有问题的 URL 不存在于基本文档中。我希望如果您将 A 直接放置在文档中而不是在页面加载后编写脚本,您会收到警告。

如果我的诊断是正确的,这将意味着关于混合内容的规则不存在尚未记录的怪癖。

另外:协议相关的 URL 非常棒。就一般而言。

I think the reason you're getting different results is not because the one method is "safer," but because the offending URL isn't present in the base document when IE loads it. I expect you'll get the warning if you were to place that A directly in the document instead of scripting it in after the page has loaded.

If I'm right in my diagnosis, this would mean there's no as-yet-undocumented quirk to the rules about mixed content.

Also: protocol-relative URLs are awesome. Just in general.

靑春怀旧 2024-12-05 13:17:46

经过无数个小时的同一个问题之后,我无法找出问题所在。然后我开始挑选我的源代码,然后我找到了它。我正在使用 HTML5,并且在条件注释中使用 shiv 来使 HTML5 元素在 IE8 及以下版本中工作。

<!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

我的问题是 IE8 及以下版本抛出错误。通过将上面的内容更改为 https 解决了这个问题,其中包含以下内容:

<!--[if lte IE 8]><script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

我还没有测试过它,但我想以下内容也可能有效。

<!--[if lte IE 8]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

它可能会拯救路上的某个人。如果没有,那么祝你好运!

After countless hours of the same problem, I couldn't figure out the problem. I then began picking through my source code and I found it. I'm using HTML5, and I'm using a shiv inside of a conditional comment to make HTML5 elements work in IE8 and down.

<!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

My issue was that IE8 and down was throwing an error. That issue was solved by changing the above into a https, with the following:

<!--[if lte IE 8]><script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

I haven't tested it, but I imagine the following might work too.

<!--[if lte IE 8]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

It might save somebody down the road. If not, then good luck!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文