Subresource Integrity Script Attributes

I discovered something new so I thought I would write it down (I retain knowledge better after I write it down.) I was reading up on “Bootstrap,” a Javascript framework for creating responsive web sites. (Someone in my Twitter timeline said they were learning to use it while going through Freecodecamp courses.) I had never heard of it before, but then I’m not always up on the latest, greatest programming thing, especially when it comes to Javascript.

It’s not terribly clear what Bootstrap *is* just from reading the web site, so I downloaded the zip file so I could open it up and look at it. It’s apparently a framework–a CSS file and a Javavscript file, in case you were wondering. It’s a bit similar in concept to jQuery, except where jQuery is a completely generic set of tools, Bootstrap is apparently a specific framework for developing a particular kind of web site. (Presumably, the popular kind.)

Anyway, that’s not the point of this post. The point is, I looked at the source for their “Bootstrap Starter Template,”¬†as one does when figuring out something new. Down at the bottom of the source, where the javascript is loaded, I found this curious <script> line:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>

I had never seen “integrity” or “crossorigin” attributes before. From the context and the “sha384” it was fairly easy to deduce that it’s a hash value to verify the script hasn’t been tampered with. It seemed like a good idea, which was notable because I don’t often see good ideas in the HTML or Javascript development space. (Zing!)

I looked to verify that the template was HTML5. (You can tell because of “<!DOCTYPE html>”–one of the rare instances in computer science when the newer specification is simpler than the older specification.) I’m not familiar with every little thing in HTML5 so I thought maybe script verification was a new feature. I did a Google search.

It turns out it’s not an HTML5 feature, it’s a W3C recommendation called Subresource Integrity. It’s exactly what I thought it was: A way to verify the integrity of script resources (or really any third-party resources). It’s a good idea, though probably a pain to implement given the need to generate hashes for every reference and insert them into your HTML and maintain them.

I was curious how many browsers actually support Subresource Integrity (SRI), since there’s not much point in using it if browsers don’t enforce it. According to Wikipedia, Firefox, Chrome, and Opera support, and Safari support looks to be coming soon. That means essentially everybody but Microsoft Edge and of course Internet Explorer.

Leave a Reply

Your email address will not be published. Required fields are marked *