避免“混合内容”的规则到底是什么?由于背景图像而在 IE 中发出警告?
这与 由于 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
使用完全限定的 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.
我认为您得到不同结果的原因不是因为一种方法“更安全”,而是因为当 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.
经过无数个小时的同一个问题之后,我无法找出问题所在。然后我开始挑选我的源代码,然后我找到了它。我正在使用 HTML5,并且在条件注释中使用 shiv 来使 HTML5 元素在 IE8 及以下版本中工作。
我的问题是 IE8 及以下版本抛出错误。通过将上面的内容更改为 https 解决了这个问题,其中包含以下内容:
我还没有测试过它,但我想以下内容也可能有效。
它可能会拯救路上的某个人。如果没有,那么祝你好运!
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.
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:
I haven't tested it, but I imagine the following might work too.
It might save somebody down the road. If not, then good luck!