Securing your CDN: Why and how should you use SRI
<script src="https://example.com/whatever.js"> in the
<head> section of your HTML and you're done, right? Found some cool looking CSS? Make it part of your site with
<link rel="stylesheet" href="...">.
What could possibly go wrong? A lot, as it turns out. In this post, I'll explain the security implications of adding third-party resources and how you can protect both your site and its users.
A Content Delivery Network (CDN) is a group of servers, usually spread out around the world, which help accelerate content on your site. Instead of including a popular library on your server, you can tell your visitors to load it from the CDN server nearest to them. This speeds up your page.
How can you save yourself from such a tragedy?
This is why SubResource Integrity was invented. It's a bit of a mouthful, so we'll call it SRI for short. SRI allows you to say "I want exactly this specific version of the imported code and if even a single byte of it changes, don't run it."
When you use SRI, you're protecting your site and your users from compromised code. Even if a person with malicious intentions hacks the server hosting the third-party code, they will not be able to take over your site. Pretty cool, huh?
Let's take a look at how SRI works. Imagine that you want to include jQuery on your site. Here's the SRI code that you can use:
<script src="https://code.jquery.com/jquery-3.7.0.slim.min.js" integrity="sha256-tG5mcZUtJsZvyKAxYLVXrmjKBVLd6VpVccqz/r4ypFE=" crossorigin="anonymous" ></script>
And for CSS, it is pretty similar:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/picnic" integrity="sha384-v1z6igsPTyRDbi5o+gRfebiF45laQTyfvucMlEmzfyalawh17iTvBbICU08I7ksb" crossorigin="anonymous">
As you'll notice, there are two new attributes compared to a normal
<link> element. These are
crossorigin attribute is the easier one to explain. This attribute tells your browser to anonymously request the resource from the server. No username, password, or other identifying information is sent to the server.
integrity attribute is slightly more complicated. It contains a mathematical representation - called a "hash" - of the code you are requesting. The first part
sha384 says that the algorithm being used is SHA384. This tells the browser to use that algorithm to analyze the code being requested. That will generate a long string of characters. If the code on the remote website changes, the SHA384 function will produce a hash that will not match the second part of the
In short, if the code on the remote server has changed, your browser will refuse to run it.
Most libraries will tell you what the SRI hash is, and you can just copy and paste it. If a site doesn't tell you the hash, you can calculate it yourself. The easiest way is to use the SRI Hash Generator. Paste in the URl to the code, and it will quickly spit out the hash for you to use.
Of course, using SRI does come with some downsides. Because the SHA384 hash demands that the original file remains unchanged, you must specify the version of the file you want. It is impossible to use SRI and always have the latest version of a library. You have to make a choice — keep your site safe or always have the latest features.
Thankfully, SRI has been available in all modern web browsers since 2016. Older browsers will ignore the
integrity attributes, which may leave users of older browsers at risk if the libraries you use are compromised.