(next/script): Omit src for children and dangerouslySetInnerHTML props #26367

prichodko · 2021-06-19T17:16:10Z

When using next/script with children prop or dangerouslySetInnerHTML together with beforeInteractive strategy. The DOM element is created with src="(unknown)" which prevents from executing the inline script.

This PR adds an explicit condition to omit src field in those cases.

Fixes: #26343, #26240

ijjk · 2021-06-19T17:27:09Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	prichodko/next.js fix/next-script-src-inline	Change
buildDuration	12.6s	12.6s	-23ms
buildDurationCached	3.1s	3.1s	-10ms
nodeModulesSize	49.2 MB	49.2 MB	⚠️ +228 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	prichodko/next.js fix/next-script-src-inline	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.322	2.268	-0.05
/ avg req/sec	1076.57	1102.19	+25.62
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.287	1.3	⚠️ +0.01
/error-in-render avg req/sec	1942.82	1923.74	⚠️ -19.08

Client Bundles (main, webpack, commons) Overall increase ⚠️

	vercel/next.js canary	prichodko/next.js fix/next-script-src-inline	Change
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	20.2 kB	20.2 kB	⚠️ +12 B
webpack-HASH.js gzip	810 B	810 B	✓
Overall change	63 kB	63 kB	⚠️ +12 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	prichodko/next.js fix/next-script-src-inline	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	prichodko/next.js fix/next-script-src-inline	Change
_app-HASH.js gzip	801 B	801 B	✓
_error-HASH.js gzip	3.17 kB	3.17 kB	✓
amp-HASH.js gzip	527 B	527 B	✓
css-HASH.js gzip	330 B	330 B	✓
hooks-HASH.js gzip	903 B	903 B	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.65 kB	1.65 kB	✓
routerDirect..HASH.js gzip	322 B	322 B	✓
withRouter-HASH.js gzip	320 B	320 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	8.41 kB	8.41 kB	✓

Client Build Manifests

	vercel/next.js canary	prichodko/next.js fix/next-script-src-inline	Change
_buildManifest.js gzip	392 B	392 B	✓
Overall change	392 B	392 B	✓

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	prichodko/next.js fix/next-script-src-inline	Change
index.html gzip	523 B	523 B	✓
link.html gzip	532 B	534 B	⚠️ +2 B
withRouter.html gzip	514 B	516 B	⚠️ +2 B
Overall change	1.57 kB	1.57 kB	⚠️ +4 B

Diffs

Diff for main-HASH.js

@@ -2999,6 +2999,10 @@
             continue;
           }
 
+          if ((dangerouslySetInnerHTML || children) && k === "src") {
+            continue;
+          }
+
           var attr = _headManager.DOMAttributeNames[k] || k.toLowerCase();
           el.setAttribute(attr, value);
         }

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-f7adf56f2601c8465f9f.js"
+      src="/_next/static/chunks/main-761107ed5551b8a9b6bd.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-f7adf56f2601c8465f9f.js"
+      src="/_next/static/chunks/main-761107ed5551b8a9b6bd.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-f7adf56f2601c8465f9f.js"
+      src="/_next/static/chunks/main-761107ed5551b8a9b6bd.js"
       defer=""
     ></script>
     <script

Serverless Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	prichodko/next.js fix/next-script-src-inline	Change
buildDuration	14.4s	14.3s	-121ms
buildDurationCached	4.2s	4.3s	⚠️ +32ms
nodeModulesSize	49.2 MB	49.2 MB	⚠️ +228 B

