HTTPS and external (CDN) hosted files?

Question

I have a page that references a couple of externally hosted javascript files - namely, jQuery on Google and YUI using YUI Loader.

The trouble is when I access the page via HTTPS the browser complains of mixed insecure content, since the external javascript files are being accessed using http instead of https.

What's a good way to deal with this, accessing the external jQuery and YUI Loader objects with HTTPS?

Solution 1

Assuming the CDN provider has an https version, you can use protocol-relative URLs.

For example, instead of:

http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js

...you can use:

//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js

The browser will use the page's protocol to try to obtain the file. On non-secure pages, http. On secure pages, https.

Google also makes YUI Loader available through its CDN. So for YUI this works fine:

//ajax.googleapis.com/ajax/libs/yui/2.8.0/build/yuiloader/yuiloader-min.js

...in both http and https contexts.

Solution 2

Google hosts them under https

https://ajax.googleapis.com/ajax/libs/yui/2.8.1/build/yuiloader/yuiloader-min.js

https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js