How to find Mixed Content and Fix it in WordPress?

0
101
Wordpress

There has been a relentless crackdown on HTTP websites by the search engines. Running sites over HTTPS is now a primary requirement if you want to rank high in the SERPs. Being on HTTPS builds trust and, at the same time, that your website is given preference over non-HTTPS websites. Google has decided to block mixed content to make browsing more secure. Successive Chrome updates will block mixed content if they fail to load on HTTPS. You can use Wildcard SSL to protect your website from such search engine action.

 (Source: https://www.howtogeek.com/443032/what-is-mixed-content-and-why-is-chrome-blocking-it/)

Such a posture from Google will effectively minimise the risk from HTTPS websites too.

What is Mixed Content Error

When we are shifting the website from HTTP to HTTPS, we must take care that all the assets are loaded onto HTTPS. Sometimes, the configuration may not be done correctly, and all the resources may not be loaded over the HTTPS connection. In case the website continues to load both HTTP and HTTPS content and images at the same time, it will lead to mixed content error. 

Due to an error in configuration, the images and the links might continue to upload over an HTTP connection. The error message that you could be getting is as follows.

 

(Source: https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content)

Different browsers may have different ways of showing the error message, but the essence remains the same. If a mixed content is rendered, it could harm the users as it could lead to a man-in-the-middle attack.

What are the types of mixed content?

There could be cases that the webpages are getting loaded over HTTPS, but the scripts are getting loaded over an HTTP connection. It is a severe loophole as hackers could intercept the connection and wreak havoc to the site. This is named as active mixed content. 

It can also happen that various files; viz. image, audio, video, etc. are getting loaded over HTTP rather than HTTPS. This scenario is named passive mixed content.

How can you find mixed content?

While you may have opted to move to an HTTPS platform, wrong configuration may render the whole process useless by leaving crumbs of mixed content. You must first identify the problem before searching for a solution. We will now discuss a few ways to find mixed content.

Use a plug-in

You can use a plug-in to help you. There are many like WordPress HTTPS and Really Simple SSL that can help you. After installing the plug-in, you need to activate it. The plug-in will do the rest. 

Testing it online

Various websites can help you with detection.; e.g., Why No Padlock, Missing padlock, etc. Just enter the URL, and the site will return whether there is any mixed content on the website.

Doing it manually

If you are using Chrome, you need to right-click on the page and click on the “Inspect” tab (Or. “Control” + “Shift” + ”I”). It will show the mixed content areas through a warning.

Issues you can face due to Mixed Content

It may seem all is fine if you continue to have mixed content on your site. However, Google has started to discriminate against mixed content and plans to weed out through its updates.

The Chrome 79 update will unblock mixed content and auto-upgrade HTTP to HTTPS. The subsequent update – Chrome 80 will automatically upgrade the HTTP connection to a secure HTTPS. If the content fails to load over the HTTPS connection, it will be blocked. There is a “Not Secure” warning in the browser omnibox also. Chrome 81 will auto-upgrade mixed content to HTTPS and block them by default if they fail to upload in HTTPS.

The reason for Blocked Mixed Content

Due to errors in configuration, HTTP content like image files, JavaScript or CSS can send a request in an HTTPS web page. Browsers block this. While migrating to HTTPS, some HTTP links can get carried over. Some examples are:

  • Embedded HTTP video scripts
  • Hard-coded URLs for images
  • HTTP link for external scripts
  • Absolute paths for plug-ins

How can mixed content errors be fixed?

You must install Wildcard SSL Certificate and redirect all HTTP resources to HTTPS. To check for errors, you must launch the Chrome Dev Tools and visit the Console tab. It shows mixed content errors. To start with, you must verify whether all the URLs are on HTTPS. When checking your HTTPS versus the HTTP web page and there is a warning, you may either remove the resource or include the resource from some other host. In the last step, you may change the URL to HTTPS and save it.

There is another way to do this. You can go to the WordPress settings and then to the General tab and make changes to the Site Address URL and the WordPress URL. Make the default URL as HTTPS. 

While this may be time-consuming, you can also use plug-ins like the Really Simple SSL plug-in or the SSL Insecure Content Fixer. The plug-ins have tutorials to help you with the steps to be taken to fix the mixed content errors. You may also opt for the Database Search and Replace plug-in also.

Conclusion

Having mixed content on your website can be damaging to the trust of your website. Search engines will block the mixed content in keeping with the goal for risk-free browsing. To start with, you must procure Cheap Wildcard SSL certificates and ensure all HTTP resources are migrated to HTTPS. Still, if there is any mixed content, you can opt for the measures suggested in this article.