什么是诚信哈希？

subresource integrity hash是浏览器使用的integrity属性的加密值，以验证资产的内容尚未被操纵。如果管理资产，浏览器将永远不会加载。

integrity属性可以与script和link标签一起使用。

Webpack插件

您需要安装两个WebPack插件：一个生成哈希，另一个将它们注入HTML标签。

webpack-subresource-integrity插件为所有源脚本和样式生成哈希值，并将它们存储在编译资产的内部属性中。

html-bundler-webpack-plugin从编译资产的内部属性中提取哈希，并将它们添加到link和script标签中。

。

例如，我们有一个带有脚本和样式的简单HTML模板：

<html>
  <head>
    <!-- include source style -->
    <link href="./style.scss" rel="stylesheet" />
    <!-- include source script -->
    <script src="./main.js" defer="defer"></script>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

在您的WebPack配置中添加插件：

const { SubresourceIntegrityPlugin } = require('webpack-subresource-integrity');
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');

module.exports = {
  output: {
    // required for subresource integrity to work
    crossOriginLoading: 'anonymous',
  },
  plugins: [
    // renders templates and injects integrity hash
    new HtmlBundlerPlugin({
      entry: {
        index: 'src/views/index.html', // template where are included link and script tags
      },
      integrity: 'auto', // include `integrity` hash in production mode only
    }),
    // generates integrity hash
    new SubresourceIntegrityPlugin(),
  ],
};

生成的html文件dist/index.html包含完整性哈希：

<html>
  <head>
    <link
      href="assets/css/style.css"
      rel="stylesheet"
      integrity="sha384-gaDmgJjLpipN1Jmuc98geFnDjVqWn1fixlG0Ab90qFyUIJ4ARXlKBsMGumxTSu7E"
      crossorigin="anonymous" />

    <script
      src="assets/js/main.js"
      defer="defer"
      integrity="sha384-E4IoJ3Xutt/6tUVDjvtPwDTTlCfU5oG199UoqWShFCNx6mb4tdpcPLu7sLzNc8Pe"
      crossorigin="anonymous"></script>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

注意

在production模式下使用WebPack build时，完整性哈希是生成的。
当使用WebPack watch或serve时，不会生成哈希，因为它没有意义。

在浏览器中查看

打开生成的dist/index.html。 link和script标签将包含带有哈希的integrity属性。