{"id":50,"date":"2025-11-10T11:49:24","date_gmt":"2025-11-10T10:49:24","guid":{"rendered":"https:\/\/thomaswormann.com\/?p=50"},"modified":"2025-11-10T11:49:24","modified_gmt":"2025-11-10T10:49:24","slug":"an-implementation-issue-with-subresource-integrity-checks-in-import-maps","status":"publish","type":"post","link":"https:\/\/thomaswormann.com\/?p=50","title":{"rendered":"An implementation issue with subresource integrity checks in import maps"},"content":{"rendered":"

Last year, the major browser vendors implemented a feature that was missing for resources referenced by import maps: integrity checks. Earlier these were implemented on the individual script or link tags like this:<\/p>\n

<script\n  src=\"https:\/\/example.com\/example-framework.js\"\n  integrity=\"sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K\/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC\"\n  crossorigin=\"anonymous\"><\/script>\n<\/code><\/pre>\n
Example taken from MDN<\/a><\/p>\n
The idea is that a cryptographic hash is attached to the linked resource that allows the browser to verify the integrity of the file and make sure no one snuck in a different file with malware in it. It’s a great idea that even lets you safely use CDN’s which are otherwise quite a security risk.<\/p>\n
So it was an obvious addition to import maps as well, as an import map is just a list of references to external files.<\/p>\n
So here is the implementation they made for it, this time my own example.<\/p>\n
<script type=\"importmap\">\n\t{\n\t\t\"imports\": {\n\t\t\t\"foobar\": \"https:\/\/example.com\/FooBar.js\",\n\t\t},\n\t\t\"integrity\": {\n\t\t\t\"https:\/\/example.com\/Foobar.js\": \"sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K\/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC\"\n\t\t}\n\t}\n<\/script>\n<\/code><\/pre>\n
The import and the integrity hash are separate from each other. First the import specifier “foobar” is associated with a reference link, then the integrity hash is added and associated with the aforementioned link.<\/p>\n
But did you spot the error in the example above?<\/p>\n
The specifier references “FooBar.js” and the integrity hash “Foobar.js”, a minor misspelling. But this little issue has quite serious implications: The integrity of “FooBar.js” will not be checked because those two paths reference two different files and malicious changes to FooBar.js will just be accepted by the browser.<\/p>\n
However, I think what is even more troublesome is the fact that developers will still believe their integrity checks are active and working, giving them a false sense of security.<\/p>\n
The main culprit here is the double reference to the resource location. This is where I believe we are actually looking at an implementation issue.<\/p>\n
A clearer approach to integrity checks would have been:<\/p>\n
<script type=\"importmap\">\n\t{\n\t\t\"imports\": {\n\t\t\t\"foobar\": {\n\t\t\t\turl: \"https:\/\/example.com\/FooBar.js\",\n\t\t\t\tintegrity: \"sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K\/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC\"\n            }\n\t\t}\n\t}\n<\/script>\n<\/code><\/pre>\n
It is a bit more convoluted and adds another level of depth, but it’s clear and without repeating yourself. This way the browser would have a direct relation between url and hash, there would be less room for error and even if an error occurred, the browser could pick up on it and alarm the user.<\/p>\n","protected":false},"excerpt":{"rendered":"
Last year, the major browser vendors implemented a feature that was missing for resources referenced by import maps: integrity checks. Earlier these were implemented on the individual script or link…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"webmentions_disabled_pings":false,"webmentions_disabled":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"federated","footnotes":""},"categories":[1],"tags":[2],"class_list":["post-50","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-javascript"],"_links":{"self":[{"href":"https:\/\/thomaswormann.com\/index.php?rest_route=\/wp\/v2\/posts\/50","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thomaswormann.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thomaswormann.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thomaswormann.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thomaswormann.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=50"}],"version-history":[{"count":0,"href":"https:\/\/thomaswormann.com\/index.php?rest_route=\/wp\/v2\/posts\/50\/revisions"}],"wp:attachment":[{"href":"https:\/\/thomaswormann.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=50"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thomaswormann.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=50"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thomaswormann.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=50"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}