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

Question

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

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

Answer 1

  

更新2014.12.17：

     

现在SSL是encouraged for everyone和doesn’t have performance concerns，此技术现在是反模式。如果资产你＆gt;需要在SSL上可用，然后始终使用https://资产。

     

允许通过HTTP请求代码段打开了攻击的大门   比如recent Github Man-on-the-side attack。 始终安全   即使您的站点在HTTP上，也请求HTTPS资产，但反之亦然   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);}

Answer 2

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

Answer 3

您应该使用图片的完整网址：

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

或

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

这解决了我的问题。