How to Fix Mixed Content Error in WordPress Quickly (SSL/HTTPS)

With the growth of e-commerce, website privacy and security have become crucial concerns for most online businesses.

Site visitors, wary of compromising their data, are less likely to engage in online transactions without a bona fide safety assurance.

Unless we want to risk losing clients, we need to obtain an SSL certificate.

Another incentive for securing websites is that an SSL certificate gives the secured websites more leverage in search engine results.

Google and other search engines show a marked preference for sites that have an SSL certificate.

An SSL compliant website will show a green padlock icon and an https:// in the address bar of the browser.

On non-SSL sites, we will see an http:// and an info icon or a broken padlock icon.

For websites hosted on WordPress, installing an SSL certificate is a quick and easy process.

WordPress’s built-in one-click option lets us complete the installation in a matter of a few minutes.

However, after integrating an SSL certificate in our website, we may encounter a Mixed Content error message.

It indicates that we failed to configure the SSL integration properly.

It may not necessarily affect the functionality of our website, but it might create a poor impression on visitors.

Faced with warning messages of insecure content from their browser, they may baulk from engaging on our site.

It is, therefore, essential to fix the Mixed Content error on our website as soon as possible.

Before doing that, though, let’s go over the basics.

Understanding HTTPS

HTTPS is Hypertext Transfer Protocol Secure, and it is used to carry out encrypted and therefore secure online communication.

We can safely transmit sensitive information such as passwords and credit card details via HTTPS.

For enabling HTTPS browsing, we can use a free SSL certificate or purchase one and install it on our web server.

The fundamentals of an SSL certificate

SSL stands for Secure Socket Layer.

We can install an SSL certificate to protect private user data. It does this by acting as a protective layer between the server that hosts the website and the user’s browser.

The user data that is transmitted from the browser to the web server and from the server to the browser is encrypted and transferred securely.

There is thus no risk of compromising user privacy.

It makes an SSL certificate a must-have for ecommerce websites.

Since they require users to register, to log in, and to use payment gateways, they must safeguard this sensitive information.

Depending on our requirements, we can choose a Domain Validation SSL certificate which verifies that we do indeed own our domain name, an Organization Validation SSL certificate that verifies domain ownership and organizational validity, and an Extended Validation SSL certificate that rigorously inspects all applicants and guarantees the highest level of security.

Free or Paid SSL Certificates

We can get free SSL certificates from certificate providers like Let’s Encrypt and Cloudflare, or we can opt for paid versions.

The benefit of paid SSL certificates is that they are valid for one year, and we can easily renew them.

They are a better option in case we are going to carry out a lot of transactions from our site.

The free versions may not have as many features and are likely to be valid for a shorter period of time.

The free SSL certificate from Let’s Encrypt, for instance, expires after 90 days and renewing it will not be an automatic process.

You will have to do the renewal manually.

Not all hosting providers have automatic renewal features.

If this isn’t a problem and we don’t need sensitive user data for transactions, the free version of the SSL Certificate is a workable option.

Installing the SSL Certificate

We can install the selected SSL certificate on our WordPress website using the instructions given by our web hosting provider.

If we are using a content delivery network (CDN), we must configure the HTTPS as per the CDN’s instructions.

A CDN has servers located all over the world. When we upload our content to their server, they distribute the copies of that content to all their servers.

When someone accesses our website, the server identifies the location of their browser.

It then delivers our content from the CDN’s server that is nearest to the user’s location.

Using a CDN thus saves time in transmitting the content.

Different CDNs may require different configurations. Cloudflare, which is both an SSL provider and a CDN, configures SSL as Full or Full (strict).

For the Full SSL, we require an SSL certificate on our web server, but Cloudflare won’t validate it.

If we choose the Full SSL (strict), we must install a valid SSL certificate signed by a trusted certificate authority.

Both Full SSL and Full SSL (strict) encrypt the connection between our website visitors and Cloudflare and from Cloudflare to our server.

Once we enable the configuration, our site will open in the HTTPS mode, and visitors will see the SSL lock icon in their browser.

Sometimes, however, the configuration may not go as expected.

We are likely then to see broken images and a warning for Mixed Content.

Understanding Mixed Content

The Mixed Content warning appears when the web pages that load over the HTTPS protocol also load content sent over the HTTP protocol.

We may also see errors like insecure content, but some browsers tend to block such content altogether.

The browser does not display these errors if the webpage loads over HTTP and additional content loads over HTTPS.

The browser expects all the data to load over the HTTPS protocol since this guarantees that it is encrypted and secured.

The content sent over HTTP is insecure and there is a risk that third parties could potentially access and modify it.

A website with such Mixed Content, therefore, becomes vulnerable, and this is particularly detrimental to ecommerce sites.

Although our website may have harmless content, the warning notice of Mixed Content could make users think that it has malicious intent.

They might then leave the site and not visit it again.

So, it is imperative that we act to prevent this warning from being displayed by the browser.

Signs of Mixed Content in a web page

1. If the browser address bar shows the green padlock and https://, it means that our website is secure. There is no Mixed Content on it.
2. We may see an info icon instead of the green padlock on some pages. It indicates that the pages may contain content loaded over HTTP. The pages, therefore, have Mixed Content.
3. When we view our website in the Firefox browser, the address bar may display the padlock icon with a red line across it. It means the webpage contains Mixed Content, but Firefox is not blocking any active Mixed Content such as script files. If we see a grayed padlock with an orange triangle, it means Firefox is not blocking passive Mixed Content like images.

Fixing the Mixed Content errors

If there are only a few errors, we can correct them manually. We will also need to use the manual option to correct HTTP links in CSS and JS files.

We can use WordPress plugins if there are many Mixed Content errors.

Popular plugins include SSL Insecure Content Fixer, Search & Replace, and Really Simple SSL.

In the first place, we need to log in to our WordPress account and find the Plugins on the admin dashboard.

After clicking on Add New, we can search, install, and activate the plugin of our choice.

• SSL Insecure Content Fixer plugin

To use this plugin, let’s head for Settings to enable the plugin and select the Mixed Content that needs fixing.

We can choose from any of the plugin’s five error-fixing configurations:

• Simple
• Content
• Widgets
• Capture
• Capture All

After selecting a configuration, we can go with the default standard WordPress function for HTTPS Detection.

If we are using Cloudflare or any other CDN, we can choose a CDN option.

Once we have saved our choice, the plugin will shift into gear and fix the Mixed Content errors.

The plugin will convert “http://” or “https://” to the “//” relative protocol for all the website image, stylesheet, and script links.

It will ensure that the website content will load over the HTTPS protocol if the main page loads over HTTPS.

• Search & Replace plugin

This plugin will search for HTTP throughout the database and replace it with HTTPS.

It will also convert image and video links from HTTP to HTTPS.

• Really Simple SSL plugin

With this plugin, we can configure our WordPress site so that the server can deliver its content over HTTPS.

The plugin detects the Mixed Content and fixes most of it.

Conclusion:

Fixing Mixed Content errors manually or with plugins can take up time.

Rather than that, it might be a better idea to try and avoid these errors as much as possible.

It will help to host websites with WordPress or other reputable hosting providers that configure SSL certificates specifically for WordPress websites.