Fixing WordPress HTTPS Mixed Content Warnings [7-Step Process]

https://wpbuffs.com/wordpress-https-mixed-content/

The internet has evolved. Privacy and security have now become a top priority for most businesses. Even the internet giant, Google has started leveraging more importance to secured sites. This means, if you own an eCommerce store, then this is the right time to add Secure Socket Layer (SSL) protection to your website.

Talking about SSL, WordPress is by far the most widely used Content Management System (CMS) holding more than 28% market share, and hosting millions of eCommerce stores.

 

Therefore, we have decided to guide you through how to add an SSL-certificate by Let’s Encrypt to any WordPress website for protecting user privacy. We will also cover the most common issues that occur while integrating SSL-certificates, including how to address WordPress HTTPS mixed content challenges.

A Common Misconception:

Many users believe that SSL integration secures a website. However, SSL only protects the private data of a user. Nonetheless, you should still learn the steps to secure a site.

1. What is an SSL Certificate?

The term SSL stands for Secure Socket Layer. It acts as the middle-layer between the visitor’s browser and the server where a site is hosted. While browsing the internet, we share personal information and credit card details. This is where SSL helps in protecting our privacy.

SSL protected sites are marked as HTTPS in the address bar with a green padlock icon. This indicates that the transmission of data between the visitor and the server is encrypted. In layman’s terms, SSL makes sure that the information entered is transferred securely and isn’t compromised.

2. Importance of SSL Certificates

The use of SSL certificates is growing rapidly and almost everyone is switching to HTTPS protocol. This is because…

SSL is Now a Ranking Factor

Google has added SSL certificate use as a ranking parameter for it’s SERPs (Search Engine Results Pages) along with site speed. Thus, leveraging an SSL certificate can help boost rankings and improve SEO.

It Decreases Cart Dropout Rates

Having a green padlock icon in the address bar, with a message “Secure Connection,” helps gain visitor trust. Once trust is built, visitors will be confident to purchase your products without any worry of data theft.

It Helps Avoid the “Not-Secure” Warning

Back in Sept 2016, Google Chrome announced that it will start showing a “Not-Secure” warning on pages with no SSL-Certificate.

Here is the summary of the announcement:

Beginning in January 2017 (Chrome 56), we’ll mark HTTP pages that collect passwords or credit cards as non-secure, as part of a long-term plan to mark all HTTP sites as non-secure.

By having an SSL-certificate, your visitors won’t see this warning and will be more likely to trust your site.

WordPress Recommends SSL for Sites

Considering the above-mentioned importance of SSL certificates, Matt Mullenweg, the co-founder of WordPress announced, they will only recommend SSL-Secured WordPress hosting providers.

---

---

3. Types of SSL-Certificates

There are three types of SSL certificates:

1. Domain Validation (DV): The DV certificate simply verifies that you are the owner of a particular domain.
2. Organization Validation (OV): An OV certificate not only verifies a domain but it also proves that your organization is legitimate.
3. Extended Validation (EV): An EV certificate offers the highest level of security assurance to your customers. All applicants pass through a strict vetting process.

Choose one that suits your needs.

If you need more information, here is an entire guide.

That was a little introduction of SSL-certificates. Back to installing SSL-certificates through “Let’s Encrypt.”

4. What is Let’s Encrypt?

Let’s Encrypt is a free domain-level SSL-certificate provider. It is backed by the Internet Security Research Group (ISRG). It is free, automated, and an open certificate authority launched in April 2016.

Renewal of SSL-Certificate

Let’s Encrypt certificate has the default expiry of ninety days. Once expired, you have to renew it. However, there are a few hosting providers like Cloudways, that have a built-in feature to renew SSL-certificates automatically.

Worried, why Let’s Encrypt certificates last for just ninety days? Their site goes into more detail about it, if you’re interested.

Our trusted hosting partners also support Let’s Encrypt SSL installations.

---

---

---

---

5. Let’s Encrypt Installation:

Here is a simple step-by-step process to install the free SSL-certificate on your website or an eCommerce store.

Is Your Web Hosting Supported?

Considering the importance of SSL-security, most web hosting providers including Cloudways support SSL-integration with just a single single-click.

Here’s a complete list of providers that support Let’s Encrypt one-click integration.

If your hosting provider’s name is not available there, then you will have to ask them. Still, if they don’t support the installation then do it manually through the following steps.

Installing Let’s Encrypt SSL Certificate Manually

You will need control of the entire server and the shell access. To get that, follow this guide.

Once you have the access, you will have to install the CertBot on your computer and upload a few files to the server.

But again, this is a pretty complicated process and can take hours to complete. A better approach, if you want to go the manual route is through the SSL for Free website.

Installing Let’s Encrypt SSL through SSL For Free

Considering the complexities involved in integrating a Let’s Encrypt certificate into your WordPress site, the folks at SSL for Free built an online tool that eliminates the struggle. You just need to enter the site URL and follow the steps provided. This way is much easier and only takes about 10 minutes to complete.

