Overview

If you have recently switched from a standard HTTP based site to one secured with a Secure Sockets Layer SSL certificate, you may not initially see the standard green lock. Instead, it may show either a warning symbol or an info symbol, as shown below (Chrome 56):

google chrome status icons - ssl

One of the most common causes for this are hard coded links to the HTTP based version of your site. As this presents a potential security risk, most browsers will flag this as mixed-mode or insecure content. 

This article will show you how to find what content is causing this issue.

Instructions

  1. To find out what calls are causing the issue, open your website in Google Chrome. Before loading your site, open up the Developer Tools (F12 for Windows / Linux, Ctrl + Opt + I for macOS) and then load your website.
  2. Click on the Security tab to see the status of your website. You should see something like this: 
    google chrome developer tools - mixed content
    This is letting you know that your certificate is valid and the conection is secure, but there are some calls to HTTP based resources.
  3. To find what resources are causing the issue, click on the Network tab, and add mixed-content:all as a filter. This should then filter the requests and only show the ones which are causing the issue. Here's an example: 
    google chrome dev tools network mixed content
    There are three calls in this page which reference HTTP based calls. As the cgi call means the content passed to it wasn't secure, it was blocked completely (and therefore shown in red).
  4. To correct these issues, you'll need to update your website source code or WordPress theme to ensure the calls are to the HTTPS based version. If you're unsure how to do this, you should contact your website developer for further assistance.
Was this article helpful?

Related Articles