Shadow

Fix Mixed Content Error SSL (WordPress Website) Easily

Few year back very few people asked: “How to Fix Mixed Content Error?”. The SSL protocol was not considered an essential aspect of online business. The reason can be lack of awareness or may be fewer cases of internet security threats.

Fix-ssl-mixed-content-error-banner

Today, even new users are quite aware of the fact that data encryption is done during client-server interaction and authentication provided by CA (Certificate Authority) that makes every transaction safe, secure, and fast.

If you have not installed the SSL certificate then it’s the right time to build an online reputation and secure your assets. The installation process is simple.  You can read our blog post to learn an easy method to do it yourself. Post installation, you will be able to see a green lock / green bar in the browser.

People, who install the certificate for the first time and those who frequently do, both face a very common hitch known as ‘mixed content warning ’.

This insecure warning is thrown by the browser which is caused mainly due to resources like images, CSS and, JavaScript being called over HTTP protocol. Once migrated to HTTPS all external links and site assets should work in a secure environment.

The mixed content issue can be daunting if you try to resolve it by using anonymous methods. There are several Plugins and tools available nowadays that makes your task easier.

I personally don’t believe working in a complex way, making life more difficult. So, in this post, I am discussing a very simple approach to handle such issues. Even a newcomer can do it efficiently.

After working with several clients for SSL installation, fixing mixed content warning and permanent redirection projects I have derived this practical technique that makes the job easier. Have fun and work on the issue attentively.

Prerequisite:

  • Website built on WordPress platform
  • The old web address not updated to new ‘HTTPS’
  • SSL certificate installed on Apache Server (cPanel Hosting)
  • Chrome browser error console
  • Keep a backup copy of website


How to fix mixed content error?

Chrome developer console is a great tool to identify the mixed content error and warning. This will be our base tool in this fixing process. All major browsers Firefox, Internet Explorer and Safari have error consoles.

You can easily locate the number of warnings in the window. There are many tabs with purpose. Here we will deal with security, network, console and sources tabs.

Go to the security tab and checkout SSL certificate information and warning of insecure resources. Use new ‘HTTPs’ address in the browser before opening the developer console.

mixed-content-error-screenshot

The security tab will give you details of each resource which is being called over HTTP instead of HTTPS.

Your job will be to pick each error one by one and fix it. Start with image files and move on to fonts, scripts and other errors.

Fixing Image Link

The posts linked to WordPress media library will automatically update to HTTPS once the web address is updated to (https://www).(website name).(extension).

But if you have manually added the links in widgets or posts then it will not update automatically. You need to add ‘S’ (after ‘HTTP’) in each image link.

If there are few mismatch cases then you can easily do it by finding the resource name from the console and changing the link to HTTPS on the WordPress website.

Congratulations! The issue is fixed.

For unresolved cases there will be two scenarios and best solution to resolve:

SCENARIO -1

Pointer: Instead of hosting images on own server it is being called from an external source.

Solution: First check if the external resources are available over HTTPS protocol. If not, download the images and host on your website. Link and relax. In case, the images can’s be hosted (likely to violate copyright terms), consider replacing the image with a new one.

SCENARIO -2

Pointer: You have a big website with hundreds of mismatch cases.

Solution: Install a free Plugin from WordPress repository and the magic will be done by the Plugin. It simply removes HTTP and adds // before www at all instances; your browser will load resources using HTTPs protocol. For external images, you need to follow scenario-1.

Once you have done with these exercises you will see that green lock pad will appear in the address bar. Few more steps left that will complete the process (do not skip these steps):

  1. Update the site address to HTTPs from WordPress Setting > General option.
  2. Save permalinks from WordPress Setting > Permalinks.
  3. Add permanent 301 redirection codes in .htaccess file located on the server.
  4. Add define (‘FORCE_SSL_ADMIN’, true); code in the WordPress config.php file.
  5. Check the compatibility of HTTPS in all major browsers.

All set and you are ready to build a reputation and have peace of mind that all your transactions are being done using SSL protocol.

Some Troubleshooting Questions

What to do if  I am still not able to fix mixed content error?

Install a search and replace database Plugin and identify the HTTP links. Replace the images file links with HTTPs. If the theme has some hardcoded external CSS or JavaScript references (HTTP resource) then you need to consult the site developer to fix the issue.  Be careful not to replace all HTTP files in database otherwise the site will break.

What to do if the website gets deformed?

Restore the website from cPanel dashboard. You can also use Plugin or manual method to restore website to the original state.

Final Verdict

SSL certificate is a good thing to incorporate in your website. Even if you don’t have an E-commerce website, you can still install the certificate. You can easily fix mixed content error if you keep calm and identify the non-HTTPS resources carefully.

If you don’t want to face this issue after SSL installation, consider adding certificate during the initial stage of the website. Do not use full path while referring any media files. Avoid using external resources on the website.

Some free tools that will help you in the process:

SSL Server Test: It will show comprehensive details about the certificate based on elements like certificate, protocol support, key exchange and cipher strength. What score did you get?

Insecure Resources: This tool will dig into the site and pull insecure resources calling external link, images, JavaScript, and CSS.

301 Permanent Redirection: If you are not able to add redirection codes to .htaccess file then you can take help of this free tool to do the job for you.

After migrating from HTTP to HTTPS do not forget to add your site to Google search console and other webmaster tools and also update sitemap, social references wherever applicable.

If you find this article useful, consider sharing with your friends and family.

Leave a Reply

Your email address will not be published. Required fields are marked *