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')

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? — henhen, Oct 17 '18 at 18:37
@henhen, Are you talking about `integrity` attribute? You can know all about it here: https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity — Yukulélé, Oct 17 '18 at 19:05
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? — henhen, Oct 17 '18 at 19:11
I think it's not the place for this side question, you should ask your own https://stackoverflow.com/questions/ask — Yukulélé, Oct 17 '18 at 19:43
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). — ahwayakchih, Oct 24 '18 at 02:10
In case of "download-then-eval-or-import" way: Looks like `fetch` has a way to specify `integrity`: https://fetch.spec.whatwg.org/#concept-request-integrity-metadata — ahwayakchih, Oct 24 '18 at 02:26
Looks like there already was a question like this, with answer similar to my suggestion: https://stackoverflow.com/questions/45804660/is-it-possible-to-use-subresource-integrity-with-es6-module-imports :) — ahwayakchih, Oct 24 '18 at 02:37
Marked as dupe of [Is it possible to use subresource integrity with ES6 module imports?](https://stackoverflow.com/questions/45804660/is-it-possible-to-use-subresource-integrity-with-es6-module-imports) — Elliott Beach, Oct 08 '20 at 00:43

score 1 · Answer 1 · answered Oct 24 '18 at 17:50

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.

Subresource integrity for es6 import or worker

1 Answers1

Linked