-
Notifications
You must be signed in to change notification settings - Fork 26.8k
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
Enable Trusted Types Compatibility in Webpack #36750
Merged
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jgoping
requested review from
timneutkens,
ijjk,
shuding,
padmaia and
huozhi
as code owners
May 7, 2022 18:19
Stats from current PRDefault Build (Increase detected
|
vercel/next.js canary | jgoping/next.js tt-violation-fix-webpack | Change | |
---|---|---|---|
buildDuration | 15.8s | 15.6s | -256ms |
buildDurationCached | 6.3s | 6.4s | |
nodeModulesSize | 479 MB | 479 MB |
Page Load Tests Overall increase ✓
vercel/next.js canary | jgoping/next.js tt-violation-fix-webpack | Change | |
---|---|---|---|
/ failed reqs | 0 | 0 | ✓ |
/ total time (seconds) | 4.266 | 4.29 | |
/ avg req/sec | 586.06 | 582.81 | |
/error-in-render failed reqs | 0 | 0 | ✓ |
/error-in-render total time (seconds) | 1.693 | 1.652 | -0.04 |
/error-in-render avg req/sec | 1476.3 | 1513.03 | +36.73 |
Client Bundles (main, webpack) Overall increase ⚠️
vercel/next.js canary | jgoping/next.js tt-violation-fix-webpack | Change | |
---|---|---|---|
925.HASH.js gzip | 179 B | 179 B | ✓ |
framework-HASH.js gzip | 42 kB | 42 kB | ✓ |
main-HASH.js gzip | 29 kB | 29 kB | ✓ |
webpack-HASH.js gzip | 1.44 kB | 1.54 kB | |
Overall change | 72.7 kB | 72.7 kB |
Legacy Client Bundles (polyfills)
vercel/next.js canary | jgoping/next.js tt-violation-fix-webpack | Change | |
---|---|---|---|
polyfills-HASH.js gzip | 31 kB | 31 kB | ✓ |
Overall change | 31 kB | 31 kB | ✓ |
Client Pages
vercel/next.js canary | jgoping/next.js tt-violation-fix-webpack | Change | |
---|---|---|---|
_app-HASH.js gzip | 1.36 kB | 1.36 kB | ✓ |
_error-HASH.js gzip | 193 B | 193 B | ✓ |
amp-HASH.js gzip | 308 B | 308 B | ✓ |
css-HASH.js gzip | 327 B | 327 B | ✓ |
dynamic-HASH.js gzip | 2.71 kB | 2.71 kB | ✓ |
head-HASH.js gzip | 359 B | 359 B | ✓ |
hooks-HASH.js gzip | 920 B | 920 B | ✓ |
image-HASH.js gzip | 5.73 kB | 5.73 kB | ✓ |
index-HASH.js gzip | 263 B | 263 B | ✓ |
link-HASH.js gzip | 2.65 kB | 2.65 kB | ✓ |
routerDirect..HASH.js gzip | 320 B | 320 B | ✓ |
script-HASH.js gzip | 391 B | 391 B | ✓ |
withRouter-HASH.js gzip | 318 B | 318 B | ✓ |
85e02e95b279..7e3.css gzip | 107 B | 107 B | ✓ |
Overall change | 16 kB | 16 kB | ✓ |
Client Build Manifests
vercel/next.js canary | jgoping/next.js tt-violation-fix-webpack | Change | |
---|---|---|---|
_buildManifest.js gzip | 458 B | 458 B | ✓ |
Overall change | 458 B | 458 B | ✓ |
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary | jgoping/next.js tt-violation-fix-webpack | Change | |
---|---|---|---|
index.html gzip | 532 B | 533 B | |
link.html gzip | 546 B | 547 B | |
withRouter.html gzip | 528 B | 528 B | ✓ |
Overall change | 1.61 kB | 1.61 kB |
Diffs
Diff for webpack-HASH.js
@@ -227,7 +227,7 @@
/******/
}
/******/ script.setAttribute("data-webpack", dataWebpackPrefix + key);
- /******/ script.src = url;
+ /******/ script.src = __webpack_require__.tu(url);
/******/
}
/******/ inProgress[url] = [done];
@@ -274,6 +274,41 @@
/******/
};
/******/
+ })(); /* webpack/runtime/trusted types policy */
+ /******/
+
+ /******/ /******/ !(function() {
+ /******/ var policy;
+ /******/ __webpack_require__.tt = function() {
+ /******/ // Create Trusted Type policy if Trusted Types are available and the policy doesn't exist yet.
+ /******/ if (policy === undefined) {
+ /******/ policy = {
+ /******/ createScriptURL: function(url) {
+ return url;
+ }
+ /******/
+ };
+ /******/ if (
+ typeof trustedTypes !== "undefined" &&
+ trustedTypes.createPolicy
+ ) {
+ /******/ policy = trustedTypes.createPolicy("nextjs#bundler", policy);
+ /******/
+ }
+ /******/
+ }
+ /******/ return policy;
+ /******/
+ };
+ /******/
+ })(); /* webpack/runtime/trusted types script url */
+ /******/
+
+ /******/ /******/ !(function() {
+ /******/ __webpack_require__.tu = function(url) {
+ return __webpack_require__.tt().createScriptURL(url);
+ };
+ /******/
})(); /* webpack/runtime/publicPath */
/******/
Diff for index.html
@@ -11,7 +11,7 @@
src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"
></script>
<script
- src="/_next/static/chunks/webpack-3056e3dc42986fee.js"
+ src="/_next/static/chunks/webpack-a8ec7a8afb39005b.js"
defer=""
></script>
<script
Diff for link.html
@@ -11,7 +11,7 @@
src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"
></script>
<script
- src="/_next/static/chunks/webpack-3056e3dc42986fee.js"
+ src="/_next/static/chunks/webpack-a8ec7a8afb39005b.js"
defer=""
></script>
<script
Diff for withRouter.html
@@ -11,7 +11,7 @@
src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"
></script>
<script
- src="/_next/static/chunks/webpack-3056e3dc42986fee.js"
+ src="/_next/static/chunks/webpack-a8ec7a8afb39005b.js"
defer=""
></script>
<script
Default Build with SWC (Increase detected ⚠️ )
General Overall increase ⚠️
vercel/next.js canary | jgoping/next.js tt-violation-fix-webpack | Change | |
---|---|---|---|
buildDuration | 18s | 18.1s | |
buildDurationCached | 6.2s | 7.4s | |
nodeModulesSize | 479 MB | 479 MB |
Page Load Tests Overall increase ✓
vercel/next.js canary | jgoping/next.js tt-violation-fix-webpack | Change | |
---|---|---|---|
/ failed reqs | 0 | 0 | ✓ |
/ total time (seconds) | 4.304 | 4.446 | |
/ avg req/sec | 580.88 | 562.36 | |
/error-in-render failed reqs | 0 | 0 | ✓ |
/error-in-render total time (seconds) | 1.733 | 1.606 | -0.13 |
/error-in-render avg req/sec | 1442.21 | 1556.9 | +114.69 |
Client Bundles (main, webpack) Overall increase ⚠️
vercel/next.js canary | jgoping/next.js tt-violation-fix-webpack | Change | |
---|---|---|---|
925.HASH.js gzip | 178 B | 178 B | ✓ |
framework-HASH.js gzip | 42.7 kB | 42.7 kB | ✓ |
main-HASH.js gzip | 29.5 kB | 29.5 kB | ✓ |
webpack-HASH.js gzip | 1.45 kB | 1.54 kB | |
Overall change | 73.8 kB | 73.9 kB |
Legacy Client Bundles (polyfills)
vercel/next.js canary | jgoping/next.js tt-violation-fix-webpack | Change | |
---|---|---|---|
polyfills-HASH.js gzip | 31 kB | 31 kB | ✓ |
Overall change | 31 kB | 31 kB | ✓ |
Client Pages
vercel/next.js canary | jgoping/next.js tt-violation-fix-webpack | Change | |
---|---|---|---|
_app-HASH.js gzip | 1.35 kB | 1.35 kB | ✓ |
_error-HASH.js gzip | 179 B | 179 B | ✓ |
amp-HASH.js gzip | 311 B | 311 B | ✓ |
css-HASH.js gzip | 324 B | 324 B | ✓ |
dynamic-HASH.js gzip | 2.89 kB | 2.89 kB | ✓ |
head-HASH.js gzip | 357 B | 357 B | ✓ |
hooks-HASH.js gzip | 920 B | 920 B | ✓ |
image-HASH.js gzip | 5.82 kB | 5.82 kB | ✓ |
index-HASH.js gzip | 261 B | 261 B | ✓ |
link-HASH.js gzip | 2.78 kB | 2.78 kB | ✓ |
routerDirect..HASH.js gzip | 322 B | 322 B | ✓ |
script-HASH.js gzip | 392 B | 392 B | ✓ |
withRouter-HASH.js gzip | 317 B | 317 B | ✓ |
85e02e95b279..7e3.css gzip | 107 B | 107 B | ✓ |
Overall change | 16.3 kB | 16.3 kB | ✓ |
Client Build Manifests
vercel/next.js canary | jgoping/next.js tt-violation-fix-webpack | Change | |
---|---|---|---|
_buildManifest.js gzip | 457 B | 457 B | ✓ |
Overall change | 457 B | 457 B | ✓ |
Rendered Page Sizes
vercel/next.js canary | jgoping/next.js tt-violation-fix-webpack | Change | |
---|---|---|---|
index.html gzip | 532 B | 532 B | ✓ |
link.html gzip | 546 B | 546 B | ✓ |
withRouter.html gzip | 528 B | 528 B | ✓ |
Overall change | 1.61 kB | 1.61 kB | ✓ |
Diffs
Diff for webpack-HASH.js
@@ -227,7 +227,7 @@
/******/
}
/******/ script.setAttribute("data-webpack", dataWebpackPrefix + key);
- /******/ script.src = url;
+ /******/ script.src = __webpack_require__.tu(url);
/******/
}
/******/ inProgress[url] = [done];
@@ -274,6 +274,41 @@
/******/
};
/******/
+ })(); /* webpack/runtime/trusted types policy */
+ /******/
+
+ /******/ /******/ !(function() {
+ /******/ var policy;
+ /******/ __webpack_require__.tt = function() {
+ /******/ // Create Trusted Type policy if Trusted Types are available and the policy doesn't exist yet.
+ /******/ if (policy === undefined) {
+ /******/ policy = {
+ /******/ createScriptURL: function(url) {
+ return url;
+ }
+ /******/
+ };
+ /******/ if (
+ typeof trustedTypes !== "undefined" &&
+ trustedTypes.createPolicy
+ ) {
+ /******/ policy = trustedTypes.createPolicy("nextjs#bundler", policy);
+ /******/
+ }
+ /******/
+ }
+ /******/ return policy;
+ /******/
+ };
+ /******/
+ })(); /* webpack/runtime/trusted types script url */
+ /******/
+
+ /******/ /******/ !(function() {
+ /******/ __webpack_require__.tu = function(url) {
+ return __webpack_require__.tt().createScriptURL(url);
+ };
+ /******/
})(); /* webpack/runtime/publicPath */
/******/
Diff for index.html
@@ -11,7 +11,7 @@
src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"
></script>
<script
- src="/_next/static/chunks/webpack-3056e3dc42986fee.js"
+ src="/_next/static/chunks/webpack-a8ec7a8afb39005b.js"
defer=""
></script>
<script
Diff for link.html
@@ -11,7 +11,7 @@
src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"
></script>
<script
- src="/_next/static/chunks/webpack-3056e3dc42986fee.js"
+ src="/_next/static/chunks/webpack-a8ec7a8afb39005b.js"
defer=""
></script>
<script
Diff for withRouter.html
@@ -11,7 +11,7 @@
src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"
></script>
<script
- src="/_next/static/chunks/webpack-3056e3dc42986fee.js"
+ src="/_next/static/chunks/webpack-a8ec7a8afb39005b.js"
defer=""
></script>
<script
ijjk
reviewed
May 9, 2022
ijjk
approved these changes
May 22, 2022
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Linked to issue #32209.
Feature
fixes #number
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. This source map involves passing raw strings to
eval()
calls, which raise Trusted Types violations. The solution to this problem is to setwebpack5Config.output.trustedTypes
in the Webpack config. As shown in the documentation here, 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 theeval()
calls will be promoted to be of typeTrustedScript
. The issue where this was addressed in Webpack can be found here.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 thatnextjs#bundler
is preferred overnextjs#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.