CSSの背景画像のためにSSLと混在したコンテンツ

Question

私はamエントリフォームを含むウェブページを持っています。 HTTPSは、そのページに一致するすべての要求に対してApacheリダイレクトを使用して有効になります。残念ながら、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のようになります。 常にに安全 あなたのサイトが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);}