Client Bundles (main, webpack, commons) Overall increase ⚠️

	vercel/next.js canary	prichodko/next.js fix/next-script-src-inline	Change
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	20.2 kB	20.2 kB	⚠️ +12 B
webpack-HASH.js gzip	810 B	810 B	✓
Overall change	63 kB	63 kB	⚠️ +12 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	prichodko/next.js fix/next-script-src-inline	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	prichodko/next.js fix/next-script-src-inline	Change
_app-HASH.js gzip	801 B	801 B	✓
_error-HASH.js gzip	3.17 kB	3.17 kB	✓
amp-HASH.js gzip	527 B	527 B	✓
css-HASH.js gzip	330 B	330 B	✓
hooks-HASH.js gzip	903 B	903 B	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.65 kB	1.65 kB	✓
routerDirect..HASH.js gzip	322 B	322 B	✓
withRouter-HASH.js gzip	320 B	320 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	8.41 kB	8.41 kB	✓

Client Build Manifests

	vercel/next.js canary	prichodko/next.js fix/next-script-src-inline	Change
_buildManifest.js gzip	392 B	392 B	✓
Overall change	392 B	392 B	✓

Serverless bundles Overall increase ⚠️

	vercel/next.js canary	prichodko/next.js fix/next-script-src-inline	Change
_error.js	16.9 kB	16.9 kB	⚠️ +2 B
404.html	1.98 kB	1.98 kB	✓
500.html	1.96 kB	1.96 kB	✓
amp.amp.html	10.8 kB	10.8 kB	✓
amp.html	1.17 kB	1.17 kB	✓
css.html	1.35 kB	1.35 kB	✓
hooks.html	1.23 kB	1.23 kB	✓
index.js	17.2 kB	17.2 kB	✓
link.js	17.5 kB	17.5 kB	✓
routerDirect.js	17.3 kB	17.3 kB	✓
withRouter.js	17.3 kB	17.3 kB	✓
Overall change	105 kB	105 kB	⚠️ +2 B

Webpack 4 Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	prichodko/next.js fix/next-script-src-inline	Change
buildDuration	11.2s	11.3s	⚠️ +131ms
buildDurationCached	4.7s	4.5s	-142ms
nodeModulesSize	49.2 MB	49.2 MB	⚠️ +228 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	prichodko/next.js fix/next-script-src-inline	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.281	2.326	⚠️ +0.04
/ avg req/sec	1096.16	1074.79	⚠️ -21.37
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.286	1.324	⚠️ +0.04
/error-in-render avg req/sec	1944.57	1888.86	⚠️ -55.71

Client Bundles (main, webpack, commons) Overall increase ⚠️

	vercel/next.js canary	prichodko/next.js fix/next-script-src-inline	Change
677f882d2ed8..HASH.js gzip	13.3 kB	13.3 kB	✓
framework.HASH.js gzip	41.8 kB	41.8 kB	✓
main-HASH.js gzip	7.99 kB	8 kB	⚠️ +7 B
webpack-HASH.js gzip	757 B	757 B	✓
Overall change	63.8 kB	63.9 kB	⚠️ +7 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	prichodko/next.js fix/next-script-src-inline	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	prichodko/next.js fix/next-script-src-inline	Change
_app-HASH.js gzip	1.07 kB	1.07 kB	✓
_error-HASH.js gzip	3.84 kB	3.84 kB	✓
amp-HASH.js gzip	536 B	536 B	✓
css-HASH.js gzip	333 B	333 B	✓
hooks-HASH.js gzip	910 B	910 B	✓
index-HASH.js gzip	227 B	227 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	295 B	295 B	✓
withRouter-HASH.js gzip	292 B	292 B	✓
e025d2764813..52f.css gzip	125 B	125 B	✓
Overall change	9.28 kB	9.28 kB	✓

Client Build Manifests

	vercel/next.js canary	prichodko/next.js fix/next-script-src-inline	Change
_buildManifest.js gzip	420 B	420 B	✓
Overall change	420 B	420 B	✓

Rendered Page Sizes Overall decrease ✓

	vercel/next.js canary	prichodko/next.js fix/next-script-src-inline	Change
index.html gzip	568 B	568 B	✓
link.html gzip	581 B	581 B	✓
withRouter.html gzip	561 B	560 B	-1 B
Overall change	1.71 kB	1.71 kB	-1 B

Diffs

