Enable Trusted Types Compatibility in Webpack #36750

jgoping · 2022-05-07T18:19:14Z

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.
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. 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, 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.

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.

ijjk · 2022-05-07T18:44:21Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	jgoping/next.js tt-violation-fix-webpack	Change
buildDuration	15.8s	15.6s	-256ms
buildDurationCached	6.3s	6.4s	⚠️ +158ms
nodeModulesSize	479 MB	479 MB	⚠️ +368 B

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	⚠️ +0.02
/ avg req/sec	586.06	582.81	⚠️ -3.25
/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	⚠️ +93 B
Overall change	72.7 kB	72.7 kB	⚠️ +93 B

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	⚠️ +1 B
link.html gzip	546 B	547 B	⚠️ +1 B
withRouter.html gzip	528 B	528 B	✓
Overall change	1.61 kB	1.61 kB	⚠️ +2 B

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	⚠️ +59ms
buildDurationCached	6.2s	7.4s	⚠️ +1.2s
nodeModulesSize	479 MB	479 MB	⚠️ +368 B

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	⚠️ +0.14
/ avg req/sec	580.88	562.36	⚠️ -18.52
/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	⚠️ +92 B
Overall change	73.8 kB	73.9 kB	⚠️ +92 B

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

Commit: 40464e6

packages/next/build/webpack-config.ts

Enable Trusted Types compatibility in Webpack

4452321

jgoping requested review from timneutkens, ijjk, shuding, padmaia and huozhi as code owners May 7, 2022 18:19

ijjk added the type: next label May 7, 2022

ijjk reviewed May 9, 2022

View reviewed changes

packages/next/build/webpack-config.ts Outdated Show resolved Hide resolved

ijjk added 2 commits May 21, 2022 22:40

only enable for client build

baa9839

Merge branch 'canary' into tt-violation-fix-webpack

40464e6

ijjk approved these changes May 22, 2022

View reviewed changes

kodiakhq bot merged commit 15ddd20 into vercel:canary May 22, 2022

github-actions bot locked as resolved and limited conversation to collaborators Jun 21, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Enable Trusted Types Compatibility in Webpack #36750

Enable Trusted Types Compatibility in Webpack #36750

jgoping commented May 7, 2022

ijjk commented May 7, 2022 •

edited

Diffs

Diffs

Enable Trusted Types Compatibility in Webpack #36750

Enable Trusted Types Compatibility in Webpack #36750

Conversation

jgoping commented May 7, 2022

Feature

Documentation

Note:

ijjk commented May 7, 2022 • edited

Stats from current PR

Diffs

Diffs

ijjk commented May 7, 2022 •

edited