Firebase hosting - Can not load Bootstrap

Question

Im using Bootstrap and AngularFire for my Web project. Everything ok but when I host it on Firebase.com. The layout has changed

Errors:

Mixed Content: The page at 'https://......firebaseapp.com/' was loaded over HTTPS, but requested an insecure stylesheet 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'. This request has been blocked; the content must be served over HTTPS.

Mixed Content: The page at 'https://......firebaseapp.com/' was loaded over HTTPS, but requested an insecure script 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'. This request has been blocked; the content must be served over HTTPS.

What happens with Bootstrap? Thanks in advance!

Answer 1

Firebase uses HTTPS to serve content. As you can see from the error, you are referring the content to be loaded over HTTP. Though this should not be happening, but it could be one of recent features of Chrome where they block, non-secure requests over a secure channel.

In order to solve it, you should change the URLs in your code to point at HTTPS versions of Bootstrap CDN.

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js

Further Read: https://support.google.com/chrome/answer/1342714?hl=en

Answer 2

I was having the same issue: you just need to make the http to https in the bootstrap link inside the code. That will resolve the issue.