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

Question

我有一个包含输入表单的网页。对于与该页面匹配的所有请求，通过Apache重定向启用HTTPS。不幸的是，因为CSS使用'background-image：url（/ images/...）'拉入外部图像，浏览器将生成一条警告消息，指出该页面包含混合内容。

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

Answer 1

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

Answer 2

您应该使用完整的URL为你的形象：

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

或

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

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

Answer 3

更新2014年12月17日：

现在，SSL是encouraged for everyone和doesn’t have performance concerns，现在这个技术是一个反模式。如果您需要的资产在SSL上可用，则始终使用https://资产。

允许片段通过HTTP请求打开攻击的大门 像recent Github Man-on-the-side attack。这是总是安全到 请求HTTPS资产，即使您的网站是在HTTP上，但是反向 is not true。

更多的指导和详细信息在Eric Mills’ guide to CDNs & HTTPS。

来源：Paul Irish – The Protocol-relative URL

---

这里是一个非常受欢迎的解决方案：

有这个小动作，你可以摆脱那会节省你有些头疼：

在HTML

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

在CSS

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