0

I have deployed an app on heroku but the css is not working.

I am using the w3.css framework and I am importing it like this: <link rel="stylesheet" href="//www.w3schools.com/lib/w3.css">

The error I am getting is: GET https://www.w3schools.com/lib/w3.css net::ERR_INSECURE_RESPONSE

I am pretty sure that it is related to the certificate of the site.

But even when I manually accept the "invalid" certificate in the site, I get a 404 error.

Also, from what I see, w3.css only offers its CDN through http: http://www.w3schools.com/lib/w3.css not https: www.w3schools.com/lib/w3.css

So, I just wanted to confirm that this is actually the case and that it is not my fault (not knowing how to load sth over https!)

Finally, it's not a Chrome error (from what I've read around in SO). Firefox doesn't work either.

UPDATE

Just to inform that, as expected, the error was resolved when I downloaded the w3css framework and linked to it locally.

padawanTony
  • 1,348
  • 2
  • 22
  • 41
  • The line 'href="//www.w3schools.com/lib/w3.css"' seems to be wrong. Either a relative URL 'href="/lib/w3.css"' or a absolute one 'http : //www.w3schools.com/lib/w3.css" would make sense to me. – Ralf Bönning Jul 27 '16 at 18:58
  • @rboe This url uses the schema of each page; so either http or https accordingly. You can read more about it here (2nd answer): http://stackoverflow.com/questions/2005079/absolute-vs-relative-urls/21828923#21828923 – padawanTony Jul 27 '16 at 19:02
  • Thanks for your link. I have learned something. – Ralf Bönning Jul 27 '16 at 19:04

2 Answers2

1

As you said, it looks like this is simply related to the certificate of the site (or lack thereof). This is why you are receiving a 404 when you accept the invalid certificate because the https:// version of the site does not exist.

If you still want to deliver the asset from a CDN, you could either put the file on your origin server and accelerate it via the CDN or store it directly on the CDN's storage cloud (if applicable). Here is a good list comparing various CDN providers http://cdncomparison.com/

CodyA
  • 429
  • 3
  • 5
  • So, if I understood correctly, you can store your files on a CDN cloud that will deliver it to the client (browser) through https, right? Which means that you would have to download the file (that you were supposed to take from another CDN) and upload it to a CDN which offers https? – padawanTony Jul 28 '16 at 14:00
  • 1
    That is correct. As long as the CDN you are moving to offers some sort of HTTPS solution such as Let's Encrypt or custom SSL you can deliver those assets over https:// – CodyA Jul 28 '16 at 14:12
0

Modifying the response to make it more accurate...

A couple of issues here:

First. Beware that this file is not available via HTTPS as it returns a 404 error. To download the file, you can add the http:// protocol to the URI to use HTTP instead of HTTPS.

Secondly and most importantly what will stop you from linking the library from your webpage; this library is not available to be embedded publicly. The web server is not responding with the appropriate CORS headers. In this case the Access-Control-Allow-Origin: * header is missing in the response:

< HTTP/1.1 200 OK
< Cache-Control: public,max-age=3600,public
< Content-Type: text/css
< Date: Mon, 29 Aug 2016 01:27:41 GMT
< Etag: "6213abc99edd11:0+ident"
< Last-Modified: Wed, 03 Aug 2016 15:14:31 GMT
< Server: ECS (sea/55DD)
< Vary: Accept-Encoding
< X-Cache: HIT
< X-Powered-By: ASP.NET
< Content-Length: 28929

Your best bet is to download the file and link it locally from your own server.

MikeBoss
  • 375
  • 1
  • 9
  • Thank you for your response. Agreed on the second argument. As for the first, the protocol is missing on purpose. You can read more here: http://stackoverflow.com/questions/2005079/absolute-vs-relative-urls/21828923#21828923 – padawanTony Aug 29 '16 at 12:47