There are numerous benefits of embedding files and scripts hosted by third parties, such as a Content Delivery Network (CDN), in your HTML documents. But this comes with its vulnerabilities and most times, we are not aware that we (site owners and site users) are open to such attacks. Using Subresource Integrity can help prevent some of these attacks.
What is Subresource Integrity?
Subresource Integrity (SRI) is a security feature that enables browsers to verify that resources 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 resource must match. In simple terms, it is a feature used by browsers to validate resources fetched from third parties have not been manipulated by comparing them to a hash key and if they do not match, the browsers do not serve up the resources.
Being new to HTML, I wondered about the use of the integrity attribute in some HTML elements and sometimes, I removed it and its value from the element. I was ignorant of its use as it isn’t something that pops up most times. Going further and being more security conscious, I discovered the integrity attribute holds the cryptographic hash of the resource to be embedded. This hash could be (but not be limited to) an SHA-256, SHA-384 or SHA-512 hash.
<script src="https://inchukwudi.example.com/lib-example/example.min.js"
integrity="sha512-6QWD5OGReFYm4dnWc1Qt5Ntv9qYdvdihz0PPSiiqn/o4EaG7TubfWGUrM"
crossorigin="anonymous"></script>
JavaScript, A Helpful Yet Dangerous Tool
JavaScript is the scripting language of the web. It can perform basic stuff from creating, displaying and hiding new elements, to changing the attributes of elements. It can do more complex functions from posting data to and getting data from APIs. All these can be done without the knowledge of the site user sometimes when a certain event is triggered, for example, clicking on an element or hovering over an element.
You would agree with me that JavaScript is a powerful tool. An attacker can use JavaScript to mislead users of your site by adding or editing content that you did not put. Phishing links can be added and undue redirection can be initiated. Even, the action attribute of a form can be changed and the information a user inputs in a form is sent elsewhere and vital information exposed.
SRIs can help against embedding such malicious content unknowingly in your website. Yes, unknowingly as most times, malicious content are embedded without your notice.
Ways Malicious Content Get Served
When you visit a website, your browser sends a request to the server and the server processes the request and then sends a response to your browser. Your browser interprets this response and then displays the content you see.
The response sent back from the server can be thwarted in many ways and we might just be oblivious to it. Let's say a user is connected to a network where all requests and responses pass through a proxy server. An attacker with access to such requests and responses can swap or edit a file before it reaches the client and the client gets compromised.
Another plausible example is an attacker gains access to a trusted CDN vendor and then edits the files on their server and different users using websites that embed such files get comprised. This is just a highlight, the list goes on and on.
SRI Working Mechanism
Let us use libraries as a case study. The content of a version of a library is fairly constant and is not expected to change. When there are major changes to be made, a new version is released. Knowing this, adding the integrity attribute with a cryptographic hash of the particular version of the library you intend to use in your HTML document will safeguard against an altered form of the library to be served to your users. Most times, the cryptographic hash of the particular version of the library is provided by the vendor of the library but in some cases, you might have to hash it down yourself.
integrity="sha512-atM3QqRcbCn6ewmpxcLAHGaDjpEB4xZd47q7pAP+gi5Yu8hFgoh"
When the browser is linking the external library, it will hash it according to the hash algorithm specified in the integrity attribute, in this case, SHA-512, and if the output of the hash does not match the hash specified in the integrity attribute, it tries other known hashing algorithms, for example, SHA-256, and it still does not match, it does not load the file. To illustrate this, here is an example using the jQuery library version 3.6.0.
The image above is an image of the jQuery library v3.6.0 as gotten from the jQuery website. Now here is an image of the same file but with a commented line I added myself for the purpose of demonstration of how SRI helps protects you against changes in the resource.
When the edited jQuery file attempts to get loaded, the browser checks and then displays this error message in the console.
Failed to find a valid digest in the 'integrity' attribute for resource 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js' with computed SHA-256 integrity '4ca6xP/WMfyyRx+MmirFEms71HApLgbRdTy0XavPeQA='. The resource has been blocked.
The edited file does not load and I am free from potential attacks if it was a malicious code that was added to the file. Most modern browsers support SRI so you do not have to worry as most users of your site would be protected from such attacks.
Best Practices When Embedding Content
Some people may advise you self host all resources you might use. Well, this makes the origin of the files trustworthy but it does not stop the files from being manipulated when a response is made. An integrity attribute is needed. Also, you would have to make sure you download such files from the owners of the libraries as there are various counterfeits all over. This might be expensive as it will take up a substantial amount of bandwidth.
Using a third party resource is beneficial and in most cases cheaper than hosting the files yourself. Many resources owners have CDNs and provide you with the links to access the resource over the internet. Some of these links have the integrity attributes with cryptographic hash values already, some do not. Caution should be exercised when searching for links to CDNs and other resources as attackers might host already tampered files and hash it and make it look trustworthy, so be mindful of the websites you get links to resources from.
Using this online tool, SRI Hash Generator, you can generate a cryptographic hash of the stylesheet or script you want to embed and add use it in your document and even share for others to use.
SRI Drawbacks
The benefit of SRI is evident but it has its drawbacks. The file that does not match the cryptographic hash won’t be loaded and this may break a lot of things especially the structure of the page and certain functionalities put in place. If a stylesheet is affected, all elements that use classes defined in the stylesheet would not appear as they ought to and the look of the site may not be palatable to the user of the site.
Also, when attacks are launched and are countered by using SRI, the owner of the website is not aware that such an attack occurred. A user with no technical expertise would not know too and would think the website is just quirky then might move on to another website and if the website does not make use of SRI, the user can be compromised.
Top comments (1)
Great stuff. Had no clue about SRIs until I read this