Skip to content
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

correctly assess node equality when nonce attribute is present #27573

Merged
merged 16 commits into from
Nov 11, 2021

Conversation

ericbiewener
Copy link
Contributor

fixes #25313

When a nonce is present on an element, browsers such as Chrome and Firefox strip it out of the actual HTML attributes for security reasons when the element is added to the document. Thus, given two equivalent elements that have nonces, Element,isEqualNode() will return false if one of those elements gets added to the document. Although the element.nonce property will be the same for both elements, the one that was added to the document will return an empty string for its nonce HTML attribute value. This custom isEqualNode() function therefore removes the nonce value from the newTag before comparing it to oldTag, restoring it afterwards.

For more information, see: https://bugs.chromium.org/p/chromium/issues/detail?id=1211471#c12

Bug

  • Related issues linked using fixes #number
  • Integration tests added
  • Errors have helpful link attached, see contributing.md

Documentation / Examples

  • Make sure the linting passes

@ericbiewener ericbiewener marked this pull request as ready for review July 29, 2021 19:28
@ericbiewener
Copy link
Contributor Author

I need some help getting an integration test to work. Since I need the ability to set a CSP header, that means I need to use a custom server in the test. I've got two approaches in this PR, but neither is working. In both cases, I get error output that looks like this:

image

@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

@ijjk
Copy link
Member

ijjk commented Nov 10, 2021

Failing test suites

Commit: 0109113

test/integration/head-manager/test/nonce.test.js

  • nonce > Re-rendering should not re-execute the script
Expand output

● nonce › Re-rendering should not re-execute the script

expect(received).toEqual(expected) // deep equality

