Now pause for a few second and think of about a hypothetical scenario. Somehow your subresource file and the CDN service gets attacked by a very talented hacker who intends to harm others. In this scenario, these “others” includes your site or any other website whoever is using that subresource. Quite simply the hacker can manipulate or add codes on the suresource and can cause serious damage (at least break up) to your application. How possibly you as an web developer can save your site from such attack? This is exactly where W3 Recommended the Subresource Integrity (SRI) comes into rescue you or your site.
What is SRI?
As far as the definition is concern, MDN states, “Subresource Integrity (SRI) is a security feature that enables browsers to verify that files they fetch (for example, from a CDN) are delivered without unexpected manipulation. It works by allowing you to provide a cryptographic hash that a fetched file must match.” I couldn’t break it down to any other simpler words and I hope that does make sense to you as well.
Subresource Integrity Check Secures Files from Hackers. © MaxCDN.
How to Implement SRI?
Currently SRI works with <script> and <link> elements and implementing them on your application is fairly simple. I won’t get into the nitty-gritty of this procedure. You can simply head toward this online tool (SRI Hash Generator) and you should be able to do the rest by yourself.
However, just in case if you want to know what to do.
Step – 1: Simply copy the direct URL of your subresource and paste it on the tool’s input field.
Step – 2: Click on the “Hash!” button and your element tag would be automatically generated with SHA-384 hash as the value of the “integrity” attributte.
Step – 3: Simply copy the element and paste it to appropriate area of your application (generally within the <head></head> tag).
Your element (assuming it’s a JavScript library file) with appropriate attributes should look something like this one.
<script src="https://example.com/framework.js" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6 R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC" crossorigin="anonymous"></script>
Go ahead and build something amazing.