Recently, Google announced that their search engine will prefer the websites working on HTTPS protocol. At the same time, they are going to block the websites with HTTP as it is not secure. So, if some time ago you could run your WordPress website without SSL certificate, now it is a must. One of the most common errors which are seen after enabling SSL is the Mixed Content Warning.
Why is it important to use SSL
When using the secure connection, any data exchange between the site and the user’s browser will take place in a secure encrypted channel. For example, you log in to the site: if unencrypted HTTP is used, your login password is transferred in an open channel and can be intercepted and used by anyone. When using HTTPS, this is just impossible as the data is reliably encrypted. Naturally, the same applies to any other personal data, payment card data, etc.
It is clear that for Internet banking and payment systems the use of the HTTPS protocol has long been de facto. No one will use a financial instrument where the data is transmitted openly – this is nonsense. However, this is a very important feature for ordinary sites and blogs. The visitors will trust more to the website with a secure connection.
After the SSL certificate has been successfully issued and installed on the site, the browser bar will display the green bar with the inscription “Protected”. But sometimes, instead, users see the message “Connection to the site is not fully protected”, a yellow triangle with an exclamation mark, or Mixed Content Warning.
This situation is quite common and is quite easy to solve. In the article, we will see how.
What is Mixed Content Warning ?
This is a situation when the elements of a web page are connected simultaneously via the HTTP and HTTPS protocols. If the page requested by HTTPS contains parts transmitted over the unencrypted HTTP protocol, the connection is not considered fully encrypted and secure: it is possible to intercept and modify what is transmitted via HTTP.
In different browsers, a warning about mixed content is displayed in its own way, but it is almost the same — a site visitor sees a warning about an unprotected connection and does not see a web page as it should look.
Types of mixed content
Mixed content can be of two types –
The difference between them is in what damage can be inflicted to the site if any information is intercepted and changed during the transfer.
Passive mixed content are the elements that, when replaced, cannot be changed by other parts of the page. For example, an attacker can intercept any image downloaded via HTTP and understand which pages the user visits.
The elements of passive content include:
- <audio> (src attribute)
- <img> (src attribute)
- <video> (src attribute)
- <object> (when <object> performs HTTP requests)
Active mixed content are the elements that are part of the DOM, and therefore their substitution can change the behaviour of the entire web page loaded via HTTPS, which can lead, for example, to stealing passwords from a visitor. When intercepting and spoofing active content, an attacker can inject a third-party script into a page that will be able to upload a virus to the hosting through vulnerabilities in CMS plug-ins or retrieve any valuable user data. This type of mixed content is more dangerous because most browsers block the download of active content via HTTP if the page is requested via HTTPS.
The active contents are the following elements:
- <script> (src attribute)
- <link> (href attribute) (including CSS)
- XMLHttpRequest and its requests
- <iframe> (src attribute)
- All cases when the url parameter (@font-face, cursor, background-image, etc.) is used in CSS
- <object> (data attribute)
How to Fix Mixed Content Warning
We will discuss various methods to fix the Mixed Content warning for your WordPress sites below. You can use any of them to successfully remove the Mixed Content Warning from your site.
Method 1. Manual configuration
Step 1: Find the file with the incorrect link
To understand which particular elements are transferred over an unprotected HTTP protocol, open the browser console. We prefer Google Chrome, here you are able to click F12, Ctrl + Shift + I, click right mouse button – View Code or select Menu – Additional Tools – DevTools. You are able to access the developer’s tools in other browsers in a similar way.
1. In the Browser Elements Inspector, open the Console tab to see the errors. The browser will display the errors detected on the page. We are interested in Mixed Content errors. They contain a link to the element that is loaded via an unprotected HTTP protocol, for example, http://hoststat.tk/wp-content/themes/busiprof/images/logo.png.
2. Left-click on the problematic link, open the Sources tab and you will see an element that uses the unprotected HTTP protocol. If for any reason you find the browser developer’s tool inconvenient to use, scan the page using the free Why No Padlock online tool. It will scan the whole page and display all insecure elements.
3. Now we know which element causes the mixed content warning. Now, we have to find it in the website content and replace the protocol in the link from HTTP to HTTPS. The link must become https://hoststat.tk/wp-content/themes/busiprof/images/logo.png instead of http://hoststat.tk/wp-content/themes/busiprof/images/logo.png.
4. Another important step is to make sure whether the link will work correctly via HTTPS. For that, insert the corrected link into the address bar of your web browser and click Enter. If everything works fine, go to the next step – correct the wrong address in the programming files.
Step 2 : Fix the links in the website theme
ATTENTION ! Before any actions with files, be sure to make a backup copy of the theme !
After receiving the certificate, we, in fact, can already move the site to HTTPS protocol. However, there can be links to files that are written in the theme’s CSS files, and content can (and most often are) absolute, which, when the page is loaded into HTTPS, will cause a “mixed content” error.
For example, we load the www.website.com page into HTTPS (https://www.website.com), but within the theme, the link to the picture logo is written in an absolute way and with the explicit indication of the HTTP protocol:
As a result, we get a mixed content error. To understand which file can contain this picture, find where it is used on the site. If you do not know in which theme file the problem link is located, you need to review all the template files until you see the link with http. To do this, open Appearance – Theme Editor to run code editing page with two columns.
In the left column, click on each file, in turn, to check whether the problem link is used in this file. It is convenient to search using the Ctrl + F shortcut, inserting the desired link into search field.
In our case, the cause of mixed content warning is the site logo. Now, you need to find in which file of the site there is a link to the logo. To do this, go to the administrative part of the. Our picture with the logo is in the theme header (header.php) since this file is responsible for the location of elements in the header of the site. Accordingly, we need to open the header.php file of the theme and fix the link to a relative:
Thus, now the logo image will be loaded using the same protocol that the whole page does. If for any reason you cannot change the link to reference, you can specify it as an absolute, but without specifying a protocol:
As you can see, HTTP has been removed in this recording format and the browser will independently choose the type of protocol by which the entire page is loaded. Accordingly, similar actions should be carried out with any pictures, files, CSS-styles, and scripts that are called when the page loads.
Step 3. Fix the links in CSS-files
Sometimes in CSS styles, there is a problem of mixed content in the background-image construction. To fix it, you need to open the style file and remove the protocol from the link to the background image file. It will turn out like this:
1 background-image: url(//www.website.com/wp-content/themes/[theme-name]/images/background.png);
Step 4. Fix the links in the content
If you can do everything manually with the theme and CSS more or less quickly, then you will have to spend much more time with the content. The fact is that when you add an image through an editor, WordPress, by default, adds absolute links to all of them. Accordingly, now all our links are loaded via the HTTP protocol, which continues to cause a mixed content warning. If you have a few pages, you can fix these links manually, but if there are more than a dozen articles – you will have to use a replacement in the database.
For this, we need access to phpMyAdmin. Contact your hosting provider on how to access the database manager. Also, you can find the login and password in the hosting account dashboard. Open the SQL tab and run the following command:
1 UPDATE wp_posts SET post_content = replace (post_content, “http://www.website.com”, “//www.website.com);
Thus, we will change the “post_content” table containing the content of the posts, the protocol for the links, and now when the page loads, the browser will determine the protocol to call the files.
Method 2. Using ‘Real-Time Find and Replace’ Plugin
This plugin will replace HTML code after it is written by the WordPress engine, but before it is sent to a user’s browser. None of these changes affect your files. To undo changes, just delete the find/replace pair.
1. Type in text or code in the Find field. This can be a plain text or a regular expression (use / at the start and end).
2. Type in the text or programming code you want to replace in the Replace with field.
3. If you are going to use a regular expression, check the RegEx box.
4. In the pro version (it costs less than $10), you can further control when the replace occurs by specifying a query string, referral, and post type to match. Note that these filters perform a simple “contains” for the text given.
Method 3. Using ‘Really Simple SSL’ Plugin
The plugin is in the official WordPress marketplace, thus it is very easy to install and configure. To do this, you need to log in to your website dashboard, click Plugins – Add New. Then enter the name in the search field and click on the name in the search results. Next, click Install. After the installation is completed, click Activate. As you see, the procedure is common and does not differ from other plugins.
Enable HTTPS using the Really Simple SSL plugin
After activation, the plugin will require to enable SSL on the website. Before clicking this button or even earlier, before installing the plug-in, we recommend making a backup copy of your website and database.
Immediately after the activation of SSL, your session in the admin panel will be completed and you will need to log in again. You may notice that the admin panel of the site is already automatically redirected to HTTPS. In general, the configuration is over now, almost all links will be correctly replaced by HTTPS versions.
Really Simple SSL Plugin Settings
If for some reason you need to deactivate the plugin through the plugins page, then the website will be reverted back to HTTP. You can deactivate Really Simple SSL without disabling HTTPS in the plugin settings.
If after the initial setup the site does not work as you expect from it, try switching additional options or turning on debugging mode:
• Automatically replace mixed content – the option fixes all HTTP links to HTTPS.
• Enable 301 WordPress redirection in SSL – the option enables automatic 301 redirect without the need to register additional settings in .htaccess.
• Enable 301 .htaccess redirection – it is not necessary to include it simultaneously with the previous item, as cyclical redirect can be received. Adds a redirect to HTTPS to the .htaccess file.
• Debug – enable debug mode, then you can view the log in the corresponding tab.
• Stop editing the .htaccess file – if you have enabled 301 redirections in .htaccess, then you should block the possibility of overwriting the file.
• Use an alternative method to fix mixed content – an alternative method of correcting mixed content, turn on if the standard method does not suit you (the first option).
• Deactivate the plugin and keep SSL – disable internal redirects and all methods for correcting mixed content, but the site remains available when accessing via HTTPS and redirects to .htaccess remain.
Method 4. Better Search Replace Plugin
The plugin finds and replaces fragments in the database directly through the WordPress dashboard. You do not need to perform any requests or have special skills. Everything is very simple.
Having installed and activated the plugin, open Tools – Better Search Replace. You will see the page with the list of options divided into several tabs. Search/Replace tab includes:
• Search for. Write here what you need to find.
• Replace with. Write here what you need to replace with.
• Select tables. Mark the tables in which you want to search. If you don’t know exactly which table you need, then select all with the keyboard shortcut Ctrl + A.
• Case-Insensitive? Check the box if the search does not need to consider letters case.
• Replace GUIDs. If you check, then the plugin will make the changes in the base GUID tables. We recommend not to check.
• Run as dry run. To replace in the database, uncheck this box.
In the Search for field write what you need to find, and in the Replace with field indicate what you need to replace. Mark the tables for search, uncheck Run as dry run option and press the Start search and replace button.
How to Avoid Mixed Content Warning
All these steps will be necessary if you get an SSL certificate for your website not immediately after running it. If it is available for some time without HTTPS, most likely you will not be able to avoid mixed content warning.
So, the best way to avoid the errors to start adding posts and upload content only after you get an SSL certificate and make sure the whole website uses secure HTTPS protocol.
These are the easiest and most reliable ways to fix mixed content warnings on your WordPress website. if you follow the instructions carefully you will not get any wrong results.
Please share with us if these methods worked for you or if you have any other tips or tricks that we have missed here which worked for you.