Add SubResource Integrity Checking for External Scripts
SubResource Integrity (SRI) checking add a hash value to the
< script> tag, so if the external source gets modified the browser will refuse to load and execute it.
You can also use it for external stylesheets
<link rel="stylesheet" href="https://site53.example.net/style.css"
Using CanIUse.com we can see that all modern browsers support this. And if you need another reason to dump Internet Explorer... No SRI support.
Most external libraries get downloaded from a CDN server. Lots of CDNs provided a link with SRI automatically so there is no excuse not to use it (but SRI is still heavily underused by a lot of web sites, even though it has been available for over two years!).
For example, CloudFlare's CDN allows you to copy a link with SRI enabled:
But even when the CDN doesn't provide an SRI link, it is easy to generate one yourself using SRI Hash Generator.
Using SRI with CSP
You can use Content Security Policy to require all your scripts and/or stylesheets to use SRI.
Content-Security-Policy: require-sri-for script;
What does the
crossorigin attribute do? When you download resources from a source other than your own website the browser will check if it should do so using Cross-Origin Resource Sharing (CORS). Therefore, the resource must be served with an
Access-Control-Allow-Origin header that allows the resource to be shared with the requesting origin:
Call to Action
Dear web developers, always use SRI for your external scripts and stylesheets! It's very easy to use and will make your website a more secure place!