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

Question

给出这样的代码:

import { el, mount } from 'https://unpkg.com/redom@3.2.1/dist/redom.es.js';

有没有办法启用子资源完整性验证,以确保CDN资产返回预期的内容？

Answer 1

在 HTML 文档中，您可以使用该<link rel="modulepreload">元素执行完整性检查，遗憾的是目前仅 Blink 浏览器支持该检查。

// default script
import( "https://unpkg.com/redom@3.2.1/dist/redom.es.js" )
  .then( module => console.log( 'from default script:', typeof module.List ) )
  .catch( console.error );

<link rel="modulepreload" 
  href="https://unpkg.com/redom@3.2.1/dist/redom.es.js"
  integrity="sha384-notthecorrectsha">
<script type="module">
  import { List } from "https://unpkg.com/redom@3.2.1/dist/redom.es.js";
  console.log( 'from module script:', typeof List );
</script>

没有完整性检查的相同片段：

// default script
import( "https://unpkg.com/redom@3.2.1/dist/redom.es.js" )
  .then( module => console.log( 'from default script:', typeof module.List ) )
  .catch( console.error );

<link rel="modulepreload" 
  href="https://unpkg.com/redom@3.2.1/dist/redom.es.js">
<script type="module">
  import { List } from "https://unpkg.com/redom@3.2.1/dist/redom.es.js";
  console.log( 'from module script:', typeof List );
</script>

请注意，此检查也适用于“子模块”，但不适用于 Workers。

Answer 2

您还必须通过定义模块

<script type="module" integrity="..." src="https://unpkg.com/redom@3.2.1/dist/redom.es.js">

您所要求的具体要求需要对 ECMAScript 本身进行更改，而目前甚至还没有相关提案，因此我预计它不会很快出现。

但是，对于 UNPKG，如果您相信 UNPKG 和 Cloudflare 不会弄乱内容，那就没问题。只要指定版本，npm 和包作者都无法修改该文件。

Answer 3

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

onNodeCreated：函数（节点，配置，模块，路径）{node.setAttribute（'integrity'，integrityForModule）; node.setAttribute('crossorigin', '匿名'); }

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

我使用 Webpack（目标为 UMD）和 RequireJS。将相关模块放在externalwebpack 配置文件的部分中，因此这些模块不会编译到转译代码中。