Diff for main-HASH.js

@@ -175,6 +175,10 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
             continue;
           }
 
+          if ((dangerouslySetInnerHTML || children) && k === "src") {
+            continue;
+          }
+
           var attr = _headManager.DOMAttributeNames[k] || k.toLowerCase();
           el.setAttribute(attr, value);
         }

Diff for index.html

@@ -23,7 +23,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-a24959f9624e5f7ac792.js"
+      src="/_next/static/chunks/main-f23e849bcc6eff1762e6.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -23,7 +23,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-a24959f9624e5f7ac792.js"
+      src="/_next/static/chunks/main-f23e849bcc6eff1762e6.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -23,7 +23,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-a24959f9624e5f7ac792.js"
+      src="/_next/static/chunks/main-f23e849bcc6eff1762e6.js"
       defer=""
     ></script>
     <script

Commit: 13748de

ijjk · 2021-06-19T17:34:41Z

Failing test suites

Commit: 13748de

test/integration/build-output/test/index.test.js

Build Output > Basic Application Output (with experimental.gzipSize: false) > should not deviate from snapshot

Expand output

● Build Output › Basic Application Output (with experimental.gzipSize: false) › should not deviate from snapshot

expect(received).toBeCloseTo(expected, precision)

Expected: 204
Received: 205

Expected precision:    1
Expected difference: < 0.05
Received difference:   1

  130 |           expect(err404Size.endsWith('kB')).toBe(true)
  131 |
> 132 |           expect(parseFloat(err404FirstLoad)).toBeCloseTo(gz ? 66.9 : 204, 1)
      |                                               ^
  133 |           expect(err404FirstLoad.endsWith('kB')).toBe(true)
  134 |
  135 |           expect(parseFloat(sharedByAll)).toBeCloseTo(gz ? 63.7 : 196, 1)

  at Object.<anonymous> (integration/build-output/test/index.test.js:132:47)

test/integration/basic/test/index.test.js

Basic Features > should polyfill Node.js modules

Expand output

● Basic Features › should polyfill Node.js modules

thrown: "Exceeded timeout of 300000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  35 |   afterAll(() => killApp(context.server))
  36 |
> 37 |   it('should polyfill Node.js modules', async () => {
     |   ^
  38 |     const browser = await webdriver(context.appPort, '/node-browser-polyfills')
  39 |
  40 |     console.error({

  at integration/basic/test/index.test.js:37:3
  at Object.<anonymous> (integration/basic/test/index.test.js:18:1)

ijjk

Hi, this should be fixed in the latest canary of Next.js, please update and give it a try!

Omit src when using inline script

13748de

prichodko requested review from divmain, ijjk, lfades, shuding and timneutkens as code owners June 19, 2021 17:16

ijjk added the type: next label Jun 19, 2021

prichodko marked this pull request as draft June 19, 2021 17:29

ijjk reviewed May 22, 2022

View reviewed changes

ijjk closed this May 22, 2022

prichodko deleted the fix/next-script-src-inline branch May 23, 2022 14:49

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(next/script): Omit src for children and dangerouslySetInnerHTML props #26367

(next/script): Omit src for children and dangerouslySetInnerHTML props #26367

prichodko commented Jun 19, 2021 •

edited

Loading

ijjk commented Jun 19, 2021

Diffs

Diffs

ijjk commented Jun 19, 2021 •

edited

Loading

ijjk left a comment

(next/script): Omit src for children and dangerouslySetInnerHTML props #26367

(next/script): Omit src for children and dangerouslySetInnerHTML props #26367

Conversation

prichodko commented Jun 19, 2021 • edited Loading

ijjk commented Jun 19, 2021

Stats from current PR

Diffs

Diffs

ijjk commented Jun 19, 2021 • edited Loading

Failing test suites

ijjk left a comment

Choose a reason for hiding this comment

prichodko commented Jun 19, 2021 •

edited

Loading

ijjk commented Jun 19, 2021 •

edited

Loading