Expected: ["src-1.js"]
Received: undefined

  31 | describe('nonce', () => {
  32 |   afterAll(async () => {
> 33 |     if (ctx.browser) await ctx.browser.close()
     |                                               ^
  34 |     killApp(ctx.server)
  35 |   })
  36 |

  at Object.<anonymous> (integration/head-manager/test/nonce.test.js:33:69)

● Test suite failed to run

TypeError: Cannot read property 'pid' of undefined

  398 |   return new Promise((resolve, reject) => {
  399 |     const newArgs = [
> 400 |       ...args,
      |               ^
  401 |       function (err, res) {
  402 |         if (err) return reject(err)
  403 |         resolve(res)

  at Object.killApp (lib/next-test-utils.js:400:32)
  at integration/head-manager/test/nonce.test.js:27:29

test/integration/image-component/basic/test/index.test.js

  • Image Component Tests > Client-side Image Component Tests > should render an image tag
  • Image Component Tests > SSR Image Component Tests > should render an image tag
Expand output

● Image Component Tests › SSR Image Component Tests › should render an image tag

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

  14 | const appDir = join(__dirname, '../')
  15 | let appPort
> 16 | let app
     |     ^
  17 | let browser
  18 | const emptyImage =
  19 |   'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'

  at runTests (integration/image-component/basic/test/index.test.js:16:5)
  at integration/image-component/basic/test/index.test.js:167:9
  at integration/image-component/basic/test/index.test.js:160:5
  at Object.<anonymous> (integration/image-component/basic/test/index.test.js:152:1)

● Image Component Tests › Client-side Image Component Tests › should render an image tag

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

  14 | const appDir = join(__dirname, '../')
  15 | let appPort
> 16 | let app
     |     ^
  17 | let browser
  18 | const emptyImage =
  19 |   'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'

  at runTests (integration/image-component/basic/test/index.test.js:16:5)
  at integration/image-component/basic/test/index.test.js:196:9
  at integration/image-component/basic/test/index.test.js:188:5
  at Object.<anonymous> (integration/image-component/basic/test/index.test.js:152:1)

styfle
styfle previously approved these changes Nov 10, 2021
Copy link
Member

@styfle styfle left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for this PR! 🎉

I updated the tests and I think it captures the original intent 👍

ijjk
ijjk previously approved these changes Nov 10, 2021
@ijjk

This comment has been minimized.

@styfle styfle dismissed stale reviews from ijjk and themself via c64f39f November 10, 2021 22:29
styfle
styfle previously approved these changes Nov 10, 2021
@ijjk

This comment has been minimized.

@ericbiewener
Copy link
Contributor Author

@styfle My team patched this in our version of Next and have since updated the isEqualNode function to be:

function isEqualNode(oldTag, newTag) {
    if (oldTag instanceof HTMLElement && newTag instanceof HTMLElement) {
      const nonce = newTag.getAttribute('nonce')
      // Only strip the nonce if `oldTag` has had it stripped. An element's nonce attribute will not
      // be stripped if there is no content security policy response header that includes a nonce.
      if (nonce && !oldTag.getAttribute('nonce')) {
        const newTagSansNonce = newTag.cloneNode(true);
        newTagSansNonce.setAttribute('nonce', '');
        newTagSansNonce.nonce = nonce;
        return nonce === oldTag.nonce && oldTag.isEqualNode(newTagSansNonce);
      }
    }
  
    return oldTag.isEqualNode(newTag)
}

The main difference here is just the cloning of newTag before mutating it in order to perform the final comparison. Perhaps this doesn't matter, but it feels a bit safer. Happy to push the commit (or feel free to do so yourself) if you want this change.

@styfle
Copy link
Member

styfle commented Nov 10, 2021

That will be a bit slower but should be much safer. I updated the PR, thanks 👍

@ijjk
Copy link
Member

ijjk commented Nov 10, 2021

Stats from current PR

Default Build (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary ericbiewener/next.js head-manager-is-equal-node-nonce Change
buildDuration 16.9s 17.2s ⚠️ +255ms
buildDurationCached 3.4s 3.4s -3ms
nodeModulesSize 334 MB 334 MB ⚠️ +2.24 kB
Page Load Tests Overall increase ✓
vercel/next.js canary ericbiewener/next.js head-manager-is-equal-node-nonce Change
/ failed reqs 0 0
/ total time (seconds) 2.743 2.695 -0.05
/ avg req/sec 911.42 927.7 +16.28
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.346 1.279 -0.07
/error-in-render avg req/sec 1857.51 1954.92 +97.41
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary ericbiewener/next.js head-manager-is-equal-node-nonce Change
450.HASH.js gzip 179 B 179 B
framework-HASH.js gzip 42.2 kB 42.2 kB
main-HASH.js gzip 28.2 kB 28.3 kB ⚠️ +103 B
webpack-HASH.js gzip 1.45 kB 1.45 kB
Overall change 72.1 kB 72.2 kB ⚠️ +103 B
Legacy Client Bundles (polyfills)
vercel/next.js canary ericbiewener/next.js head-manager-is-equal-node-nonce Change
polyfills-HASH.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary ericbiewener/next.js head-manager-is-equal-node-nonce Change
_app-HASH.js gzip 1.37 kB 1.37 kB
_error-HASH.js gzip 194 B 194 B
amp-HASH.js gzip 312 B 312 B
css-HASH.js gzip 327 B 327 B
dynamic-HASH.js gzip 2.38 kB 2.38 kB
head-HASH.js gzip 350 B 350 B
hooks-HASH.js gzip 635 B 635 B
image-HASH.js gzip 4.44 kB 4.44 kB
index-HASH.js gzip 263 B 263 B
link-HASH.js gzip 1.87 kB 1.87 kB
routerDirect..HASH.js gzip 321 B 321 B
script-HASH.js gzip 383 B 383 B
withRouter-HASH.js gzip 318 B 318 B
85e02e95b279..7e3.css gzip 107 B 107 B
Overall change 13.3 kB 13.3 kB
Client Build Manifests
vercel/next.js canary ericbiewener/next.js head-manager-is-equal-node-nonce Change
_buildManifest.js gzip 460 B 460 B
Overall change 460 B 460 B
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary ericbiewener/next.js head-manager-is-equal-node-nonce Change
index.html gzip 522 B 523 B ⚠️ +1 B
link.html gzip 535 B 535 B
withRouter.html gzip 516 B 517 B ⚠️ +1 B
Overall change 1.57 kB 1.57 kB ⚠️ +2 B

Diffs

Diff for main-HASH.js
@@ -60,9 +60,21 @@
     /***/ 6007: /***/ function(__unused_webpack_module, exports) {
       "use strict";
 
+      function _instanceof(left, right) {
+        if (
+          right != null &&
+          typeof Symbol !== "undefined" &&
+          right[Symbol.hasInstance]
+        ) {
+          return right[Symbol.hasInstance](left);
+        } else {
+          return left instanceof right;
+        }
+      }
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
+      exports.isEqualNode = isEqualNode;
       exports["default"] = initHeadManager;
       exports.DOMAttributeNames = void 0;
       var DOMAttributeNames = {
@@ -106,6 +118,23 @@
         }
         return el;
       }
+      function isEqualNode(oldTag, newTag) {
+        if (
+          _instanceof(oldTag, HTMLElement) &&
+          _instanceof(newTag, HTMLElement)
+        ) {
+          var nonce = newTag.getAttribute("nonce");
+          // Only strip the nonce if `oldTag` has had it stripped. An element's nonce attribute will not
+          // be stripped if there is no content security policy response header that includes a nonce.
+          if (nonce && !oldTag.getAttribute("nonce")) {
+            var cloneTag = newTag.cloneNode(true);
+            cloneTag.setAttribute("nonce", "");
+            cloneTag.nonce = nonce;
+            return nonce === oldTag.nonce && oldTag.isEqualNode(cloneTag);
+          }
+        }
+        return oldTag.isEqualNode(newTag);
+      }
       function updateElements(type, components) {
         var headEl = document.getElementsByTagName("head")[0];
         var headCountEl = headEl.querySelector("meta[name=next-head-count]");
@@ -138,7 +167,7 @@
           .filter(function(newTag) {
             for (var k = 0, len = oldTags.length; k < len; k++) {
               var oldTag = oldTags[k];
-              if (oldTag.isEqualNode(newTag)) {
+              if (isEqualNode(oldTag, newTag)) {
                 oldTags.splice(k, 1);
                 return false;
               }
Diff for index.html
@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-6b0f14463d84c5dc.js"
+      src="/_next/static/chunks/main-0e133286d9b91502.js"
       defer=""
     ></script>
     <script
Diff for link.html
@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-6b0f14463d84c5dc.js"
+      src="/_next/static/chunks/main-0e133286d9b91502.js"
       defer=""
     ></script>
     <script
Diff for withRouter.html
@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-6b0f14463d84c5dc.js"
+      src="/_next/static/chunks/main-0e133286d9b91502.js"
       defer=""
     ></script>
     <script

Default Build with SWC (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary ericbiewener/next.js head-manager-is-equal-node-nonce Change
buildDuration 17.8s 18.2s ⚠️ +443ms
buildDurationCached 3.5s 3.5s -24ms
nodeModulesSize 334 MB 334 MB ⚠️ +2.24 kB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary ericbiewener/next.js head-manager-is-equal-node-nonce Change
/ failed reqs 0 0
/ total time (seconds) 2.684 2.728 ⚠️ +0.04
/ avg req/sec 931.35 916.4 ⚠️ -14.95
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.294 1.308 ⚠️ +0.01
/error-in-render avg req/sec 1931.27 1911.59 ⚠️ -19.68
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary ericbiewener/next.js head-manager-is-equal-node-nonce Change
450.HASH.js gzip 179 B 179 B
framework-HASH.js gzip 42.3 kB 42.3 kB
main-HASH.js gzip 28.4 kB 28.5 kB ⚠️ +107 B
webpack-HASH.js gzip 1.43 kB 1.43 kB
Overall change 72.4 kB 72.5 kB ⚠️ +107 B
Legacy Client Bundles (polyfills)
vercel/next.js canary ericbiewener/next.js head-manager-is-equal-node-nonce Change
polyfills-HASH.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary ericbiewener/next.js head-manager-is-equal-node-nonce Change
_app-HASH.js gzip 1.35 kB 1.35 kB
_error-HASH.js gzip 180 B 180 B
amp-HASH.js gzip 305 B 305 B
css-HASH.js gzip 321 B 321 B
dynamic-HASH.js gzip 2.38 kB 2.38 kB
head-HASH.js gzip 342 B 342 B
hooks-HASH.js gzip 622 B 622 B
image-HASH.js gzip 4.46 kB 4.46 kB
index-HASH.js gzip 256 B 256 B
link-HASH.js gzip 1.91 kB 1.91 kB
routerDirect..HASH.js gzip 314 B 314 B
script-HASH.js gzip 375 B 375 B
withRouter-HASH.js gzip 309 B 309 B
85e02e95b279..7e3.css gzip 107 B 107 B
Overall change 13.2 kB 13.2 kB
Client Build Manifests
vercel/next.js canary ericbiewener/next.js head-manager-is-equal-node-nonce Change
_buildManifest.js gzip 459 B 459 B
Overall change 459 B 459 B
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary ericbiewener/next.js head-manager-is-equal-node-nonce Change
index.html gzip 522 B 522 B
link.html gzip 534 B 534 B
withRouter.html gzip 515 B 516 B ⚠️ +1 B
Overall change 1.57 kB 1.57 kB ⚠️ +1 B

Diffs

Diff for main-HASH.js
@@ -60,9 +60,21 @@
     /***/ 6007: /***/ function(__unused_webpack_module, exports) {
       "use strict";
 
+      function _instanceof(left, right) {
+        if (
+          right != null &&
+          typeof Symbol !== "undefined" &&
+          right[Symbol.hasInstance]
+        ) {
+          return right[Symbol.hasInstance](left);
+        } else {
+          return left instanceof right;
+        }
+      }
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
+      exports.isEqualNode = isEqualNode;
       exports["default"] = initHeadManager;
       exports.DOMAttributeNames = void 0;
       var DOMAttributeNames = {
@@ -106,6 +118,23 @@
         }
         return el;
       }
+      function isEqualNode(oldTag, newTag) {
+        if (
+          _instanceof(oldTag, HTMLElement) &&
+          _instanceof(newTag, HTMLElement)
+        ) {
+          var nonce = newTag.getAttribute("nonce");
+          // Only strip the nonce if `oldTag` has had it stripped. An element's nonce attribute will not
+          // be stripped if there is no content security policy response header that includes a nonce.
+          if (nonce && !oldTag.getAttribute("nonce")) {
+            var cloneTag = newTag.cloneNode(true);
+            cloneTag.setAttribute("nonce", "");
+            cloneTag.nonce = nonce;
+            return nonce === oldTag.nonce && oldTag.isEqualNode(cloneTag);
+          }
+        }
+        return oldTag.isEqualNode(newTag);
+      }
       function updateElements(type, components) {
         var headEl = document.getElementsByTagName("head")[0];
         var headCountEl = headEl.querySelector("meta[name=next-head-count]");
@@ -138,7 +167,7 @@
           .filter(function(newTag) {
             for (var k = 0, len = oldTags.length; k < len; k++) {
               var oldTag = oldTags[k];
-              if (oldTag.isEqualNode(newTag)) {
+              if (isEqualNode(oldTag, newTag)) {
                 oldTags.splice(k, 1);
                 return false;
               }
Diff for index.html
@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-6b0f14463d84c5dc.js"
+      src="/_next/static/chunks/main-0e133286d9b91502.js"
       defer=""
     ></script>
     <script
Diff for link.html
@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-6b0f14463d84c5dc.js"
+      src="/_next/static/chunks/main-0e133286d9b91502.js"
       defer=""
     ></script>
     <script
Diff for withRouter.html
@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-6b0f14463d84c5dc.js"
+      src="/_next/static/chunks/main-0e133286d9b91502.js"
       defer=""
     ></script>
     <script
Commit: 5c9bfc4

@ijjk ijjk merged commit c791da0 into vercel:canary Nov 11, 2021
@vercel vercel locked as resolved and limited conversation to collaborators Jan 27, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Next HeadManager incorrectly recreates script tags that have a nonce attribute
3 participants