Subresource integrity for es6 import or worker

Question

<script> accept integrity attribute, so I can load a module safely:

<script type="module"
  src="https://example.com/module.mjs"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"
></script>

But how to keep safe when loading module inside script?

• with import:

import foo from "https://example.com/module.mjs"

• dynamic import:

import("https://example.com/module.mjs").then(console.log)

• or even web worker:

const myWorker = new Worker('worker.js')

Pycnometer

Sorry I do not have an answer for your question, but I was wondering how you are implementing the hashing part of your src file? – Lita

@henhen, Are you talking about integrity attribute? You can know all about it here: developer.mozilla.org/en-US/docs/Web/Security/… – Example

Yes, I have read over that document. I just don't understand how I can incorporate it into my project, such as a Node/React project? Do I have to have a script in my package.json to run the command to generate the hash value? In the examples, it uses cat FILENAME.js | openssl dgst -sha384 -binary | openssl base64 -A where FILENAME.js is the file they want to hash. But I am wondering if I have to incorporate this into my package.json and assign it to a global variable. Also instead of doing FILENAME.js is it okay to put my CDN link there instead? – Lita

I think it's not the place for this side question, you should ask your own stackoverflow.com/questions/ask – Example

I don't think there is an easy way for that. You probably will have to download script first, create hash, compare and if matching, either eval or import (browser should have script data in cache by then, so it wouldn't download again). – Cayuga

In case of "download-then-eval-or-import" way: Looks like fetch has a way to specify integrity: fetch.spec.whatwg.org/#concept-request-integrity-metadata – Cayuga

Looks like there already was a question like this, with answer similar to my suggestion: #45805160 :) – Cayuga

Marked as dupe of Is it possible to use subresource integrity with ES6 module imports? – Vitta

Answer 1

Please see this question

Is it possible to use subresource integrity with ES6 module imports?

You can use RequireJS, and transpile your code to AMD or UMD to achieve this. RequireJS has a hook onNodeCreated, which gives you access to the script tag before it is added to document. You can add the sri attribute onto the script tag:

onNodeCreated: function(node, config, module, path) { node.setAttribute('integrity', integrityForModule); node.setAttribute('crossorigin', 'anonymous'); }

credit: https://stackoverflow.com/a/37065379

I use Webpack (with a target of UMD) and RequireJS. With the relevant modules put in the external section of the webpack configuration file, so the modules are not compiled into the transpiled code.

Magma