SSL Certificate and HTTPS BASICS
User information that is sensitive; like credit info, login information, or confidential feedback must be submitted securely, via HTTPS. An SSL Certificate is purchased and installed on your web server to enable secure HTTPS browsing.
SSL certificates range from $10 to over $1,000 per year. These certificates provide different levels of verification and secure browsing while the certificate is invoked. All price ranges enable HTTPS secure browsing. The browser bar will only turn green on the more expensive SSL certificates where the owner has to pass a more strict background check.
The browser gives warnings for webpages served via HTTPS that include HTTP assets, like scripts, forms, and images. A good example is you build a webpage and one of the images is displayed via a HTTP (non-secure link) such as: https://www.yourdomain.com/image1.jpg. This will cause the HTTPS browser to display all sorts of warnings and scare off your users.
How to Identify insecure HTTP Assets when Warnings Happen?
Here is the good part you have been waiting for.
You now have your SSL certificate installed correctly, plus you can browse your site via HTTPS by manually typing it into the address bar and it works. But the browser starts giving intimidating warning messages about “insecure content” loaded on an HTTPS page. Here are a few ways to identify the insecure (HTTP) assets loaded on secure (HTTPS) pages. Trust me, you will have to use several of these methods to resolve all your browser security warnings about mixed content.
This method is pretty simple. Load the page via HTTPS; right-click anywhere on the page; and click “View Page Source”, “View Source”, or “Source”, depending on your browser.
Then use the “Find“ command (Edit -> Find or Ctrl+F or Cmd+F) and search for:
What you are doing is manually looking for images, scripts, iframes, and all other assets served via HTTP instead of HTTPS. If you don’t find any with either double- or single-quote HTTP: then you’re all done with that page. Keep browsing to other HTTPS pages and keep searching through View Source.
Website’s that Test for Insecure Assets by Cut and Pasting the URL
WhyNoPadlock is a free testing site that provides you with a report of all the insecure items. It provides an easy-to-understand list of green check marks or red x’s. Pay attention to the red x’s; fix them in your plugins or theme; and click the “Test URL Again” button to try and rid yourself of red x’s. Once done with that page, paste in a different URL to see if it’s also free from red x’s. Wash, Rinse, Repeat.
Google Chrome Inspector Console
Google Chrome’s Inspector has a Console tab. When the HTTPS page you display is yellow or red in the address bar, open the Console to see the one or multiple insecure assets.