webpack-subresource-integrity icon indicating copy to clipboard operation
webpack-subresource-integrity copied to clipboard

Can not use with external scripts in webpack 5

Open Katochimoto opened this issue 3 years ago • 6 comments

"webpack": "5.51.1" "webpack-subresource-integrity": "5.0.0"

Webpack config

externalsType: 'script',
externals: {
    three: [
      'https://unpkg.com/[email protected]/build/three.min.js',
      'THREE',
    ],
},

Error Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'undefined')

https://disk.yandex.ru/d/jkJgW-Q0zLSg4Q

Katochimoto avatar Sep 03 '21 07:09 Katochimoto

Interesting. What do you expect to happen instead? I'm asking because without supplying the integrity hash in some way via config, you're probably better off disabling this plugin anyway.

That said at the very least we should be printing a better error message in this case.

jscheid avatar Sep 03 '21 07:09 jscheid

If you do want to use SRI, the best workaround is probably to use an explicit <script> tag with integrity like in the example at the top of https://webpack.js.org/configuration/externals/#externals

jscheid avatar Sep 03 '21 08:09 jscheid

At least report the error as a warning without interrupting the build process. Or it might be worth providing the ability to add your own hashes by names.

new SubresourceIntegrityPlugin({
  hashFuncNames: ['sha256', 'sha384', 'sha512'],
  externals: {
    three: 'sha256-r5u4pYJrMfo.... sha384-r5u4pYJrMfo....'
  },
}),

Katochimoto avatar Sep 03 '21 08:09 Katochimoto

@jscheid the same issue happens for the following scenario, where I inject an external script:

    new HtmlWebpackTagsPlugin({
      append: false,
      usePublicPath: false,
      scripts: [
        {
          path: `https://www.googletagmanager.com/gtag/js?id=ID`,
          attributes: { async: true, integrity: false },
        },
      ],
    }),

Where it outputs

ERROR in   Error: ENOENT: no such file or directory, open '/Users/<username>/<application-name>/https:/www.googletagmanager.com/gtag/js?id=foo'

  - plugin.js:199 Plugin.processTag
    [<application-name>]/[webpack-subresource-integrity]/plugin.js:199:78

  - plugin.js:229
    [<application-name>]/[webpack-subresource-integrity]/plugin.js:229:40

  - Array.forEach

  - plugin.js:229 Plugin.handleHwpBodyTags
    [<application-name>]/[webpack-subresource-integrity]/plugin.js:229:18

  - index.js:94
    [<application-name>]/[webpack-subresource-integrity]/index.js:94:28


  - index.js:572 onAlterAssetTagGroups
    [<application-name>]/[html-webpack-tags-plugin]/index.js:572:9

themgoncalves avatar Sep 20 '21 07:09 themgoncalves

I was getting this message

Error parsing 'integrity' attribute ('undefined'). The hash algorithm must be one of 'sha256', 'sha384', or 'sha512', followed by a '-' character.

this will inject the scripts without the integrity attribute.

__webpack_require__.sriHashes[undefined] = "";

lucasrainett avatar Oct 26 '21 14:10 lucasrainett