es6-modules - es6 import 或 worker 的子资源完整性

Question

<script>接受integrity属性，所以我可以安全地加载一个模块:

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

但是在脚本中加载模块时如何保证安全呢？

带进口:

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

动态导入:

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

甚至网络 worker :

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

Answer 1

请看这个问题

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

您可以使用 RequireJS，并将您的代码转换为 AMD 或 UMD 来实现此目的。 RequireJS 有一个 onNodeCreated 钩子(Hook)，它允许您在将脚本标记添加到文档之前访问它。您可以将 sri 属性添加到 script 标签:

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

信用: https://stackoverflow.com/a/37065379

我使用 Webpack(目标是 UMD)和 RequireJS。将相关模块放在 webpack 配置文件的 external 部分，因此这些模块不会被编译成转译代码。