6. Configure an SSL-Certificate

But I assume that your respective WordPress hosting provider has a built-in one-click solution and you have already installed the certificate. So, let’s move forward and configure the other necessary steps to integrate SSL certificate properly.

Change Internal URLs from HTTP to HTTPS

Once a certificate is installed, and you want to use HTTPS everywhere on the site. Then, log in to your WordPress dashboard, navigate to Settings > General and replace HTTP with HTTPS on “WordPress Address” and “Site Address” as shown below.

Redirect HTTP to HTTPS

In the above step, every URL of the WordPress site will be served via HTTPS. But, the visitors visiting the site with http://yoursite.com will not be served HTTPS pages. It is because you didn’t set a rule to redirect HTTP to HTTPS. You need to add a rule in WordPress .htaccess file that will force the WP to use the HTTPS protocol instead.

Login to your hosting panel, and on the WordPress directory, right-click on the  .htaccess file and click Edit or create a new one if it doesn’t already exist.

Add the following lines of code:

<IfModule mod_rewrite.c>

RewriteEngine On

RewriteCond %{SERVER_PORT} 80

RewriteRule ^(.*)$ https://www.mysite.com/$1 [R,L]

</IfModule>

Note: Make sure to replace https://www.mysite.com with your site address in the above .htaccess rule.

The above rule is for Apache users. If your hosting provider is using NGINX, enter the below rule:

server {

listen 80;

server_name yoursite.com www.yoursite.com;

return 301 https://yoursite.com$request_uri;

}

Again, make sure, to replace yoursite with your site address and also change the port if your hosting provider has a different one.

For a better understanding the environment of your hosting provider and which rule you should use, contact your hosting provider.

Using WP Force SSL Plugin instead of .htaccess

Many WordPress users are not familiar with the .htaccess file. They can use the WP Force SSL plugin instead, which forces SSL on every page of a WordPress site automatically.

WordPress force_ssl_admin

To force WordPress admin and login pages, you need to add below lines of code in wp-config file. Make sure you write it just above where it says “That’s all, stop editing!”

define('FORCE_SSL', true);

define('FORCE_SSL_ADMIN',true);

The above code will not only force SSL on admin pages, but also on WordPress multisites.

Fix the “Mixed Content” Warning in WordPress

Now, visit your WordPress site and see if everything works as expected.

On some pages, you may notice an info ⓘ icon instead of a green padlock. It indicates that one or more URLs are serving via HTTP on the relevant page. Identify these URLs and fix them, as these WordPress HTTPS mixed content problems won’t be good for visitors.

There is an excellent tool to check Non-SSL pages. It scans an entire site and provides a list of non-https URLs.

To replace the URLs, there is an excellent plugin “Search & Replace” that will help you replace HTTP with HTTPS within the database. Not only this, it will also replace Media URLs to HTTPS.

Install the plugin from within the WordPress dashboard, navigate to Tools > Search & Replace.

Still Have a Mixed Content Warning?

Multiple reasons can cause a Mixed content warning on your site. A few of them are:

• HTTP Links in CSS & JS Files: While writing the code of themes and plugins, developers hardcode HTTP links instead of HTTPS. This can only be fixed manually by digging into the code. Before replacing the URL, make sure the URL works fine with HTTPS.
• Hot Linked Images: Hotlinking is the process of calling images from other resources. If the remote source has HTTPS enabled, you need to use the URL with HTTPS.
• Included CSS & JS Files From Other Domains: Just like hotlinking, if you are calling files from external resources. Make sure you have the working URL with HTTPS.

---

---

7. An Easy Way: WordPress HTTPS (SSL) Plugin

A WordPress HTTPS plugin named “Really Simple SSL” automatically detects and configures your WordPress site to run over HTTPS. The beauty of this plugin is that you just have to enable SSL from your respective provider and everything will be handled by the plugin.

Here are the most prominent features of Really Simple SSL plugin.

• It handles common issues with SSL on WordPress.
• It redirects all incoming requests to HTTPS.
• It enables .htaccess redirect.
• It changes website address to HTTPS.
• It fixes the ‘mixed content’ warning in most of the cases except outbound links.

After successfully adding SSL to a WordPress site. Don’t forget to change settings in Google console and webmaster.

Now we have successfully added SSL certificate to a WordPress site and learned how to fix issues. To understand the entire process of Let’s Encrypt, you can check out their extensive guide on their site.

Final Words

Since the search engine giants added SSL as one of their ranking factors, Chrome started marking non-SSL sites as not-secure, and the co-founder of WordPress started recommending SSL secured sites, there is no reason left to stay insecure.

Start using SSL-certificates on your websites and get ahead of your competitors.

Want to give your feedback or join the conversation? Add your comments on Twitter.

The post Fixing WordPress HTTPS Mixed Content Warnings [7-Step Process] appeared first on WP Buffs.

Source: Security Feed