Update: If you need help transitioning your website from HTTP to HTTPS, check out our guide on how to install an SSL certificate.
What is Mixed Content?
Mixed content warnings are a result of of loading resources on both HTTP and HTTPS. We see mixed content warnings on sites that are heavy on resources such as images and documents. The reason for that is because sometimes the URL to those files are hardcoded in the content and when a site is updated to HTTPS those paths still link to the HTTP version.
What Causes Mixed Content Warnings?
This can prove very problematic for some website owners; it could break your website.
What Causes Blocked Mixed Content?
How do I unblock mixed content?
There are several tutorials for unblocking mixed content depending on the browser you use. However, unblocking mixed content is not recommended as it leaves the site open to attack. In this post, we will show you how to keep your site secure by fixing mixed content instead.
How to Fix Mixed Content in WordPress
Use the really-simple-ssl Plugin
If you’re using the WordPress CMS, you are in luck because you can make use of the really-simple-ssl plugin. It will automatically fix all your schemes and redirect HTTP to HTTPS on your behalf. After installation and activation, it will show you the following screen:
The tool will automatically log you out of WordPress and force HTTPS on your website.
Note: There is a great resource on the ManageWP blog – WordPress SSL Settings and How to Resolve Mixed Content Warnings. I encourage you to give it a review as it provides a number of great discussion points.
How to Find and Fix Mixed Content Issues in Generic Files
If you are using a generic content management system where your template and files are in HTML or PHP files. You can find and fix mixed content issues in these generic files by conducting the following steps:
Conduct a Mass Search
If you have terminal access to the server, a grep command can help you identify every file that references a http://, be sure to be in the root of your website (i.e., /public-html/, /www/html/, etc..):
$ grep -r "http://yourdomain.com/" .
Replace by Rewriting your Content from HTTP to HTTPS
You will need to manually fix all references to include https://.
How to Find and Fix Mixed Content Issues in your Database
Depending on the technology you choose, your website technology might dynamically render the asset locations in the database and so you’ll want to go through the database and update all protocol references. Here are some quick tips to find and fix mixed content in your database:
Get a Database Search and Replace Tool to Identify and Replace Mixed Content
There is a great tool called Database Search and Replace, built by Interconnected/IT. As the name implies, it allows you to do a quick search of your database, replacing values as needed (be careful).
Configure Database Search and Replace
Download the Database Search and Replace tool at the root of your website:
[root@server [domain directory]# wget https://github.com/interconnectit/Search-Replace-DB/archive/master.zip [root@server [domain directory]# unzip master.zip [root@server [domain directory]# cd Search-Replace-DB-master/
Once you have installed, you can access it directly by going to http://yourdomain.com/Search-Replace-DB-master/index.php
When you load the tool, it will pull the values from your /wp-config.php. If for whatever reason it doesn’t, here is how you map the values:
Name = define('DB_NAME', User = define('DB_USER', Password = define('DB_PASSWORD', Host = define('DB_HOST', Port = Default 3306
Run Search and Replace
When running the search and replace be mindful of all the things you can break. To account for this, I recommend being as specific as possible. For instance, in the image above, you can see I search for http://perezbox.com and replace with https://perezbox.com. This is an effort to avoid breaking any other http references that might cause you more issues.
Before you run the tool, please be sure to have a database backup. The tool also helps by giving you two very distinct options: Dry Run and Live Run. I recommend running a Dry Run first, checking the output, then running a Live Run if everything is configured.
Identify and Handle HTTPS Traffic
Next you want to make sure that your server/website is ready to handle HTTPS traffic. You can do this via your /wp-config.php file.
/* Handle HTTPS Protocol */ if ($_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https') $_SERVER['HTTPS']='on';
This will make it so that your website/server accepts all HTTPS requests, and also enables HTTPS on your website. There are obviously a number of different deployment types. For more variations you can reference this Codex article on WordPress.org.
When done, clear any caches you might have enabled and visit your website. You should now get the secure padlock in the browser:
Remove Database Search and Replace Tool
Please, whatever you do, do not forget to remove the DS&R tool from your root once you have found and fixed all your mixed content issues. Leaving it on your server could introduce itself as a potential attack vector later.
If you’re an existing customer and are having issues getting things configured please connect with our team by submitting a ticket. If you are deploying LetsEncrypt locally here is a simple guide to help get you started.