由於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);}