es6 导入或辅助角色的子资源完整性

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)

• 甚至网络工作者：

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

Answer 1

请看这个问题

是否可以在 ES6 模块导入中使用子资源完整性？

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

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

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

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