fix: SubResourceIntegrity (#803)

Author: jarrett-confrey

CONTRIBUTING.md

@@ -64,6 +64,7 @@ _Before_ submitting a pull request, please make sure the following is done…
 8.  Ensure the test suite passes via `yarn test`.
 
     ```sh-session
+    $ yarn test:prepare # build example and generate fixtures before running tests
     $ yarn test
     ```
 

packages/server/src/ChunkExtractor.js

@@ -233,9 +233,12 @@ class ChunkExtractor {
   createChunkAsset({ filename, chunk, type, linkType }) {
     const resolvedFilename =
       typeof filename === 'object' && filename.name ? filename.name : filename
+    const resolvedIntegrity =
+      typeof filename === 'object' && filename.integrity ? filename.integrity : null
 
     return {
       filename: resolvedFilename,
+      integrity: resolvedIntegrity,
       scriptType: getFileScriptType(resolvedFilename),
       chunk,
       url: this.resolvePublicUrl(resolvedFilename),

packages/server/src/ChunkExtractor.test.js

@@ -102,6 +102,31 @@ describe('ChunkExtrator', () => {
       `)
     })
 
+    it('should add integrity if available in stats', () => {
+      const testExtractor = new ChunkExtractor({
+        stats: {
+          ...stats,
+          namedChunkGroups: {
+            ...stats.namedChunkGroups,
+            main: {
+              ...stats.namedChunkGroups.main,
+              assets: stats.namedChunkGroups.main.assets.map(name => ({
+                name,
+                // pseudo hash - reversed name
+                integrity: name.split('').reverse().join(''),
+              })),
+            },
+          },
+        },
+        outputPath: targetPath,
+      })
+      expect(testExtractor.getScriptTags({ crossorigin: 'anonymous' }))
+        .toMatchInlineSnapshot(`
+        "<script id=\\"__LOADABLE_REQUIRED_CHUNKS__\\" type=\\"application/json\\" crossorigin=\\"anonymous\\">[]</script><script id=\\"__LOADABLE_REQUIRED_CHUNKS___ext\\" type=\\"application/json\\" crossorigin=\\"anonymous\\">{\\"namedChunks\\":[]}</script>
+        <script async data-chunk=\\"main\\" src=\\"/dist/node/main.js\\" integrity=\\"sj.niam\\" crossorigin=\\"anonymous\\"></script>"
+      `)
+    })
+
     it('should add extra props if specified - object argument', () => {
       extractor.addChunk('letters-A')
       expect(extractor.getScriptTags({ nonce: 'testnonce' }))

packages/webpack-plugin/src/index.js

@@ -39,8 +39,20 @@ class LoadablePlugin {
       return {
         id: chunk.id,
         files: [...chunk.files],
-      };
-    });
+      }
+    })
+
+    // update namedChunkGroups with integrity from webpack-subresource-integrity if available
+    Object.values(stats.namedChunkGroups).forEach(namedChunkGroup => {
+      namedChunkGroup.assets.forEach(namedChunkGroupAsset => {
+        if (!namedChunkGroupAsset.integrity) {
+          const asset = stats.assets.find(a => a.name === namedChunkGroupAsset.name) || {}
+          if (asset.integrity) {
+            namedChunkGroupAsset.integrity = asset.integrity
+          }
+        }
+      })
+    })
 
     const result = JSON.stringify(stats, null, 2)