SSL 和 CSS 背景图像导致的混合内容

Question

我有一个包含报名表的网页。 HTTPS 通过 Apache 重定向启用，用于匹配该页面的所有请求。不幸的是，由于 CSS 使用“background-image: url(/images/...)”引入外部图像，浏览器将生成一条警告消息，表明该页面包含混合内容。

解决这个问题的最佳方法是什么？

Answer 1

2014年12月17日更新：

现在 SSL 鼓励所有人使用并且没有性能
关注，这种技术现在是一种反模式。如果您的资产>需要在 SSL 上可用，则始终使用 https:// 资产。

允许代码片段通过 HTTP 请求为攻击打开了大门
就像 最近的 Github Man-on-the-side 攻击。 始终安全
即使您的网站使用 HTTP，也请求 HTTPS 资源，但反之亦然
不正确。

更多指导和详细信息请参见 Eric Mills ' CDN 和指南HTTPS。

资料来源：Paul Irish – 协议相对 URL

---

这是一个非常流行的解决方案：

有一个小技巧可以让你摆脱困境：

在 HTML 中

<img src="//domain.com/img/logo.png">

在 CSS 中

div{background: url(//path/to/image.png);}

Answer 2

您还应该为静态资源启用 HTTPS，然后确保 显式引用 CSS 资源的 HTTPS url（其相对 url 将相对于 HTTPS 基础进行解释） CSS 文件的内容）。

Answer 3

您应该为您的图像使用完整的 URL：

https://your.domain.com/img/image.png`

或者

https://your.domain.com/route/to/img/image.png

这解决了我前段时间的问题。