What is an insecure element?
An insecure element on a website refers to any file that loads over HTTP (an insecure connection) instead of HTTPS (a secure connection).
The S in HTTPS refers to the secure part.
Even if you have an SSL certificate active on your website, a Not Secure message will still show up if elements load over HTTP.
Here is an example of an element loading over HTTP:
<img src=”http://yourdomain.com/images/my_fun_holiday.png” alt=”Fun Holiday”>
If you had that HTTP element loading on your website, you would get a Not Secure message and your SSL certificate and Padlock would be masked.
When you click the Not Secure from your left hand browser, you’ll see a ‘Your Connection to this site is not fully secure’ popup, even though there is a Valid Certificate.
How to find insecure elements
To find which of your elements are loading over HTTP, you can use a very straightforward method from your browser.
On your site, right click with your mouse and from the dropdown, select Inspect:
From the top right, click the Console tab, where you’ll see a list of the links of any insecure elements loading over HTTP on your site, with a message reading: ‘This content should be served over HTTPS.’
You could have several elements loading over HTTP or just one, all of their HTTP links will be listed in your Console.
Fixing insecure elements
There are 3 very easy ways you can fix Insecure Elements on your website and make sure all of your links are loaded over HTTPS.
Plugin
The first way (if you have a WordPress website) is to use a plugin.
There are 2 plugins that work really well and they’re free:
HTTPS links
If you’d rather do it manually, you can easily delete the HTTP element file on your site and re-upload the HTTPS version back to your site.
For example, our link from the intro over HTTPS would be:
<img src=”https://yourdomain.com/images/my_fun_holiday.png” alt=”Fun Holiday”>
Having HTTPS in the URL would automatically load your element over HTTPS, once re-uploaded, you can go back and verify in your console to double check.
Relative links
You can also make use of relative links on your website, these are links that don’t use your domain name and link to a specific element file instead, using our example:
<img src=”images/my_fun_holiday.png” alt=”Fun Holiday”>
Relative links would automatically load your elements over HTTPS and avoid any HTTP from popping up in the first place.
