Optimizing SSL encryption: Detecting and removing mixed content

Info

Author

Category

Date

September 12, 2016

Even though SSL encryption is activated, my website does not receive the desired green padlock for secure connections. Instead, there is only a message about mixed content. That is likely to lead to a lack of trust in the security of my website.

What is going wrong?

In this article, you can learn how to find mixed content on your website and remove or replace it to ensure trouble-free SSL encryption for your website.

Hint: If you use Managed WordPress, we take care of mixed content automatically and optimize your website for trouble-free SSL encryption.

What is mixed content?

Mixed content occurs if a website that is opened with encryption via HTTPS delivers some content via HTTP without encryption. Typical reasons for mixed content include images, audio and video files, iFrames, CSS and JavaScript files and objects.

Depending on the browser used, the mixed content is displayed in the address bar:

If all of the website content is delivered fully encrypted via HTTPS, this would appear as follows, for example, in the browser address bar:

The Developer tools (console) in Google Chrome or in the Firefox browser provides a detailed overview of which website content triggers the mixed content warning.

In the Google Chrome browser, the developer tools are located in the main menu under: Chrome menu > More tools > Developer tools (shortcut: CTRL+shift+I/cmd–opt–I)

In the Console area, I can now view the details of which content or data causes the displayed mixed content:

A good alternative to the browser developer tools is the online tool Why No Padlock. There, I simply enter my website URL. After a short time, I receive comprehensible, meaningful and very detailed information about which content I have to change to remove the mixed content.

Distinguishing between active and passive mixed content

To get a little bit more technical, there are two kinds of mixed content:

Mixed passive content is web content that cannot change other parts of a website but that is simply delivered. That includes images, videos, audio files and Object sub-resources that are included on a website.

Mixed active content is web content that is part of the “Document Objects Model” (DOM) of a website. This web content can make lasting changes to parts of a website and their behavior. It includes links, scripts (e.g. JavaScript), XMLHttpRequest objects, iFrames, CSS files in which URLs are used and Object data attributes.

Removing and replacing mixed content (WordPress)

In principle, the problem is simple to resolve in two steps in WordPress:

Step 1: Convert all HTTP links in the WordPress database into HTTPS links.
Step 2: Configure a permanent 301 redirect of HTTP to HTTPS in the web server.

Converting HTTP links into HTTPS links

I can use a number of different methods to replace the links in the WordPress database.

Important: Before you make changes to your WordPress database, please make sure that you create a database backup. (Database backup: how to do it)

WordPress plugin: Better Search Replace.
A simple but efficient WordPress plugin that also lets you perform a test run (a dry run) for searching for and replacing objects in the database. You can also select or de-select individual database tables.

PHP script: Database Search and Replace for Interconnect/it
A PHP script that has to be copied using (S)FTP or has to be copied to the webspace to the folder in which WordPress is installed in an order that has to be established beforehand.
I can then open the application via http(s)//wordpress.address/created-folder/.Database Search and Replace provides more features than the Better Search Replace (SFTP upload with FileZilla: how it works) However, the biggest advantage is that it is not dependent on a functioning WordPress installation. That is: If the WordPress database does not work anymore, it is no longer possible to log into the WordPress backend and I cannot access my plugins. However, changes to the WordPress database using Database Search and Replace can still be made without issue.

WP-CLI
WP-CLI is installed on all 1&1 web hosting servers. This practical command line tool makes it easy for me to change links in the WordPress database using Search and Replace.
To do this, I can be accessed via SSH go to my webspace and go to my WordPress installation folder. Example:

At this point, there are unfortunately no general steps for correcting the error.
Due to the multitude of WordPress themes and plugins, developers constantly permanently anchor external resources (e.g. for Google Fonts) in the source text via HTTP. Naturally, changing the link will not help in such a case. A more hands-on approach is then needed for the source text for the theme/plugin.

Another reason may be image or iFrame content, CSS or JavaScript files from external sites that were added after searching for and replacing HTTP links or that are simply not provided via HTTPS.