Overview
in this article we will show you how to resolve mixed content warnings, it is 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, to resolve mixed content warnings.
Method 1: View Source
- Browse a page on 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 sHTTPhttp: 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)
Some WordPress plugins 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
Some websites offer you a report of insecure assets on your website. Here are some that you can use for free:
Method 4: Google Chrome Inspector Console
You can use the Chrome Inspector Console to find insecure assets. To open the 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:
- A plugin loading a JavaScript file via HTTP: http://example.com/wp-content/plugins/example-plugin/awesome.js
- 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 need it. Use the JavaScript minified to compress the code before you publish a website.
