由于背景图像而避免 IE 中的“混合内容”警告的具体规则是啥？

Posted 2023-02-25

【中文标题】由于背景图像而避免 IE 中的“混合内容”警告的具体规则是啥？

【英文标题】：What exactly are the rules for avoiding the "mixed content" warning in IE due to background images?由于背景图像而避免 IE 中的“混合内容”警告的具体规则是什么？

【发布时间】：2011-10-21 03:56:24

【问题描述】：

这与SSL and mixed content due to CSS background images 有关，但该问题没有公认的答案，而我要问的问题更具体一些。

在某些情况下访问 HTTPS 网站时，如果元素被赋予带有背景图像的样式，IE 会抛出“混合内容”警告。我发现one forum reference 说如果您将引用放在样式表中，则可以避免警告，例如

#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 来引用图像，而不是相对的。

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

【问题讨论】：

您也可以使用相对协议：paulirish.com/2010/the-protocol-relative-url

有趣。我会调查的。但我确实需要相对 URL，因为这是一个静态 CSS 文件，并且不“知道”我其余静态内容的绝对 URL 基础。

仅供参考，如果您通过 javascript 设置背景图像，则协议相对 URL 不会解决这个特定的 IE8 错误。您必须使用完整的 URL（包括方案和主机）以避免在进行 JS 样式操作时出现 IE8 混合内容警告。 （element.style.backgroundImage = "//example.com/foo.png" 会发出警告。）

【参考方案1】：

使用完全限定的 URI 将避免 IE8 及更低版本错误地创建触发混合内容警告的类似 about:/relative/file.png 的虚假 URI 的问题。此问题已在 IE9 中修复。

【讨论】：

谢谢，这是我正在寻找的答案。但是about:relative 到底是什么？我以前没听说过。顺便说一句，Fiddler 做得很好——它是我 IE 7 和 8 测试中的救星。

我认为“相对”只是 Eric 的一些任意相对路径的伪代码。所以，你输入“/path/to/file.ext”，我猜IE把它变成了“about:/path/to/file.ext”，这显然是愚蠢的。

@Tom 是正确的。问题是相对 URI 与临时 about:blank 标记相结合。所以，about:blank + /path/to/file.ext 产生 about:/path/to/file.ext，它被错误地视为不安全。

我目前遇到了同样的问题。但它非常随机地发生。我无法诊断问题。我检查了提琴手，没有任何这样的电话about:blank 或about:relative。有什么线索吗？

@ZainShaikh，你将无法用 fiddler 捕捉到这些——about: 是一个在浏览器中完全解析的内部页面。我自己刚刚经历过这个，尝试将您的 CSS 用于任何相对 url，并将您的 JavaScript 用于任何不使用完全限定 url 的样式操作。 （例如，$('.foo').css('background-image', '//example.com/foo.png') 之类的内容会导致此问题。）

【参考方案2】：

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

如果我的诊断是正确的，这意味着关于混合内容的规则没有尚未记录的怪癖。

另外：协议相关的 URL 很棒。只是一般。

【讨论】：

那么，规则是我不能动态添加对内联内容的新引用，即使这些链接在 HTTPS 下？如果这是规则，我也许可以接受它，但我想要一些确认。另外，如果这是规则，为什么它不会影响我添加到 html 中的普通 <img> 标签？

我不会说你不应该这样做。我只是认为这解释了您所看到的不同行为。看了你对 65Fbef05 的评论，我有点困惑。

【参考方案3】：

经过无数小时的相同问题，我无法弄清楚问题所在。然后我开始挑选我的源代码并找到了它。我正在使用 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]-->

它可能会在路上拯救某人。如果没有，那祝你好运！