【问题标题】：SSL and mixed content due to CSS background images由于 CSS 背景图像，SSL 和混合内容
【发布时间】：2010-12-05 15:13:38
【问题描述】：

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

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

【问题讨论】：

标签： css url ssl image https

【解决方案1】：

2014.12.17 更新：

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

允许 sn-p 通过 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);}

【讨论】：

@Kifin，这是否回答了您的问题，如果没有，请告诉我，谢谢

【解决方案2】：

您还应该为静态资源启用 HTTPS，然后确保 <link> 明确引用 CSS 资源的 HTTPS url（其相对 url 将被解释为相对于 CSS 文件的 HTTPS 基础） .

【讨论】：

【解决方案3】：

你应该为你的图片使用完整的 URL：

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

或

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

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

【讨论】：