Google Chrome blocks scripts from GitHub pages and non HTTPS sites

Question

Google Chrome is not loading all the files of my web app and stops any external files hosted on GitHub. Namely the .js, .css links are blocked from viewing when I access the app via HTTPS.

I am building an app on Redhat's Openshift and using Twitter's Bootstrap. I am using Github Pages to host the JavaScript and CSS files. But, it doesn't offer https.

Why is this half load happening and what can I do to fix this?

Answer 1

This is a safety feature of Google Chrome (and other browsers) where it will not load scripts, images and other resources from an HTTP site if you are viewing it from one that is HTTPS.

... If [Google Chrome] detects certain types of content on the page coming from insecure channels, it can automatically prevent the content from loading and you'll see a shield icon appearing in the address bar. By blocking the content and possible security gaps, Chrome protects your information on the page from falling into the wrong hands.

This page has insecure content. - Google Chrome Help

In order to remove the block have all elements on the page served under the same connection type.

When you are viewing a page on HTTPS or SSL and only some of the page is loaded because the JavaScript and CSS files aren't loading, this is most likely the reason.

Fix it by hosting the files over the correct connection or a host that allows for such.

If you come across other websites behaving like this, you can let the website owner know if you feel inclined.