CODEWITHSUNDEEP
apachesslssl-certificateapache2.4mixed-content
Fury
Fury

Reputation: 4776

insecure image breaking the green SSL bar

I have some image links on my website that causes to show green SSL certificate to gray.

The error is

This content should also be served over HTTPS. 2jquery.min.js:5 Mixed Content: The page at 'https://mywebsite.com/' was loaded over HTTPS, but requested an insecure image 'http://www.otherwebsite.net/wp-content/uploads/2015/10/ALPHA.FOUNDER.png'. This content should also be served over HTTPS.

The are a few problems here:

But at the end of the day my users are allowed to load any images both HTTP and HTTPS

Is there any way to override this gray lock and make it green?

Upvotes: 0

Views: 1186

Answers (2)

647er
647er

Reputation: 73

Create a reverse proxy with AWS Cloudfront

for an image at http://test.com/user/profile/user1.jpg

  1. Create New distribution
  2. Select Web delivery method
  3. Set 'Origin Domain Name' to the base URL of the insecure image
  1. Set 'Origin Path' to /user/profile
  2. Set Viewer Protocol Policy to HTTPS only
  3. You can optionally allow gzip
  4. Set to enabled

You should then be able to access the images like this:

https://{cloudfrontid}.cloudfront.net/user1.jpg

If you want to preserve the url format leave out the Origin Path

Upvotes: 0

Barry Pollard
Barry Pollard

Reputation: 45950

Basically there is no way around this without some serious hacks.

HTTPS says the site is secure and the user is shown a nice green padlock to confirm that.

The visitors know the website they are visiting is the one in the URL, and that the content they are being shown is the content the website owner delivered and has not be altered in any way. They also know what they are browsing is being kept secret. Whether most users actually understand this to this level of depth is besides the point - https means secure.

If part of the page is loaded over http then that is no longer true and hence the green padlock is not shown - and rightly so.

Now there are different types of mixed content:

Images are what is known as passive mixed content. As its delivered over http it is unencrypted and so it can be replaced with another image without your visitor knowing. Additionally the fact the user requested that specific image can be seen by eavesdroppers which means they are no longer browsing in private. This may or may not be that bad depending on what the image is. For example the image could be a schematic to build a top secret project and replacing it with another one could compromise that project. And also would allow others to know you're thinking about building this top secret project.

So passive mixed content is potentially bad but active mixed content is potentially much, much worse. A JavaScript request for example, could be interfered with so it could be used to change the entire page or log passwords or a million other bad things.

However once you start down the path of allowing some mixed content you're just asking for complications and confusing messages to users. So much better to not differentiate between them and just say: no mixed content if you want your green padlock. Browsers are starting to strictly enforce this, when they only used to enforce active mixed content, and that is a good thing in my opinion.

So what can you do about your problem?

Well you can host the image on your site instead of linking to other site. This is a good thing to do anyway as the other site might not appreciate you using their bandwidth to serve the image and also you've no control if they ever change the image. See how this sort of thing turned out for the Huffington Post when it upset one artist over this sort of hot linking.

Or you could go done convoluted route with a proxy which gets the resource from http and delivers it to your site over https. But some would say that's a bit if a cheat (again imagine the scenarios above where the content is changed by an eavesdropper) and it also sounds like a whole load of hassle when there are easier options (primarily don't use http resources on https pages).

You could also implement a Content Security Policy on your site to upgrade insecure http requests to https. This is only supported on modern browsers though and would not help in this specific example (as the https on the other site is broken so image would not load) but would at least stop breaking the green padlock and also could help for other images which they add which are available over both https and http and the wrong link has been put on. Bit of a fudge though.

Or alternatively just stop using resources from http only sites. Especially those with expired https certs. Sounds like a dodgy site anyway.

Upvotes: 1

Related Questions