From 9ee5c535e5161b2d8658c93405c5986f6fdfef87 Mon Sep 17 00:00:00 2001 From: Xin Yan Date: Wed, 7 Aug 2019 14:03:16 -0700 Subject: [PATCH 1/4] Hook afterOptimizeChunkAssets instead of afterOptimizeAssets --- index.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/index.js b/index.js index 872a892..df3574e 100644 --- a/index.js +++ b/index.js @@ -249,15 +249,15 @@ SubresourceIntegrityPlugin.prototype.addMissingIntegrityHashes = * Calculate SRI values for each chunk and replace the magic * placeholders by the actual values. */ -SubresourceIntegrityPlugin.prototype.afterOptimizeAssets = - function afterOptimizeAssets(compilation, assets) { +SubresourceIntegrityPlugin.prototype.afterOptimizeChunkAssets = + function afterOptimizeChunkAssets(compilation, chunks) { var self = this; - compilation.chunks.filter(util.isRuntimeChunk).forEach(function forEachChunk(chunk) { - self.processChunk(chunk, compilation, assets); + chunks.filter(util.isRuntimeChunk).forEach(function forEachChunk(chunk) { + self.processChunk(chunk, compilation, compilation.assets); }); - this.addMissingIntegrityHashes(assets); + this.addMissingIntegrityHashes(compilation.assets); }; SubresourceIntegrityPlugin.prototype.processTag = @@ -342,7 +342,7 @@ SubresourceIntegrityPlugin.prototype.registerHwpHooks = SubresourceIntegrityPlugin.prototype.thisCompilation = function thisCompilation(compiler, compilation) { - var afterOptimizeAssets = this.afterOptimizeAssets.bind(this, compilation); + var afterOptimizeChunkAssets = this.afterOptimizeChunkAssets.bind(this, compilation); var chunkAsset = this.chunkAsset.bind(this, compilation); var alterAssetTags = this.alterAssetTags.bind(this, compilation); var beforeHtmlGeneration = this.beforeHtmlGeneration.bind(this, compilation); @@ -364,11 +364,11 @@ SubresourceIntegrityPlugin.prototype.thisCompilation = * Modify the asset tags before webpack injects them for anything with an integrity value. */ if (compiler.hooks) { - compilation.hooks.afterOptimizeAssets.tap('SriPlugin', afterOptimizeAssets); + compilation.hooks.afterOptimizeChunkAssets.tap('SriPlugin', afterOptimizeChunkAssets); compilation.hooks.chunkAsset.tap('SriPlugin', chunkAsset); compiler.hooks.compilation.tap('HtmlWebpackPluginHooks', this.registerHwpHooks.bind(this, alterAssetTags, beforeHtmlGeneration)); } else { - compilation.plugin('after-optimize-assets', afterOptimizeAssets); + compilation.plugin('after-optimize-chunk-assets', afterOptimizeChunkAssets); compilation.plugin('chunk-asset', chunkAsset); compilation.plugin('html-webpack-plugin-alter-asset-tags', alterAssetTags); compilation.plugin('html-webpack-plugin-before-html-generation', beforeHtmlGeneration); From b37753be96239b3a6fe75f9e8a4cbe01bd10a9b1 Mon Sep 17 00:00:00 2001 From: Xin Yan Date: Wed, 7 Aug 2019 16:52:51 -0700 Subject: [PATCH 2/4] Update placeholder length --- index.js | 21 +++++++++++---------- jmtp.js | 3 ++- util.js | 5 +++-- 3 files changed, 16 insertions(+), 13 deletions(-) diff --git a/index.js b/index.js index df3574e..b4f2634 100644 --- a/index.js +++ b/index.js @@ -172,11 +172,12 @@ SubresourceIntegrityPlugin.prototype.replaceAsset = function replaceAsset( var newAsset; var magicMarker; var magicMarkerPos; + var hashFuncNames = this.options.hashFuncNames; newAsset = new ReplaceSource(assets[chunkFile]); Array.from(hashByChunkId.entries()).forEach(function replaceMagicMarkers(idAndHash) { - magicMarker = util.makePlaceholder(idAndHash[0]); + magicMarker = util.makePlaceholder(hashFuncNames, idAndHash[0]); magicMarkerPos = oldSource.indexOf(magicMarker); if (magicMarkerPos >= 0) { newAsset.replace( @@ -189,7 +190,7 @@ SubresourceIntegrityPlugin.prototype.replaceAsset = function replaceAsset( // eslint-disable-next-line no-param-reassign assets[chunkFile] = newAsset; - newAsset.integrity = util.computeIntegrity(this.options.hashFuncNames, newAsset.source()); + newAsset.integrity = util.computeIntegrity(hashFuncNames, newAsset.source()); return newAsset; }; @@ -249,15 +250,15 @@ SubresourceIntegrityPlugin.prototype.addMissingIntegrityHashes = * Calculate SRI values for each chunk and replace the magic * placeholders by the actual values. */ -SubresourceIntegrityPlugin.prototype.afterOptimizeChunkAssets = - function afterOptimizeChunkAssets(compilation, chunks) { +SubresourceIntegrityPlugin.prototype.afterOptimizeAssets = + function afterOptimizeAssets(compilation, assets) { var self = this; - chunks.filter(util.isRuntimeChunk).forEach(function forEachChunk(chunk) { - self.processChunk(chunk, compilation, compilation.assets); + compilation.chunks.filter(util.isRuntimeChunk).forEach(function forEachChunk(chunk) { + self.processChunk(chunk, compilation, assets); }); - this.addMissingIntegrityHashes(compilation.assets); + this.addMissingIntegrityHashes(assets); }; SubresourceIntegrityPlugin.prototype.processTag = @@ -342,7 +343,7 @@ SubresourceIntegrityPlugin.prototype.registerHwpHooks = SubresourceIntegrityPlugin.prototype.thisCompilation = function thisCompilation(compiler, compilation) { - var afterOptimizeChunkAssets = this.afterOptimizeChunkAssets.bind(this, compilation); + var afterOptimizeAssets = this.afterOptimizeAssets.bind(this, compilation); var chunkAsset = this.chunkAsset.bind(this, compilation); var alterAssetTags = this.alterAssetTags.bind(this, compilation); var beforeHtmlGeneration = this.beforeHtmlGeneration.bind(this, compilation); @@ -364,11 +365,11 @@ SubresourceIntegrityPlugin.prototype.thisCompilation = * Modify the asset tags before webpack injects them for anything with an integrity value. */ if (compiler.hooks) { - compilation.hooks.afterOptimizeChunkAssets.tap('SriPlugin', afterOptimizeChunkAssets); + compilation.hooks.afterOptimizeAssets.tap('SriPlugin', afterOptimizeAssets); compilation.hooks.chunkAsset.tap('SriPlugin', chunkAsset); compiler.hooks.compilation.tap('HtmlWebpackPluginHooks', this.registerHwpHooks.bind(this, alterAssetTags, beforeHtmlGeneration)); } else { - compilation.plugin('after-optimize-chunk-assets', afterOptimizeChunkAssets); + compilation.plugin('after-optimize-assets', afterOptimizeAssets); compilation.plugin('chunk-asset', chunkAsset); compilation.plugin('html-webpack-plugin-alter-asset-tags', alterAssetTags); compilation.plugin('html-webpack-plugin-before-html-generation', beforeHtmlGeneration); diff --git a/jmtp.js b/jmtp.js index faacfef..55e3015 100644 --- a/jmtp.js +++ b/jmtp.js @@ -17,6 +17,7 @@ WebIntegrityJsonpMainTemplatePlugin.prototype.addSriHashes = function addSriHashes(mainTemplate, source, chunk) { var allChunks = util.findChunks(chunk); var includedChunks = chunk.getChunkMaps().hash; + var hashFuncNames = this.sriPlugin.options.hashFuncNames; if (allChunks.size > 0) { return (Template.asString || mainTemplate.asString)([ @@ -29,7 +30,7 @@ WebIntegrityJsonpMainTemplatePlugin.prototype.addSriHashes = ) { if (includedChunks[depChunk.id.toString()]) { // eslint-disable-next-line no-param-reassign - sriHashes[depChunk.id] = util.makePlaceholder(depChunk.id); + sriHashes[depChunk.id] = util.makePlaceholder(hashFuncNames, depChunk.id); } return sriHashes; }, diff --git a/util.js b/util.js index f195a5c..523aea8 100644 --- a/util.js +++ b/util.js @@ -98,8 +98,9 @@ function isRuntimeChunk(chunk) { return "hasRuntime" in chunk ? chunk.hasRuntime() : chunk.entry; } -function makePlaceholder(id) { - return "*-*-*-CHUNK-SRI-HASH-" + id + "-*-*-*"; +function makePlaceholder(hashFuncNames, id) { + var placeholder = "*-*-*-CHUNK-SRI-HASH-" + id + "-*-*-*"; + return computeIntegrity(hashFuncNames, placeholder); } module.exports.computeIntegrity = computeIntegrity; From 5f5ad8ccab9ec717e0cf4246a992c3efeb249c7b Mon Sep 17 00:00:00 2001 From: Xin Yan Date: Thu, 8 Aug 2019 16:01:23 -0700 Subject: [PATCH 3/4] test example --- examples/sourcemap-code-splitting/1.js | 3 +++ examples/sourcemap-code-splitting/2.js | 3 +++ examples/sourcemap-code-splitting/README.md | 3 +++ examples/sourcemap-code-splitting/index.js | 3 +++ examples/sourcemap-code-splitting/test.js | 22 +++++++++++++++++++ .../webpack.config.js | 19 ++++++++++++++++ 6 files changed, 53 insertions(+) create mode 100644 examples/sourcemap-code-splitting/1.js create mode 100644 examples/sourcemap-code-splitting/2.js create mode 100644 examples/sourcemap-code-splitting/README.md create mode 100644 examples/sourcemap-code-splitting/index.js create mode 100644 examples/sourcemap-code-splitting/test.js create mode 100644 examples/sourcemap-code-splitting/webpack.config.js diff --git a/examples/sourcemap-code-splitting/1.js b/examples/sourcemap-code-splitting/1.js new file mode 100644 index 0000000..6952089 --- /dev/null +++ b/examples/sourcemap-code-splitting/1.js @@ -0,0 +1,3 @@ +export default { + chunk: 1, +}; diff --git a/examples/sourcemap-code-splitting/2.js b/examples/sourcemap-code-splitting/2.js new file mode 100644 index 0000000..9ce8e16 --- /dev/null +++ b/examples/sourcemap-code-splitting/2.js @@ -0,0 +1,3 @@ +export default { + chunk: 2, +}; diff --git a/examples/sourcemap-code-splitting/README.md b/examples/sourcemap-code-splitting/README.md new file mode 100644 index 0000000..d19b96b --- /dev/null +++ b/examples/sourcemap-code-splitting/README.md @@ -0,0 +1,3 @@ +# Sourcemap and code splitting + +Test case for sourcemap and code splitting diff --git a/examples/sourcemap-code-splitting/index.js b/examples/sourcemap-code-splitting/index.js new file mode 100644 index 0000000..89fcae6 --- /dev/null +++ b/examples/sourcemap-code-splitting/index.js @@ -0,0 +1,3 @@ +import('./1.js'); +import('./2.js'); +console.log('ok'); diff --git a/examples/sourcemap-code-splitting/test.js b/examples/sourcemap-code-splitting/test.js new file mode 100644 index 0000000..57f5697 --- /dev/null +++ b/examples/sourcemap-code-splitting/test.js @@ -0,0 +1,22 @@ +var expect = require('expect'); +var fs = require('fs'); +var path = require('path'); + +var webpackVersion = Number(require('webpack/package.json').version.split('.')[0]); + +module.exports.skip = function skip() { + return webpackVersion < 2; +}; + +module.exports.check = function check() { + var findAndStripSriHashString = function(filePath, pattern, offset = 0) { + var fileContent = fs.readFileSync(path.join(__dirname, filePath), 'utf-8'); + var string = fileContent.substring(fileContent.indexOf(pattern) + offset) + .match(/\{(.*?)\}/)[0].replace(/\\/g, '').replace(/\"/g, ''); + return string; + } + + var sriHashesInSource = findAndStripSriHashString('dist/index.js', 'sha256-', -10); + var sriHashesInMap = findAndStripSriHashString('dist/index.js.map', 'var sriHashes = '); + expect(sriHashesInSource.length).toEqual(sriHashesInMap.length); +}; diff --git a/examples/sourcemap-code-splitting/webpack.config.js b/examples/sourcemap-code-splitting/webpack.config.js new file mode 100644 index 0000000..12736e4 --- /dev/null +++ b/examples/sourcemap-code-splitting/webpack.config.js @@ -0,0 +1,19 @@ +var SriPlugin = require('webpack-subresource-integrity'); +var HtmlWebpackPlugin = require('html-webpack-plugin'); + +module.exports = { + entry: { + index: './index.js' + }, + output: { + crossOriginLoading: 'anonymous' + }, + devtool: 'source-map', + plugins: [ + new SriPlugin({ + hashFuncNames: ['sha256', 'sha384'], + enabled: true + }), + new HtmlWebpackPlugin() + ] +}; From fd70fb5eda679aab286ec18fb5a25a7a285ee070 Mon Sep 17 00:00:00 2001 From: Xin Yan Date: Thu, 8 Aug 2019 18:50:25 -0700 Subject: [PATCH 4/4] Fix test --- examples/sourcemap-code-splitting/test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/sourcemap-code-splitting/test.js b/examples/sourcemap-code-splitting/test.js index 57f5697..698ba06 100644 --- a/examples/sourcemap-code-splitting/test.js +++ b/examples/sourcemap-code-splitting/test.js @@ -9,9 +9,9 @@ module.exports.skip = function skip() { }; module.exports.check = function check() { - var findAndStripSriHashString = function(filePath, pattern, offset = 0) { + var findAndStripSriHashString = function(filePath, pattern, offset) { var fileContent = fs.readFileSync(path.join(__dirname, filePath), 'utf-8'); - var string = fileContent.substring(fileContent.indexOf(pattern) + offset) + var string = fileContent.substring(fileContent.indexOf(pattern) + (offset || 0)) .match(/\{(.*?)\}/)[0].replace(/\\/g, '').replace(/\"/g, ''); return string; }