This question already has answers here:
What are the integrity and crossorigin attributes?
(3 answers)
Closed 7 years ago.
I was on bootstrap's site, and I recently noticed that their CDN links contained an integrity attribute with an SHA-384 key.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
I assume that is meant to be a way to verify the script source, but moreso I was wondering how it's used and if this is part of any spec?
Furthermore, does this only work with script src's or can it work with any non-same-origin source?
check this :
https://developer.mozilla.org/en/docs/Web/HTML/Element/script
Using Content Delivery Networks (CDNs) to host files such as scripts and stylesheets that are shared among multiple sites can improve site performance and conserve bandwidth. However, using CDNs also comes with a risk, in that if an attacker gains control of a CDN, the attacker can inject arbitrary malicious content into files on the CDN (or replace the files completely) and thus can also potentially attack all sites that fetch files from that CDN.
The Subresource Integrity feature enables you to mitigate the risk of attacks such as this, by ensuring that the files your Web application or Web document fetches (from a CDN or anywhere) have been delivered without a third-party having injected any additional content into those files — and without any other changes of any kind at all having been made to those files.
Read more here :
https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity
Related
This question already has answers here:
Why use a CDN (Content Delivery Network)? [duplicate]
(3 answers)
Closed 2 years ago.
I am a beginner building my own website and I am currently linking my css and js pages by like so:
<link rel="stylesheet" href="style.css">
<script src="jscode.js"></script>
where style.css and and jscode.js is in the same folder as the html file. However, published websites seem to exclusively link their css and js pages by online links like so:
<link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Shared/stacks.css?v=0ee8a05683e7">
<script async="" src="https://cdn.sstatic.net/Js/full.en.js?v=ada34f05dd4d"></script>
Why would they do this instead of having the css and js files hosted in the same folder as the html file? Should I also upload my css and js files online and link them?
This is done for perfomance reasons.
As you may have noted, they link a CDN hosted stylesheet: https://cdn.sstatic.net/Shared/stacks.css?v=0ee8a05683e7
Files that rarely change benefit from being hosted on CDNs, improving website performance. This is especially true for common libraries, e.g. Bootstrap or jQuery or Vue.
But if you craft your resources yourself, it is totally fine to put you css and js files alongside your web pages.
These external libraries increase the application bundle size when we build our application and so it also increases the application loading time. When you load CSS and JavaScript library from a CDN your website will load them fast.
Using CDN links typically offers faster delivery of the contents/resources to the user, and for websites that have high enough traffic, it can reduce the workload on the hosting server, because of the way CDNs work, you might want to read up on CDN here. But it also depends on the creator of the code, because in most cases, the difference is usually not observable by the user.
You will notice the 'cdn' subdomain in the src and type attributes: (href="https://cdn.sstatic.net/Shared/stacks.css?v=0ee8a05683e7").
These refer to 'content delivery network'. These are servers that are distributed around the globe and host the CSS and JS files in question. When a user visits the site the CDN will serve cached files from a server that is close to them which results in a quicker site load.
However, using a CDN isn't required.
I'd like to implement Subresource Integrity and cache busting for static assets such as stylesheets and JavaScript files in my application. Currently I use PHP with Twig templates.
I know there are many tools out there to generate hashes for all the JS and CSS files but I am looking for how to implement the hashes into the <script> and <link> tags for hundreds of files.
This blog post described most of what I'm trying to do, however the author only covers cache busting and uses a static timestamp in the file name that he changes manually every time. Using a build tool to programatically generate that timestamp isn't difficult either but with SRI the value is a hash, which is different for every file.
For example, a snippet of header.html.twig:
<!-- cdn requests -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'
integrity='sha384-8gBf6Y4YYq7Jx97PIqmTwLPin4hxIzQw5aDmUg/DDhul9fFpbbLcLh3nTIIDJKhx'
crossorigin='anonymous'></script>
<!-- same-origin requests -->
<script src='foo.1a516fba.min.js'
integrity='sha384-GlFvui4Sp4wfY6+P13kcTmnzUjsV78g61ejffDbQ1QMyqL3lVzFZhGqawasU4Vg+'></script>
<script src='bar.faf315f3.min.js'
integrity='sha384-+vMV8w6Qc43sECfhc+5+vUA7Sg4NtwVr1J8+LNNROMdHS5tXrqGWSSebmORC6O86'></script>
Changing the src/href and integrity attributes every time is not a sane approach.
I could write a Twig function that calls a PHP function to hash the file every time and it may work on OK on dev but that seems awfully computationally expensive.
What is a feasible approach to this?
To answer your question: There is no feasible approach because this is not a proper application of Subresource Integrity.
According to W3C the integrity attribute is:
...a mechanism by which user agents may verify that a fetched resource has been delivered without unexpected manipulation
It was introduced because these days lots of pages are fetching their CSS and JS scripts from CDNs like you are and if a hacker were ever to gain control of a CDN they could wreak an extraordinary amount of havoc across thousands of websites by injecting malicious code into the resources delivered!
Imagine if every version of jQuery delivered by code.jquery.com or ajax.googleapis.com suddenly contained malicious code! How many sites would be affected? Scary.
By providing the agent (browser) with an integrity hash that the contents of the fetched resource should be compared against, you are ensuring the agent only continues to execute the code if it gets exactly what you told it to expect. If it's different, don't trust it!
In the case of the resources in your application, I assume they exist on the same server so there is no middle route to intercept. If a hacker gains control of your server and injects malicious code in the JS scripts, they could just as easily rehash the contents and change the integrity attribute in your HTML as well. Subresource Integrity offers no additional security check.
But...
Just for the sport of solving what is quite a fun problem I would suggest if you wanted to dynamically generate the hash for the integrity attribute:
Use Gulp (my personal preference) to concatenate, minify and thumbprint the filename of your resource. Read the contents of the generated file using gulp.src('bar.*.min.js'). Use the NPM sha1 package to create the hash as a variable and finally maybe use gulp-inject to change the src attribute and then gulp-replace to write the integrity attribute too. Some flow like that is what I would go for :-)
I hope that answers your question.
This question already has answers here:
What are the advantages and disadvantages of using a content delivery network (CDN)? [closed]
(4 answers)
Closed 7 years ago.
I am trying to write a JavaScript script to populate HTML using jQuery and Bootstrap. In many tutorials on the internet, tutors mention to using files from a Content Delivery Network(CDN) instead of calling those files locally.
But I am unable to foresee any advantage making a call to js or CSS over a network, instead of loading it locally, which should prove good enough.
I am eager to know, what is the difference in terms of network and machine resources as well as the load on a page.
Pros using CDN:
* cache for the library in the client side.
Cons using CDN:
* If the cdn's site is down, your site will not get the files.
* Cdn file changes frequently and therefore your production site will work with the newest files that you didn't checked them(this can be very dangerous).
Now you can think if this suitable for your site.
This question already has answers here:
Why should I use Google's CDN for jQuery?
(7 answers)
Closed 7 years ago.
At some point in my website I needed a Timer so I looked for a free jQuery Countdown Timer and found this one : Example
After integrating the model to my page inside my IDE (VS2010) i payed attention that some CSS and JS files are not stored locally in my project folder, but they are still Linked to an External sources, and that had me thinking : Am i suppose to find a way to download these file locally than use them, or should i use them the way they are ? and should i be concerned if they may change or desperate at some point in the future ? what are the best practices in case ?
Here is an example of the HTML code :
....
....
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script type="text/javascript" src="inc/TimeCircles.js"></script>
....
....
Those are CDNs ( http://it.wikipedia.org/wiki/Content_Delivery_Network ) meaning that they're hosted by someone for all of us to use, so you're pretty much guaranteed it will stay there. The main advantage of using CDNs is that the user will probably have visited another site that uses the same resource and this means that said resource is already cached in the user's computer, leading to a faster loading time for your site.
You should never rely on external sources for critical files unless you're using a dependable CDN. In this case you're using the most common CDN sources for Bootstrap and jQuery, so you're all set.
I assume that you've downloaded the timer files and are hosting those locally. Your reference to them confused me, so I've updated this answer.
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)?
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).