A requirement for every site is to be as secure as possible. Each security measure means that you care about the protection of the users. Search engines love websites that use security measures.
What is SRI Hash?
SRI stands for Subresource Integrity and is a security feature of browsers. It ensures that libraries like JQuery or Bootstrap are not hacked and modified. For example, think that someone successfully hacked the jQuery CDN and put in a malicious script. Then all the websites that use them will be compromised. This can be prevented by calculating a hash of the resources before, and then the browser will ensure that someone did not modify the content. Browsers will calculate the hash of the resources every time a user fetches the library again.
Look, for example, at this script tag:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
You can see the attribute integrity that specifies the algorithm used for hashing and the hash itself. The browser will not use the library if someone hacks the Cloudflare CDN.
So be careful that every time you use a CDN library, calculate the hash and add it to your script. You can calculate the SRI hash with a tool like this one.
Calculating the hash whenever you change the version or use a new library is boring. Let’s find out how to generate the hash from the code automatically.
How to auto-generate SRI Hash in ASP.NET Core?
The simplest way to auto-generate an integrity hash is to create a tag helper. I use the Boxed Tag Helpers. It is an ASP.NETÂ library offered by Muhammad Rehan Saeed, a software developer at Microsoft.
Boxed Tag Helpers has two types of ASP.NET Core tags:
- Subresource Integrity tag helpers
- Social Networks Meta tags
We will use the subresource integrity tag helpers, but I recommend you look at social tags. There are good for SEO and for gaining more traffic from Social Networks. The tags are for Twitter and Facebook.
The helper tags will calculate the hash of the CDN or a local file. The hash is stored in the cache, which is only calculated for the first request. If you use the helper to calculate the CDN library’s hash, ensure it is not already hacked.
Install the NuGet Package:
Install-Package Boxed.AspNetCore.TagHelpers
After that, you should add the tag helpers in the _ViewImports.cshtml file.
Then apply the tag on javascript libraries and CSS stylesheets:
asp-subresource-integrity-hreffor stylesheetsasp-subresource-integrity-srcfor JavaScript
Below is an example of when I use the local jQuery library to calculate the integrity hash.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" asp-subresource-integrity-src="~/lib/jquery/dist/jquery.min.js"></script>
If the hash of the local library is different than the CDN library, the browser will not fetch the library. So you should set the fallback to be the local library. You can do this by using asp tag helpers.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" asp-subresource-integrity-src="~/lib/jquery/dist/jquery.min.js" asp-fallback-src="~/lib/jquery/dist/jquery.min.js" asp-fallback-test="window.jQuery"></script>
If you receive an error regarding the IActionContextAccessor dependency, you should register it in the Program or Startup class:
builder.Services.AddSingleton<IActionContextAccessor, ActionContextAccessor>();
If your application breaks because of an unhandled exception that tells you it didn’t find the local file, then use the relative path of the wwwroot folder.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" asp-subresource-integrity-src="/wwwroot/lib/jquery/dist/jquery.min.js" asp-fallback-src="/wwwroot/lib/jquery/dist/jquery.min.js" asp-fallback-test="window.jQuery"></script>
You can use many ways to ensure you have a valid SRI hash, but I think the Boxed Tag Helpers are an easy solution.