Resolving insecure site and mixed-content warnings

This article explains how to resolve insecure links on your website after adding an SSL certificate.

Background

A common issue after adding an SSL certificate is that your browser still shows your site as insecure. This most often happens because there are links on a page that still point to HTTP instead of HTTPS.

For example, look at the following image link. Notice how the URL uses http at the beginning.

<img src="http://www.example.com/images/pic_mountain.jpg" alt="Mountain View">

When visiting the site, an error is displayed, and the padlock icon in the navigation bar displays a warning icon. If you click on the warning icon, the text explains that there are 'unencrypted elements' on the page you're viewing. This happens because the image was linked using HTTP and not HTTPS.

Online tools such as whynopadlock.com can help you locate insecure links on your site.

If you attempt to connect to a site with a missing, invalid, or self-signed SSL certificate using an HTTPS URL, your browser shows a security warning such as 'Your connection to this site is not secure'.

Checking the JavaScript console

You could also check the JavaScript console in your browser. This may also display a warning as to why the site is not loading.

In Firefox and Chrome, you can open the console by pressing the following keys:

• Windows — Ctrl + Shift + i
• Mac — Option + Cmd + i

Click the console tab. An error message similar to the following appears in the console:

The link listed in the error message opens the following page with more information on this issue:

• No More Mixed Messages About HTTPS (Chromium Blog)

There are a few steps you must take in order to fix this error.

 

Add an SSL certificate

All modern sites should use a valid SSL certificate. See this article for instructions on how to add an SSL certificate to your site.

Fix unencrypted links

There are two solutions to fix these links.

Option 1 — Manually update links

See this page for further details about HTML file paths.

Use absolute links: Absolute links are the full url location to a file that includes the domain name. If you choose to use this option, make sure to use HTTPS in the URL. For example:

<img src="https://www.example.com/images/pic_mountain.jpg" alt="Mountain View">

Use relative links: Relative links do not include the domain name. These links point to a local file instead. For example:

<img src="images/pic_mountain.jpg" alt="Mountain View">

Option 2 — Add code to your .htaccess file

Instead of manually updating links in your code, you could add the following lines to your site's .htaccess file.

Header always set Content-Security-Policy "upgrade-insecure-requests;"

This forces the browser to automatically update any insecure links to secure links. Once added, the warning should immediately disappear. See this page for further details.

Check for insecure links again

Use a tool such as whynopadlock.com to test your site again. Repeat the steps above as needed.

There are a few additional steps you must take to secure a WordPress site. See this article for a list of steps to ensure your WordPress site is using secure links in both the website files and the database.