content distribution network (CDN): Loading CSS or Javascript library

Question

I am using knitrBootstrap for some projects and I am beginning, to learn JQuery (Javascript) and CSS for some modifications of the generated pages. I also understand, that usually the CSS files and scripts are placed in separate files and loaded from the same domain (or locally) to an HTML document, but when I read the documentation of both libraries I see that they can be loaded from a CDN provider and that the generated HTML files from knitrBootstrap also do that.

E.g.: http://rawgithub.com/jimhester/knitrBootstrap/master/vignettes/illusions.html (lines 18-24)

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<!-- bootstrap -->
<link href=https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css rel="stylesheet">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

This seems very nice since it allows to load static resources from a third party provider and spare resources on the own server when hosted. However, I was also a little bit concerned about the security (not exactly for my purposes but for webpages using this in general) and therefore searched about it. I found the concept of Same-Origin policy and from what I understand, the functions provided by JQuery should not be allowed to change the DOM objects of the page itself, but do it.

Why are the JQuery code and the Bootstrap CSS allowed to alter the remaining document even if they are not loaded from the same domain but from another (in this case a CDN)?

Answer 1

There is nothing stopping the CDN from replacing the files, and of more concern, there is nothing stopping someone else from replacing those files maliciously without the CDN being aware of it, except whatever unknown security measures are in place there.

The reason that the community is usually willing to ignore that potential flag is because of one huge benefit of CDNs: the ability for all users to use the exact same CDN for a given file. For example, imagine that every major site used the CloudFlare CDN link for JQuery. That means that when you, as a user, visit another major site that also uses it that you can save your own bandwidth by using a likely cached copy of the file. This of course brings up the other major point: the site is not wasting any of its own bandwidth serving up the file or handling requests for it.

However, getting to your question, the Same Origin policy does not apply to loading scripts or CSS; it applies to in-page requests (see: ajax) made by your scripts in order to try to avoid cross site scripting (XSS). The intent here is that you, as the site creator, should be in control of what scripts get loaded, but your in-page request may be easily trickable into making a cross-site request, thus potentially exposing data that should not be exposed (e.g., session variables). The key is that when the browser makes the request to the CDN, it does not give that CDN your session variables or any other cookies that it should not get (your domain's). However, once the script is able to be executing, it does have access your domain's cookies and it can forward those onto any other sites without the Same Origin policy in place.

Unlike Javascript, CSS does not actually execute code directly, rather it specifies a bunch of properties that have a visual effect on your page (which causes the browser to execute code to make it happen, including potentially downloading images used by the CSS).