Have you installed an SSL to your website, but web browsers are prompting an insecure message? Is your website not showing the "lock" icon next to your URL? If so, you may be encountering a Mixed Content error. The following article will help you uncover what this error is, what causes it, and how it can be resolved as quickly as possible.
What is a Mixed Content error?
To understand a Mixed Content error, we'll briefly go over https / http protocols. You've likely seen these hundreds of times when dealing with URLs (i.e. https://mediatemple.net).
In short, https is a more secure method of surfing the web, as it utilizes SSL encryption to protect you and your customer's data.
To get a website to use https, you will need to install an SSL to your website, and then switch your URL to use https. However, if parts of your website are hard-coded in some way to still use http, a Mixed Content error will prompt in your web browser. Below is an example of what this error may look like:
Chrome Version 80.0
What causes a Mixed Content error?
A Mixed Content error will occur when your site is loading https and http content at the same time. This is generally because parts of your site are hard-coded to http. Therefore, even if you have used a redirect to change your URL to https, these hard-coded parts of your site are stuck on http.
Some common culprits of this include:
- Images / videos
- Scripts or other code
In this example, we've gone into Developer Tools >> Console in Google Chrome. Using this, we were able to see that the mixed content is coming from an image and jquery script on this page. Note: this could also be occurring on multiple pages throughout your website.
How can I fix a Mixed Content Error?
To fix a Mixed Content error, we just need to make sure that all the content on the website is changed to use https. Although this could be done manually by going into all the code in your site, there are plugins available to help automate the process. In this example, we will be using the WordPress plugin Better Search Replace. If you are using a different CMS, you can search for similar plugins, or contact your website developer.
- Install Better Search Replace to your WordPress site.
- After installing/activating the plugin, navigate to Tools >> Better Search Replace.
- In the "Search for" box enter: http://example.com. Then in the "Replace with" box enter: https://example.com
Be sure to replace example.com with your actual domain name
- Highlight the desired database tables you wish the plugin to search through. In this example, we selected every database table.
- (Optional) You can select Run as dry run? to have the plugin run only a search to determine how many changes there will be, but not actually implement them yet.
- When you are certain you want to implement the https changes, ensure Run as dry run? is deselected. Then select Run Search/Replace.
- You can now check your website and see if the mixed content error has been resolved.
After running Better Search Replace, you may find that some URLs have been updated to https. In this example, we can see our jquery script is using an external URL (http://code.jquery.com) instead of our actual domain name. Therefore, it was not picked up when the plugin ran our previous sweep.
Therefore, you can go back to the plugin and run another Search/Replace for http://code.jquery.com to https://code.jquery.con, or you may need to manually locate the script and update it.