jQuery code works on http://jsfiddle.net but does not work on https://jsfiddle.net

Question

I built the jQuery code in jsFiddle.net to test and it worked properly, however when sending the link, provided by jsFiddle, with https, the code stopped working.

Can anyone explain why? I’m using Google Chrome version 42

Code working:

jsFiddle - HTTP

The same code in jsFiddle with https (is not working):

jsFiddle - HTTPS

Thank you!

Answer 1

When you load the page into HTTPS jsFiddle wants to ensure that the loaded content is also in HTTPS, but the external code you are loading is in HTTP. So jsFiddle does not load this code and hence "does not work".

If you open the console you see some mistakes. One of them $(...).mask is not a function is because the method does not exist since the external file was not loaded. The other is exactly explaining what I wrote above:

Mixed Content: The page at 'https://fiddle.jshell.net/evertramos/ag9p2tvj/6/show/' was Loaded over HTTPS, but requested an insecure script 'http://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js'. This request has been blocked; the content must be served over HTTPS.

If you change this external reference to HTTPS, the url will be: https://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js, then it will work.

Or as @Onosendai pointed out: "if the reference is amended to //igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js (ignoring the protocol) the code will work in the environment; the browser will try to solve the correct protocol".

jsFiddle: https://jsfiddle.net/jbbxg3m6/