Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can not use with external scripts in webpack 5 #167

Open
Katochimoto opened this issue Sep 3, 2021 · 6 comments
Open

Can not use with external scripts in webpack 5 #167

Katochimoto opened this issue Sep 3, 2021 · 6 comments

Comments

@Katochimoto
Copy link

Katochimoto commented Sep 3, 2021

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

Webpack config

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

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

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

@jscheid
Copy link
Collaborator

jscheid commented Sep 3, 2021

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
Copy link
Collaborator

jscheid commented Sep 3, 2021

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

@Katochimoto
Copy link
Author

Katochimoto commented Sep 3, 2021

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....'
  },
}),

@themgoncalves
Copy link

themgoncalves commented Sep 20, 2021

@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

@lucasrainett
Copy link

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] = "";

@juanhuang99
Copy link

juanhuang99 commented May 27, 2024

@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 I had the same problem. Did you solve it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants