How to deal with mixed content
How does one fix mixed content issues on their site? We will show you how.
How to find resources that cause mixed content
In the Chrome browser, press the F12 key or go to the Chrome menu -> More Tools and open Developer Tools.
Go to the Network tab, and enter "mixed-content:all" in the filter box.
If you now access a page that you believe has mixed content, the resources that are causing the problem will show up in the list (Image 4).
Image 4: Resources causing mixed content shown are in the list
Let's use this a hint that we should fix our WordPress site.
Solution 1: If calls to mixed content resources are being made from the WordPress site's database to the content of the site, use the wp-cli command to convert HTTP links to “https://”
cd /home/kusanagi/example.com/DocumentRoot wp search-replace 'http://example.com' 'https://example.com'
Use the wp-cli to change any problematic URLs
Solution 2: If calls to mixed content resources are being made from WordPress files like the theme or plugins to the site itself, find the files that are making the calls and use an editor to change the URLs to “https://“.
cd /home/kusanagi/example.com/DocumentRoot find ./ -type f | egrep '(css|js|php)$' | xargs grep 'http://example.com'
Find the problematic files
Solution 3: In the event that calls are being made to external resources - use Solution 1 if the calls are coming the WordPress site’s database, or Solution 2 if they are coming from WordPress files like the theme or plugins.
Solution 1 and 2 apply to situations where you, the administrator, have control over both where the calls are coming from and what they are referencing. If external calls are being made, you may not have control over the resources.
For example, some external resources cannot be called through HTTPS, or they themselves might make HTTP requests to other resources. In this situation, you need to contact the administrator who controls these resources, or consider other options. Older services might not get updated often enough and alternatives might be more expensive. This might make abandoning the feature altogether the best decision. If external resources are the cause of your mixed content, think about the solution that best fits your situation.
Once you have finished editing the mixed content, check the Google Chrome address bar again. You should see the padlock icon and the word “Secure”. No mixed content should show up in the Developer Tool under the “mixed-content:all” filter, either. If this is the case, your site is free of mixed content (Image 5).
Image 5: There is no more mixed content on the site.
Next time, we will show how to use KUSANAGI’s features, such as the log, observation tool, the KUSANAGI cluster, and introduce further speed-tuning techniques at the application level. Stay tuned!
