SSL and mixed content due to CSS background images

Question

I have a web page containing am entry form. HTTPS is enabled via an Apache redirect for all requests matching that page. Unfortunately, because the CSS pulls in external images using 'background-image: url(/images/...)', the browser will generate a warning message that the page contains mixed content.

What's the best way to resolve this issue?

Answer 1

Update 2014.12.17:

Now that SSL is encouraged for everyone and doesn’t have performance concerns, this technique is now an anti-pattern. If the asset you > need is available on SSL, then always use the https:// asset.

Allowing the snippet to request over HTTP opens the door for attacks like the recent Github Man-on-the-side attack. It’s always safe to request HTTPS assets even if your site is on HTTP, however the reverse is not true.

More guidance and details in Eric Mills’ guide to CDNs & HTTPS.

Source: Paul Irish – The Protocol-relative URL

---

Here is a very popular solution:

There's this little trick you can get away with that'll save you some headaches:

In HTML

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

In CSS

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

Answer 2

You should use full URL for your image:

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

or

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

This solved my problem some time ago.

Answer 3

You should also enable HTTPS for your static resources, and then make sure that the <link> refers explicitly to the HTTPS url for the CSS resource (whose relative urls will then be interpreted relative to the HTTPS base of the CSS file).