archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
rsnext/packages/next
History
Justin Goping 15ddd20b1b
Enable Trusted Types Compatibility in Webpack (#36750) 
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](5a16b1a26f/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](https://github.com/webpack/webpack/issues/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>
2022-05-22 04:25:26 +00:00
..
bin Support graceful shutdowns (#36909) 2022-05-16 14:40:39 +00:00
build Enable Trusted Types Compatibility in Webpack (#36750) 2022-05-22 04:25:26 +00:00
bundles update webpack (#35867) 2022-04-07 16:00:26 +00:00
cli chore: clarify CLI network errors (#36567) 2022-04-29 12:39:17 +00:00
client Ensure hydration error doc link is shown with react 18 (#37074) 2022-05-20 19:04:27 +00:00
compiled Update to latest version of @vercel/nft (#37041) 2022-05-19 11:57:31 -05:00
export Keep custom app as non server component (#37044) 2022-05-20 18:07:20 +00:00
image-types Don't import internally from types in next-env.d.ts (#34394) 2022-02-19 04:25:49 +01:00
lib Extract and refactor getPageStaticInfo (#37062) 2022-05-20 14:24:00 +02:00
pages feat: Opt-out Error page from dark scheme color (#36951) 2022-05-21 22:35:17 -05:00
server Properly await for this.hasPage() in base-server (#37091) 2022-05-21 23:00:49 -05:00
shared/lib Deprecate nested Middleware in favor of root middleware (#36772) 2022-05-19 15:46:21 +00:00
telemetry Telemetry: track usage of 'experimental/nextScriptWorkers' (#36812) 2022-05-11 19:18:44 +00:00
trace feat(trace): postprocess trace reporter for datadog (#35032) 2022-03-08 08:15:09 -08:00
types Add falling back to wasm swc build on native load failure (#36612) 2022-05-02 21:11:45 +00:00
amp.d.ts
amp.js
app.d.ts Improve exported root definitions (#32077) 2021-12-03 07:16:29 +00:00
app.js
babel.d.ts
babel.js
client.d.ts Improve exported root definitions (#32077) 2021-12-03 07:16:29 +00:00
client.js
config.d.ts Improve exported root definitions (#32077) 2021-12-03 07:16:29 +00:00
config.js
constants.d.ts
constants.js
data.d.ts
data.js
data.sqlite
document.d.ts Fix document type import path (#32117) 2021-12-04 10:23:15 +00:00
document.js
dynamic.d.ts Improve exported root definitions (#32077) 2021-12-03 07:16:29 +00:00
dynamic.js
error.d.ts Improve exported root definitions (#32077) 2021-12-03 07:16:29 +00:00
error.js
head.d.ts Improve exported root definitions (#32077) 2021-12-03 07:16:29 +00:00
head.js fix(#36435): apply correct fix (#36464) 2022-04-26 11:15:49 -05:00
image.d.ts Improve exported root definitions (#32077) 2021-12-03 07:16:29 +00:00
image.js
index.d.ts Include submodules in exported type definition (#28316) 2021-11-26 14:46:56 +01:00
jest.d.ts Improve exported root definitions (#32077) 2021-12-03 07:16:29 +00:00
jest.js fix(#36534): enable interopClientDefaultExport for next/jest (#36824) 2022-05-11 13:13:13 -05:00
license.md Update license year 2022-01-13 16:02:34 +01:00
link.d.ts Improve exported root definitions (#32077) 2021-12-03 07:16:29 +00:00
link.js
package.json v12.1.7-canary.10 2022-05-19 17:11:19 -05:00
README.md
router.d.ts Improve exported root definitions (#32077) 2021-12-03 07:16:29 +00:00
router.js
script.d.ts Improve exported root definitions (#32077) 2021-12-03 07:16:29 +00:00
script.js
server.d.ts Add TS types for NextMiddleware (#30578) 2021-11-30 20:43:40 +00:00
server.js Convert server.js to module.exports (#35181) 2022-03-09 22:50:07 +00:00
streaming.d.ts Group streaming experimental apis (#33878) 2022-02-02 13:42:14 +00:00
streaming.js Group streaming experimental apis (#33878) 2022-02-02 13:42:14 +00:00
taskfile-ncc.js Update to latest ncc and ensure caniuse-lite data is external (#32064) 2021-12-08 10:41:35 -06:00
taskfile-swc.js Fix interopDefault on jest object-proxy (#37002) 2022-05-18 09:41:13 +00:00
taskfile.js Keep custom app as non server component (#37044) 2022-05-20 18:07:20 +00:00
tsconfig.json Integrate tsec into the linting process (#33746) 2022-02-24 16:59:18 -08:00

README.md

Next.js

Getting Started

Visit https://nextjs.org/learn to get started with Next.js.

Documentation

Visit https://nextjs.org/docs to view the full documentation.

Who is using Next.js?

Next.js is used by the world's leading companies. Check out the Next.js Showcase to learn more.

Community

The Next.js community can be found on GitHub Discussions, where you can ask questions, voice ideas, and share your projects.

To chat with other community members you can join the Next.js Discord.

Our Code of Conduct applies to all Next.js community channels.

Contributing

Please see our contributing.md.

Good First Issues

We have a list of good first issues that contain bugs which have a relatively limited scope. This is a great place to get started, gain experience, and get familiar with our contribution process.

Authors