Today’s topic is how to find mixed content errors on your WordPress site. Mixed content is an HTTPS error that occurs when an HTTPS page attempts to serve an HTTP resource, such as an image, video, stylesheet, iframe, or script. I have marked my favorite tools with a . Later this week, I will post Part 2: How to Fix Mixed Content.
How to Find Mixed Content Errors
Unfortunately, you can have a mixed content error on your page, and still get a secure icon in the browser. What the browser is doing is simply not loading the errant HTTP content. And you might never realize what’s missing unless you go looking for it. For a checklist of the sort of scripts and embeds you are looking for, take a look at items 5,6, and 7 on my Checklist Before Moving from HTTP to HTTPS.
Tools to help you discover whether a particular page has mixed content errors include:
1) Why No Padlock is easy to use, but not always accurate
2) View Source (in any browser) and search for “http://” Keep in mind that that you are only looking at first-level resources (not their children) so you won’t always find your errant call this way. You should also know that linking to an HTTP page does not cause a mixed-content error, nor does any number of meta tags and XML data.
3) or (my personal favorite) Chrome DevTools.
Why is Chrome DevTools my favorite mixed-content tool? It’s free, everyone already has it in their Chrome browser, it is very accurate, and will allow you to drill down to find the peskiest of mixed-content problems (i.e. those that are on external sites, and those that are the children or grandchildren of scripts you are directly calling.)
I’ve put together a bonus video for those of you wanting to see Chrome DevTools in action!
How to Scan an Entire Site for Mixed Content Errors
The previous tools, however, only check one-page at a time. The first thing everyone looks at when converting to HTTPS is the front page of their site. But mixed content errors may also be lurking on internal pages. If you have a huge site, visiting and testing each one can be tedious.
1) Open WordPress Dashboard, and go to your All Posts page. Use the search function to search for “http://”. You can safely ignore the http outbound links (‘<a href=’). You are only looking for source embeds such as ‘src=”http://’ and WordPress oEmbeds of videos, etc. Repeat the same search from your All Pages page.
2) I use a desktop software package called HTTPS Checker to scan entire sites looking for HTTPS errors. HTTPS Checker also has an online version that will scan up to 500 pages for free.
3) Another free online tool (limited to 200 pages) is SSL Check from JitBit.
4) The previous tools all addressed the problem of searching the WordPress database for mixed content. Sometimes mixed content is lurking in files associated with themes and plugins. To search through these files locally, I use UltraEdit, an HTML editor that allows me to search entire folders for a specific string: in this case I search for “http://”.
To search through theme and plugin files on your server, you can use the UNIX Grep command if you are comfortable with the command line.
Continue with Part 2: How to Fix Mixed Content.