How to Fix WordPress Mixed Content SSL Warnings (2022)
Protecting user data is extremely important when trying to build a functional website. Secure Socket Layer certificates add a layer of protection to your website, reducing the possibility of attacks. However, many people face many issues when integrating SSL certificates into their applications. This article gives an overview of SSL how to integrate SSL certificates seamlessly into WordPress sites.
What is SSL?
Websites are often vulnerable as they contain sensitive user data. It can be credit card details, personal information, bank details, etc. Online businesses and portals need to create an environment where users can share their data.SSL certificates help create an encrypted connection and build this foundation of trust. This is the middle layer present between the browser and the server which receives data.
A Public and private key work together to create an encrypted connection. There is also a subject that identifies the certificate owner. SSL sites use the HTTPS protocol. They can be identified by the padlock symbol next to the address bar in the browser. SSL initiates a handshake between the devices to ensure that both devices are who they claim to be. Sent data is also digitally signed to maintain data integrity. Certificate authorities (CA) are responsible for issuing SSL certificates.
Types of SSL certificates
SSL certificates are classified into numerous categories.
Depending on the kind, a single certificate can apply to a single or several websites:
- A single-domain SSL certificate applies to only one domain (a "domain" is the name of a website, like www.cloudflare.com).
- Like a single-domain certificate, a wildcard SSL certificate applies to only one domain. It does, however, contain the domain's subdomains.
- A wildcard certificate, for example, may cover www.cloudflare.com, blog.cloudflare.com, and developers.cloudflare.com, but a single-domain certificate may only cover the first.
- As the name implies, Multi-domain SSL certificates are used on numerous unrelated domains.
SSL certificates are also available in a variety of validity levels:
A validation level is similar to a background check in that it varies based on the depth of the check.
Domain Validation: This is the most basic and least expensive type of validation. All a company has to do is demonstrate ownership of the domain.
Organization Validation: This is a more hands-on method in which the CA contacts the individual or firm requesting the certificate directly. These certifications are more trustworthy in the eyes of users.
Extended Validation: Before an SSL certificate can be given, a company must undergo a thorough background investigation.
Why are SSL certificates necessary for WordPress applications?
Search engines use an index-based ranking to display results to users. Google has included HTTPS as a parameter to rank websites. Hence, having an SSL certificate will improve visibility ranking and improve SEO.
This also improves visitor trust. Customers will feel more confident about purchasing and are less likely to abandon products. The risk of vulnerabilities and data theft seems to be less.
HTTP throws security warnings when there is no SSL certificate on the website. This may cause visitors to be warier, and they might quickly click away.
How to obtain an SSL certificate?
These methods are specifically for WordPress sites.
1. Obtain an SSL certificate through popular certificate providers. Let's Encrypt is a free domain-level SSL certificate provider. Integration is simple and mainly involves a single click. If the host does not offer single-click installation, you will have to manually add a certificate to the site. You need access to your server to be able to do this.
2. Use an online tool that eliminates manually installing a certificate. All you have to do is enter the site URL and bingo. The whole process takes about ten minutes to finish. SSL for free SSL checker are some examples.
Integrating the certificate into the website does not guarantee that the browser will instantaneously not show the not secure popup anymore. Often due to misconfiguration of settings, this message can still be displayed. Not configuring the settings properly also leads to mixed content warnings which are further explained.
WordPress mixed content warnings
If you successfully installed and set an SSL certificate on your WordPress site, you should see the padlock icon in the browser address bar when you visit it.
On some pages, though, you may notice info with an I symbol instead.
A mixed content warning appears in users ' browsers if your WordPress site runs HTTPS and HTTP scripts. The text of this error may differ based on the browser you're using. In most circumstances, though, it will mark your site as "not secure."
Common examples of mixed content warnings
Your connection to this site is not entirely secure."
"Connection is Not Secure"
"Be careful here. Some content on this page is not encrypted."
"Only secure content is displayed."
Although your site may be secure and is accessible and functioning, a WordPress mixed content warning means some elements or assets on the page aren't protected. More specifically, it means some URLs are serving content via HTTP rather than HTTPS
What causes this error?
Below are some reasons why you might be getting this error.
- There are still HTTP links in your CSS and JS files. While hardcoding themes or plugins, the link may contain HTTP.
- While loading images from other sources, the image might have a link that has HTTP hardcoded into it.
- External script links are included in your CSS and JS files. As with hotlinking, WordPress may display a mixed content warning if you call files from non-HTTPS-enabled external sites.
Mixed content errors are of two types: active and passive. Active, diverse content refers to web pages served via a secure HTTPS connection containing HTTP scripts. Image, video, and audio data loaded through HTTP are examples of passive mixed content.
How to identify this error
Here are a few ways to quickly identify and fix mixed content errors on your WordPress site.
Use Chrome Dev tools- You have to identify which assets are loading using HTTP. Dev tools will help in quickly identifying this. Open your website in Google chrome. Right-click on the page and select inspect. In the console tab, anything that has been identified as not secure will be listed along with warnings. One or two assets loading with HTTP can be fixed manually. If any alerts are shown, using an external SSL checker would help. These tools crawl over your pages and show pages with insecure content. Examples of such tools are JitBit and WhyNoPadlock. You have to enter your website URL.
How to fix mixed content errors
If you receive mixed content warnings on your WordPress site, you should fix them as quickly as possible. These issues can harm your site's User Experience (UX) and SEO, in addition to making it look untrustworthy to visitors. Here is a checklist to fix mixed content warnings
1.Confirm the validity of your SSL certificate
As previously explained, installing an SSL certificate is essential for safeguarding your website. However, it is equally critical to ensure that it is current and genuine. Let's Encrypt certificates are valid for ninety days by default. You must renew yours regularly for it to continue to work effectively. A handful of hosting companies offer an automated SSL certificate renewal function built-in. This, however, is not always the case. As a result, it may have expired unless you recently installed an SSL certificate on your website. While this is unlikely to be the source of the WordPress mixed content warnings, it is worth investigating.
To check the status of your SSL certificate:
- Click the information symbol that displays in your browser's address bar where the padlock should be.
- Choose Certificate (Valid).
- If your certificate has expired, contact your hosting provider or the Certificate Authority to renew it.
2. Change all internal URLs to load over HTTPS
If you're still getting WordPress mixed content warnings after installing a valid SSL certificate, it's possible that the integration wasn't set up correctly for HTTPS encryption.
As a result, the next step is to switch your internal URLs in WordPress from HTTP to HTTPS. To accomplish this, log in to your dashboard and go to Settings > General: In WordPress and Site Address, replace HTTP with HTTPS. When you're finished, go to the bottom of the screen and click the Save Changes button. Every URL on your WordPress site should now be delivered via HTTPS.
Users who reach your site using a link that begins with 'http://yoursite.com' or who input "HTTP" into their browsers while browsing to your site, on the other hand, will not be delivered HTTPS content. As a result, you must create a rule to redirect HTTP to HTTPS.
To check the status of your SSL certificate:
- Click the information symbol that displays in your browser's address bar where the padlock should be.
- Choose Certificate (Valid).
- If your certificate has expired, contact your hosting provider or the Certificate Authority to renew it.
3. Add a rule to redirect to HTTPS
Another issue that might be creating WordPress mixed content warnings on your site is if you have never used redirects to automatically move users to the protected version of your pages. To do so, add a rule to your site's.htaccess file that forces WordPress to utilize HTTPS.
This may be done manually or using a plugin. If you're not familiar with the .htaccess file, you can use a plugin such as WP Force SSL instead. This plugin automatically imposes SSL on all pages of your WordPress site. After installing and activating it, go to Options > Force SSL from your dashboard to see its settings.
4. Update links in content and database
The next step is to update all links having HTTP with HTTPS in your WordPress database and content. An efficient method is to use a plugin like Better Search Replace. After you've installed and activated it, go to Tools > Better Search Replace from your WordPress dashboard. In the Search for box, enter the HTTP version of your site (http://yourdomain.com) and the HTTPS version (https://yourdomain.com) in the Replace with the field. Select all tables
and deselect the run/ dry option. When you're finished, go to the bottom of the screen and select the Run Search/Replace option. There should be no more WordPress mixed content warnings when you clear your browser's cache and return to your website.
If you liked this post, you'd love Helpbot's WordPress website administration and support services, which are available throughout the year! Join forces with a team that provides comprehensive premium WordPress support services. Our skilled engineers can help you with anything from performance optimization services to limitless website modifications, security, 24/7 support, and even white-label site administration for agencies and freelancers.
