Blogging Tips, TechCarl ThompsonJuly 21, 2020Google Chrome, HTTPS, SSL, Blog, Blog Tips, Blogging tips, Mixed Content Error, Not SecureComment

IS YOUR WEBSITE SAYING IT'S NOT SECURE DESPITE IMPLEMENTING SSL?

Blogging Tips, TechCarl ThompsonJuly 21, 2020Google Chrome, HTTPS, SSL, Blog, Blog Tips, Blogging tips, Mixed Content Error, Not SecureComment

Whilst reading the blog post I published yesterday for any errors I may have missed during the copy-writing, I found that my website was no longer showing as ‘Secure’ on Google Chrome. Being an ex-IT network & security professional this of course caused concern, so I had to look into why my website was showing as ‘Not Secure’ despite having an SSL certificate installed and the website was correctly working on HTTPS. When you browse a website, you should find a padlock on the left-hand side of the web address in your internet browser. This indicates that your website is SECURE and using SSL (secure sockets layer) certificates. SSL ensures that all web traffic between the end-user and the website is encrypted using a public key based certificate service. So, if the SSL certificate is working (valid) and you’re browsing using https, then how come your website is still showing as NOT SECURE?

The error message that came up on my Google Chrome browser was ‘Your connection to this site is not fully secure. Attackers might be able to see the images that you’re looking at on this site and trick you by modifying them’. Thats a new one to me, so had to do some research. Firstly this issue seems to be affecting blog type websites hosted on Squarespace, Blogger, Wordpress, WIX etc. I have two businesses on Shopify and none of these are affected. So I checked out a few of my favourite blogs and they are all experiencing the same issues, hence why I’m writing this blog.

After a short amount of research I found out that this is due to a Mixed Content Error.

What is mixed content, why is it causing my website to display as not secure and how do I fix it?

As I mentioned earlier, if your website is using SSL/HTTPS then your website will be secure and encrypted. However mixed content means that although your website is using HTTPS it is also ‘calling’ for content using HTTP (which is not secure and unencrypted). To fix this issue you first need to find the content that is including this http mixed content. Often it is found on custom code to your website, maybe a 3rd party app integration or simply just an administrative error.

To find out the mixed content, open Google Chrome and browse to your website. Click on the three vertical dots on the right corner of Google Chrome, then choose More Tools > Developer Tools. This will open a window in the bottom of your browser that shows the code of your website as well as a lot of diagnostic information. Click on the Security tab.

You can then find any errors relating to Mixed Content. I’ve highlighted the problematic part of my website below which was causing my issue:

My website carlthompson.co.uk was loaded over https. GOOD. However it requested an image over http (BAD). The image in question was the logo for my blog post, so found it strange why this wouldn’t be served using https as the rest of the site is. This could be due to bad coding on the template that I’m using, or something with my Squarespace platform.

How to fix Mixed Content Error in Squarespace

Firstly if you find out that your error is due to custom code, then you might have to talk to your web developer to amend the custom code to call https rather than http. If it’s caused by a 3rd party integration, then you might want to try removing the integration and see if it resolves the issue, then add it back in and re-evaluate. However my issue was quite simple and a quick call to Squarespace support and I got a workaround.

In Squarespace, click on Settings > Advanced > Code Injection. Then add the below code in to the Header section:

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

You can then go back to the tab with your blog loaded and the developer tools showing and refresh the page. You should now see that your site is secure and there are no Mixed Content errors showing up.