How to load css files via http on a https site.

Question

I am developing a site and recently assigned an SSL certificate to this: previously a CSS framework (w3css ) loaded, but now I am getting an error: couldn't load mixed content. The site is called https://genderandwork.org. As far as I can see the error is that chrome (I'm trying to load the site in the latest version of chrome) doesn't want to load HTTP content on an https site.

Any help would be appreciated.

You have actually not changed this in nearly half a year now — Luca Kiebel, Nov 11 '17 at 23:27

score 3 · Accepted Answer · answered May 20 '17 at 14:41

3

Most modern, up-to-date Browsers don't load resources over HTTP if the Document is accessed over HTTPS, this is to keep users from making the connection only partially encrypted. Read more on that at MDN

You should change the src-attribute of your <link> elements with the stylesheets to make the request over HTTPS, like this: <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

answered May 20 '17 at 14:41

Luca Kiebel

9,790
7
29
44

and as @HappilyDrunk wrote, you could also upload the files to your server and serve them over HTTPS there! – Luca Kiebel May 20 '17 at 14:42

score 2 · Answer 2 · answered May 20 '17 at 14:07

Well, mixed content errors occure when your site uses an valid certificate and you try to import resources from an unsecure host.

Luckily, w3schools supports SSL-certificates.

You could eighter append a "s" to yout href-attribute like:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

Or you could upload the needed files to your project and import them locally.

How to load css files via http on a https site.

2 Answers2