Mobile app version of vmapp.org
Login or Join
Kimberly868

: HTTPS connection is "not safe" due to images I am currently working on a website and I have successfully installed my SSL certificate. The GeoTrust SSL/TLS checker confirmed that the certificate

@Kimberly868

Posted in: #Https #Images #Security

I am currently working on a website and I have successfully installed my SSL certificate.

The GeoTrust SSL/TLS checker confirmed that the certificate chain (including CA) is properly installed. Everything looks fine on Chrome but my padlock is not green and on Firefox it actually states that the website is not secure because there is unencrypted elements on it.

I used an online service to check why that is and it turns out that indeed my images are not considered secure URLs.
How do I deal with this situation, aka how do I embed images on my website securely?

10.04% popularity Vote Up Vote Down


Login to follow query

More posts by @Kimberly868

4 Comments

Sorted by latest first Latest Oldest Best

 

@Hamaas447

The issue is that your page is serving links from a http location as opposed to https. This is due to using absolute http links to reference resources such as images. There are two better methods which will enable you to reference links in either http or https and avoid this issue.


It requires you to find these links and change them either to:


relative links: ie. /wp-content/yourtheme/images/image1.jpg
or place // at the front of the domain as in //example.com/wp-content/wp-content/yourtheme/images/image1.jpg
This will then serve these resources over http or https based on
whichever request was made.



In both Chrome and Firefox you can click the padlock icon and then click through to view a list of the offending insecure links. And if you cannot see any images or other resources highlighted in the browser but are still getting errors you may discover that there is a javascript call that is referencing links absolutely via http.

10% popularity Vote Up Vote Down


 

@Radia820

It is really basic. When you are building websites served over SSL (https) any reference in your code that is not prefaced with https will throw up security warnings - other than links. Note that most (all) browsers also default relative links to http. So if you would reference /uploads/12/5/img.jpg or /js/jquery.js the transfer protocol will default to http - which is really annoying.

All browsers handle the warnings a little different but you will get some kind of message. A general statement would be that the new the browser the more severe the message will be. Some older browsers practically ignore these errors while newer browsers can act like your world is under attack because of the missing "s".

10% popularity Vote Up Vote Down


 

@Jessie594

Check your secure url protocol configuration in your cms/wordpress/magento or any other platform you're using. You can also share some of your image tags, but basic img src images don't give that kind of errors.

Image tag structure is important, but the focus of your question I think its relative to the SSL Certificate "type" installed on your site. A personal case happened to me with a "Standard GoDaddy SSL Certificate.

You´ll see a warning icon in Firefox (specifically) url search bar, saying that there might be insecure images or elements on your site. As far as I know its just a matter of how firefox processes info about the certificate, or the info included in it. This doesn't happens in safari, chrome or other browsers. I found a solution for this, installing instead of a "Standard SSL" a "Premium SSL Certificate or EVC extended validation certificate" which has more detailed info about the sites company. You'll get a green padlock secure url bar.

However premium ssl certificate could be a bit more expensive, around 0-0 USD a year.

10% popularity Vote Up Vote Down


 

@Heady270

Your image tags must currently look like:

<img src="http://example.com/images/image.jpg">


That http in there means that the image is NOT served securely. An attacker could change the image in transit and thereby change how your otherwise secure page looks to your users.

Instead you could use any of the following to serve the images securely:


Link to https explicitly: <img src="https://example.com/images/image.jpg">
Use relative linking to images on your own domain: <img src="/images/image.jpg">
Use protocol relative linking to use images from other domains: <img src="//example.com/images/image.jpg">


Explicit https will always serve the image securly (even when the page is not served securely) while relative linking will serve the image securely only if the page is served securely.

In Firefox and chrome you can click on the padlock and get more information about the problem. Having done so, here is a screen shot from Firefox showing a list of all the images an the page. It is easy to scan the list and see which ones are http:

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme