css - 如何使用 SSL 从另一个域强制加载背景图像？

Question

我有一家在线商店，出于性能原因，图片位于另一个域中。在网站的安全部分，我们强制使用 SSL 连接，但不显示背景图片。当我尝试在浏览器中打开图像本身时，它要求我先接受安全证书。之后图像就在那里。

我的 CSS 很简单:

.some_class {
    background: url('//another_domain.com/image.png') no-repeat;
}

有什么方法可以让浏览器在 SSL 处于事件状态时显示来自另一个域的背景图像？

如果我对 url 使用严格的协议(protocol):

.some_class {
    background: url('https://another_domain.com/image.png') no-repeat;
}

图片在非安全页面上不可见。

如果我使用 http:// 页面就不再安全了。

Answer 1

如果您的域是 https://www.your_domain.com，但在 css 中使用硬编码协议(protocol)

.some_class {
    background: url('http://another_domain.com/image.png') no-repeat;
}

此问题与“混合内容”有关 - 嵌入了 HTTP 资源(图像、脚本等)的 HTTPS 页面。

使用 HTTPS 的目的是确保只有原始服务器和客户端可以访问安全页面。但是，从理论上讲，如果嵌入了 HTTP 资源，这种安全性可能会受到损害 - 服务器可能会拦截不安全的 javascript 文件并注入(inject)一些代码来更改安全页面加载。

大多数浏览器会通过更改“安全锁”图标来指示安全页面包含混合内容，方法是将锁显示为打开或损坏，或者将图标设为红色(Chrome 会短时间显示骷髅头和交叉骨，但他们意识到这对于潜在威胁级别来说有点严重)。

如果 another_domain.com 是您的域，则将 SSL 添加到该域，这可能会解决您的问题。