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

Question

给定这样的代码:

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

有没有办法启用subresource integrity verification以确保 CDN Assets 返回预期的内容？

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。