4

So the javascript used to work on my github pages site but it doesn't work anymore after I delete the repository and tried to re-uplaod the project with some changes. Here is the repo. Here is the site.

Austin Magnuson
  • 103
  • 1
  • 1
  • 4

2 Answers2

21

You are serving the site over HTTPS but trying to load jQuery over HTTP. This is not allowed.

<!-- wrong -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

Replace http with https and you should be good to go. This error is easily discoverable if you open the Javascript Console in your browser (usually under F12).

<!-- correct -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

But what about protocol relative links?

You could also use this once-popular syntax:

<!-- meh -->
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

but it's cargo cult at this point. Spelling out https://cdnjs.cloudflare.com/ is better.

Here's why:

Some advice from Paul Irish, one of developers behind Chrome:

If the asset you need is available on SSL, then always use the https:// asset.

It’s always safe to request HTTPS assets even if your site is on HTTP, however the reverse is not true.

Community
  • 1
  • 1
Kos
  • 70,399
  • 25
  • 169
  • 233
  • 2
    The answer by @Hitmands is much more protocol agnostic and works better (can serve both `HTTP` and `HTTPS`) – StephenG Aug 09 '16 at 15:34
  • @StephenG in what way does it work better? see my comment on that answer. What am I missing? – Kos Aug 09 '16 at 15:54
  • 1
    It follows the protocol that is used for the serving site, so if `HTTP` is used to serve the main page, `HTTP` will be used to serve the javascript. Same for `HTTPS` By making it protocol agnostic, the site can react to being served over different protocols without code changes – StephenG Aug 09 '16 at 15:57
  • 1
    @StephenG why is that good or helpful for CDN code? if you always ask for https, everything works just as well + you're sure you really download the code from `cdnjs.cloudflare.com`. Admit it, you just think `//` looks neater :-) – Kos Aug 09 '16 at 19:01
  • Edited my answer and added some references. See also http://stackoverflow.com/questions/28446314/why-use-protocol-relative-urls-at-all – Kos Aug 09 '16 at 19:15
  • So I actually got it working on every page except for the index.html. Thank you guys so much for the feedback it has been a huge help. – Austin Magnuson Aug 09 '16 at 21:28
  • Trying to set the security of the transport/session layer (SSL/TLS) through an application layer modification (HTTP) doesn't make sense. A HTTP served page with HTTPS assets can just as easily be MITM to served HTTP assets, or completely different content. The security of the original page is what matter. That sets the security of all of the subsequent assets. It's also not always safe to request HTTPS assets over HTTP, depending on network configurations. A user might not be able to get SSL/TLS sessions because of firewalls, breaking the page – StephenG Aug 09 '16 at 23:45
3

when you work with non specified http protocols could be a good idea don't put them in any request... so, instead of http:// use only //.

console.log("$", window.jQuery)
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
Hitmands
  • 13,491
  • 4
  • 34
  • 69
  • 3
    I intentionally avoid this syntax. If the CDN offers `https` then you should use it even if your site is on HTTP. Also minor nitpick - protocol agnostic paths don't work with `file://` – Kos Aug 09 '16 at 15:53