A common issue after installing an SSL Certificate on your website or blog, you get an exclamation mark instead of the green lock in the browser bar and it shows “Not secure” when you visit your website using HTTPS. This might be caused by “mixed content”. The following will explain some useful methods to help you identify the insecure (HTTP) assets loaded on secure (HTTPS) pages.
Method 1: View Source
- Browse a page in your website using https.
- Right click on anywhere on the page and click on “View Page Source”, “View Source”, or “Source”, depending on your browser.
- Use the “Find” command (Edit -> Find or Ctrl+F or Cmd+F) and search for src=”http: and src=’http:
- If you did not get any result keep browsing to other HTTPS pages and keep searching through View Source.
Method 2: Use a Plugin (WordPress)
There are some WordPress plugins that are designed to help you identify mixed content. Following are some of them:
Mainly, activate one of these plugins and browse your website using HTTPS. The plugin will display notifications of the HTTP assets. Please put in mind that some plugins show the warnings for administrators and some display to all visitors so beware of leaving any of these plugins active once you complete testing.
Method 3: Use Insecure Assets Testing Websites
There are some websites that offers you a report of insecure assets in your website. Here are some that you can use for free:
Method 4: Google Chrome Inspector Console
You can use Chrome Inspector Console to find insecure assets. To open Chrome Inspector Console, right click on anywhere on the page and click on Inspect, then click on Console.
After making a note of each item sourced via HTTP, you will get an idea of what is causing the problem and how to fix it. Here are some examples that can help you to identify the cause of the problem:
- Active theme loading an insecure image file: http://example.com/wp-content/themes/example-theme/assets/images/circle.png
- Active theme loading Google fonts insecurely: http://fonts.googleapis.com/css?family=Lato:100,400,700
You can now either fix the problem, report it to the plugin developer or remove it if you do not really need it.