HTTPS connection is "not safe" due to images
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
:
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.