HTTP Vs HTTPS Blocked Loading Mixed Content

PressTigers

HTTP Vs HTTPS Blocked Loading Mixed Content

September 1, 2015
Leave a comment

HTTPS encrypts and decrypts user’s page requests. It works under HTTP layering and basically it is the use of Secure Socket Layer (SSL) or Transport Layer Security (TLS) as a sub-layer. When you move your website’s URL from simple HTTP to HTTPS (or install SSL certificate), this might cause some problems on your website and your data might not load properly.

Reason Of Blocked Loading Mixed Content:

“Blocked Loading Mixed Content” is usually caused due to the conflict of HTTP and HTTPS content. There is a possibility that you have some hard-coded links in your code which are requesting some resources (JS, CSS and images etc.) from HTTP URLs while your website is working on HTTPS. This will cause a conflict between HTTP and HTTPS. As a result of this conflict, your website won’t load those resources at all. It will completely skip them and you’ll witness broken stuff on your web page.

How To Fix This Conflict?

The best solution to avoid this conflict is that you put a check in your code where you use is_ssl() function to see if SSL is active on your website or not. If it is active, use HTTPS in source’s links and if it is not active then use HTTP:

$http = (is_ssl()) ? 'https' : 'http';

$url = $http.'://presstigers.com';

$http = (is_ssl()) ? 'https' : 'http';

$url = $http.'://presstigers.com';

In-case you didn’t write the code or you don’t know anything about coding then you can simply find the link in code and replace HTTP with HTTPS. Usually this is not a recommended practice, because your changes will be gone for example, you have made these changes in a third party plugin or theme and you update it on later stages. You have to make sure that you replace URL of every single resource being loaded in your code especially where a hard-coded link is used. After implementing this practice, you’ll see that your website has resolved this issue.

If you have done it correctly, you’ll also see a No Conflict sign in your URL depending upon the browser you are using (e.g. Firefox and Chrome show something like ). You have to restart your browser and clear its cache after implementing this practice.