If you’ve recently added an SSL certificate to your site, you may expect to see a green padlock in the URL bar when visiting your site. However, you may run into a conflict called “Mixed Content”. This means the site is being loaded with SSL (for example: https://mydomain.com), but not all the elements loading on your page are being loaded with SSL.
What is Mixed Content?
A common example of Mixed Content would be when an image, font, or icon is loaded over http://mydomain.com, but the page was requested with SSL (https://mydomain.com). This can have one of two effects on your site:
- The green padlock does not appear
- The green padlock does appear, but the insecure image or resource does not
You can confirm if your site is being affected by Mixed Content Errors by checking the Inspect Element console. You will see yellow warnings if the insecure content is causing the padlock to not show, and red warnings if the content has been blocked from displaying because it is insecure.
If you are using Chrome, right-click anywhere on your page and choose “Inspect”. This will open a section at the bottom or right-hand side of your screen with different development information about your site. Click on the “Console” tab and this will show the content that your browser considers insecure.
Resolving Mixed Content Errors
There are a few ways to fix insecure content. The first and easiest way is only applicable if you have selected the “Secure all URLs” checkbox on the SSL page in your User Portal.
If you have selected the “Secure all URLs” option, simply change your site’s URL in the Settings > General page of your WordPress Admin Dashboard to reflect “https” instead of “http.”
Be sure to purge the Page Cache afterwards by using the Purge All Caches button in the WP Engine tab.
If this has not resolved the issue, it likely means your site has some URLs hardcoded into the database and/or codebase. There are several methods to approach resolving this issue:
- Method one: Search/Replace your database for insecure content
- Method two: Use an Insecure Content Fixer plugin
- Method three: Use HTML Post-Processing rules
Method one: Search/Replace your database
IMPORTANT: Before running a search and replace, backup your site in the Backup Points section of your User Portal.
Use method one if the URL you saw in your Inspect Element console is your own domain, not your CDN URL or an external domain (fonts.google.com, for example). You can use a Search-Replace plugin to search for “http://yourdomain.com” and replace it with “https://yourdomain.com.” Also, when you run a search and replace on your domain, you should run one for your default WP Engine domain ([environment].wpengine.com, for example). For this, you would search for both “http://[environment].wpengine.com” and “https://[environment].wpengine.com”, and replace each with “https://yourdomain.com”. Do this even if you do not see mixed content errors involving “NAME.wpengine.com” in the console. Be sure to Purge All Caches in the WordPress Admin Dashboard after making this change as well.
Method two: Insecure Content Fixer Plugin
Use Method two if the URL in the Inspect Element console is your own domain. First, install the SSL Insecure Content Fixer plugin. This plugin will replace elements on the page depending on the options that are specified within the settings. The settings we recommend within the plugin are illustrated below.
After making these changes, be sure to also use the Purge All Caches button in the WordPress Admin Dashboard.
Method three: Use HTML Post Processing
Use Method three if the resources are your own domain, an external domain, and/or a CDN URL. The HTML Post Processing method changes the domain after the HTML for your page has been generated. The option to create HTML Post Processing rules is enabled by default on all sites on WP Engine, and it can be found at the bottom of the WP Engine tab in your WordPress Admin Dashboard.
Use the instructions from the HTML Post Processing article to create a rule forcing the content that was flagged as “insecure” in the Inspect Element Console to use https instead. Please note: The CDN URL in the example is using SSL.
SSL and CDN
If your site is using CDN, there are a few caveats to keep in mind:
First, WP Engine CDN zones have different domains for HTTP and HTTPS connections.
- Insecure (default): http://ZONEID.wpengine.netdna-cdn.com
- Secured: https://ZONEID-wpengine.netdna-ssl.com
If you need to find the CDN URL for your site:
Right-click on a page on your site and select View Page Source from the menu
Search the source code for your site for a URL like the following example. Your Zone ID is the string or word at the beginning of this path.
If you are using SSL and CDN on your site, you will need to request our Support team enable SSL over CDN. And, if you are using your own custom CDN domain (ex: cdn.yourdomain.com) you must provide our Support team with the SSL certificate and key files required to secure that domain on the CDN server.
In order to configure your CDN URL (default or custom) for HTTPS, please contact our Support Team via the User Portal.
I’m still seeing insecure content. Help!
If you still see don’t see the “green padlock” in your site’s URL bar, try the following:
You can do this from your WordPress Admin Dashboard, under the WP Engine tab.
Test in an incognito window to get around any local caching
With the page open, Press Ctrl + Shift + N (Windows, Linux, and Chrome OS) or ⌘ + Shift + N (Mac).
Review your theme files and plugin settings
Look into your plugin or theme code in the WordPress Admin Dashboard, or over SFTP to see if there are any URLs which are hardcoded into the files themselves.
Still not able to resolve the issue?
Contact our Support Team via 24/7 chat in your User Portal and we are glad to help further.