Skip to content

Commit

Permalink
Enable Trusted Types Compatibility in Webpack (#36750)
Browse files Browse the repository at this point in the history
Linked to issue #32209.

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation
The purpose of this PR is to enable Trusted Types compatibility in Webpack. When the app is run in development mode, Webpack is currently set to use an [eval-source-map](https://github.com/vercel/next.js/blob/5a16b1a26f6c213776deed9ac465e2bc81cdf5f3/packages/next/build/webpack/config/blocks/base.ts#L33). This source map involves passing raw strings to `eval()` calls, which raise Trusted Types violations. The solution to this problem is to set `webpack5Config.output.trustedTypes` in the Webpack config. As shown in the documentation [here](https://webpack.js.org/configuration/output/#outputtrustedtypes), setting this value to a string will create a Trusted Types policy with the specified name. By creating a policy within Webpack, the raw strings passed to the `eval()` calls will be promoted to be of type `TrustedScript`. The issue where this was addressed in Webpack can be found [here](webpack/webpack#14075).

### Note:
The policy name that is set in the Webpack config is currently `nextjs#bundler`. Once it is released to the public and application developers begin using it, it may be harder to change the value since any application developers with a custom policy name allowlist would now need to update their next.config.js headers to allow this new name. Thus, a good name should ideally be determined before this pull request is merged. The reason that `nextjs#bundler` is preferred over `nextjs#webpack` is in case Next.js moves to a different bundler in the future. Having a generic name would allow for application developers to keep their next.config.js file the same after the bundler switch has occurred. If a different name is preferred, feel free to comment what that would be.

The code was tested in a sample application to ensure it behaved as expected.

Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
  • Loading branch information
jgoping and ijjk committed May 22, 2022
1 parent a31793e commit 15ddd20
Showing 1 changed file with 8 additions and 1 deletion.
9 changes: 8 additions & 1 deletion packages/next/build/webpack-config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1724,8 +1724,15 @@ export default async function getBaseWebpackConfig(
},
}

if (!webpack5Config.output) {
webpack5Config.output = {}
}
if (isClient) {
webpack5Config.output.trustedTypes = 'nextjs#bundler'
}

if (isClient || isEdgeServer) {
webpack5Config.output!.enabledLibraryTypes = ['assign']
webpack5Config.output.enabledLibraryTypes = ['assign']
}

if (dev) {
Expand Down

0 comments on commit 15ddd20

Please sign in to comment.