{"id":2923,"date":"2024-07-05T10:22:36","date_gmt":"2024-07-05T16:22:36","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=2923"},"modified":"2024-07-05T10:22:37","modified_gmt":"2024-07-05T16:22:37","slug":"script-integrity","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/script-integrity\/","title":{"rendered":"Script Integrity"},"content":{"rendered":"\n

There was lots of news recently about the polyfill.io<\/code> project. This was a popular project a few years back, as you could just link it up and it would polyfill whatever web platform features it needed to based on feature testing and UA sniffing. If you loaded the script up from their domain<\/em>, as the homepage suggested you did, you might have been served some malicious code<\/strong>.<\/p>\n\n\n\n

\n

Users are being redirected to sports betting websites or adult domains, likely based on their location, the threat intelligence firm said.<\/p>\n\n\n\n

SecurityWeek<\/a><\/p>\n<\/blockquote>\n\n\n\n

\"\"
The project is offline now, but as of June 1st, 2024 this is how they suggested hotlinking.<\/figcaption><\/figure>\n\n\n\n

When you link to any<\/em> resource on a domain you don’t control, it’s a risk. It can be a calculated risk. For example, tons of websites load a script from google.com<\/code> for their Google Analytics. Or load fonts from adobe.com<\/code> for their typography. Those tend to be trusted sources, but that trust is entirely up to you.<\/p>\n\n\n\n

It’s entirely possible that a resource you link to from a third-party disappears or changes. Worst case: changed maliciously, like we’ve seen here. You can bet your ass Google and Adobe don’t load any resources, especially JavaScript, from third-party domains they don’t control. <\/p>\n\n\n\n

Protection Against Changes<\/h2>\n\n\n\n

There is a web platform feature that can help against a third party changing the code they are providing. It’s the integrity<\/code> attribute<\/a> on <script><\/code> or <link><\/code> elements (which are rel=\"stylesheet\"<\/code>,\u00a0rel=\"preload\"<\/code>, or\u00a0rel=\"modulepreload\"<\/code>). It’s called “Subresource Integrity”, to name it correctly. <\/p>\n\n\n\n

So for example…<\/p>\n\n\n

<script<\/span><\/span>\n<\/span><\/span>  src<\/span>=\"https:\/\/third-party.com\/script.js\"<\/span><\/span>\n<\/span><\/span>  integrity<\/span>=\"sha384-[hash value here]\"<\/span>><\/span>\n<\/span><\/mark><\/script<\/span>><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Now if script.js<\/code> changes at all, even just a single character,<\/em> the browser will refuse the execute the script <\/strong>(or stylesheet). Safety! <\/p>\n\n\n\n
Some responsible third-parties will offer this directly, which is nice to see.<\/p>\n\n\n\n
\"\"
instant.page versions their script and provides the integrity<\/code> attribute for safety.<\/figcaption><\/figure>\n\n\n\n
CDNjs makes this a part of the default code you copy and paste.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
I particularly like how the protection integrity<\/code> provides protects against some possible middleman attacks as well. Say your weird hotel WiFi intercepts requests and changes the response (I’ve seen it!), this will prevent the tampered-with script from executing. Uh, well, unless they tamper with the HTML and change the attribute value, which is certainly possible as altering HTML is exactly what invasive in-app browsers do<\/a>. Still, most security is a do-as-much-as-you-can game and this helps. <\/p>\n\n\n\n
When Not to use Script Integrity<\/h2>\n\n\n\n
The above two examples are kinda perfect as the scripts they are linking to are versioned. They are published with that exact version and that version will never change. In this case, it’s by virtue of strong conventions. When public libraries update, the code at that version is locked in stone. Any changes cause a version update. If the code of a version changes without<\/em> a version change, that would be highly<\/em> suspicious, probably malicious, and a great situation for <script integrity=\"...\"><\/code> to block. Plus, the major places where libraries are published (i.e. npm) literally don’t allow changes to published versions anyway.<\/p>\n\n\n\n
While integrity<\/code> is often an excellent idea, it’s specifically for versioned resources that don’t change. You would not<\/em> use it if:<\/p>\n\n\n\n
    \n
  1. You’re linking to a resource that is OK to change<\/li>\n\n\n\n
  2. You’re providing a resource that you intend to change<\/li>\n<\/ol>\n\n\n\n
    Perhaps you’re using a script from some analytics service provider. It’s pretty likely that they don’t <\/em>use the integrity<\/code> attribute when they give you the script they want you to add. That’s likely because they want to be able to actively work on this script and what it does without having to tell every single customer they need to update the version of the script otherwise it will stop working. <\/p>\n\n\n\n
    Ironically, a company being able to update a script on the fly means they could potentially patch<\/em> a security problem. <\/p>\n\n\n\n
    Would Script Integrity have Stopped the Polyfill.io Problem?<\/h2>\n\n\n\n
    Maybe! It depends what they did. Some reporting said<\/a> that:<\/p>\n\n\n\n
    \n
    The malicious code dynamically generates payloads based on HTTP headers, activating only on specific mobile devices, evading detection, avoiding admin users and delaying execution. The code is also obfuscated.<\/p>\n<\/blockquote>\n\n\n\n
    So: yes. If what was happening is that the initial response\/content of the script was changed from what it was when the integrity value was created, it would have prevented these malicious changes from running. <\/p>\n\n\n\n
    But they could<\/em> have evaded this kind of stoppage. <\/p>\n\n\n\n
    They way that polyfill.io worked already was that it loaded additional content<\/em> \u2014 the polyfills themselves \u2014 as needed. That additionally-loaded content could have been changed to be malicious and would not have been subject to subresource integrity. I’m not trying to make bad guys lives easier here, just sayin’.<\/p>\n\n\n\n
    How To Do It Yourself<\/h2>\n\n\n\n
    You don’t need a third-party to hand you this attribute to use it. It’s just a web platform feature, so you can use it if you want to. <\/p>\n\n\n\n
    Maybe the easier way is to go to the SRI Hash Generator website, pop in the URL of a resource you want to protect, and hit the button to get the code:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    NOTE:<\/strong> I’ve seen plenty of places recommend this site, but when I used it, it didn’t seem to work for me. For example, the exact code above:<\/p>\n\n\n
    <script<\/span> src<\/span>=\"https:\/\/assets.codepen.io\/3\/log-something.js\"<\/span> integrity<\/span>=\"sha384-ZTxYWn5UcuOi7Xt1wWg\/QFcsZJEXjJg7tgCnVbx0+ssBvbi1Sw\/hY5GzPGHSD1NW\"<\/span> crossorigin<\/span>=\"anonymous\"<\/span>><\/span><\/script<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    That fails for me in Chrome. I had to let Chrome error with a message in the console, which provides the correct hash in the error message, and use that corrected hash for it to work:<\/p>\n\n\n
    <script<\/span> src<\/span>=\"https:\/\/assets.codepen.io\/3\/log-something.js\"<\/span> integrity<\/span>=\"sha384-H7W+IxM2qbwMSJYRqmcgYXq0TRko\/BIFtURUjh2QG0Z8MM9I6t2f4n+2BOCmbjvD\"<\/span> crossorigin<\/span>=\"anonymous\"<\/span>><\/span><\/script<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    It’s also worth noting that CORS is involved. Without that crossorigin=\"anonymous\"<\/code> on there, I was seeing a CORS error with that code above, even though we do<\/em> serve assets with a Access-Control-Allow-Origin: *<\/code> header. Shrug \u2014 websites are hard.
    <\/p>\n","protected":false},"excerpt":{"rendered":"
    Polyfill.io recently served malicious code, redirecting users to inappropriate sites. Subresource Integrity (SRI) can help prevent such issues by verifying script integrity.<\/p>\n","protected":false},"author":1,"featured_media":2945,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[3,197,198],"class_list":["post-2923","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-javascript","tag-security","tag-subresource-integrity"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/07\/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvZnJiYXJiZWRfd2lyZV9mZW5jZV9vbGQtaW1hZ2Uta3liZWI4M2IuanBn.webp?fit=1024%2C683&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/2923","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=2923"}],"version-history":[{"count":6,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/2923\/revisions"}],"predecessor-version":[{"id":2946,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/2923\/revisions\/2946"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/2945"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=2923"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=2923"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=2923"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
    So… your milage may vary. Here’s the proof on all that.<\/a> <\/p>\n\n\n\n