fix(gatsby): Make <script> in Head behave correctly

e2e-tests/development-runtime/cypress/integration/head-function-export/scripts.js

@@ -0,0 +1,20 @@
+import { page } from "../../../shared-data/head-function-export.js"
+
+describe("Scripts", () => {
+  beforeEach(() => {
+    cy.visit(page.basic).waitForRouteChange()
+  })
+
+  // This tests that we don't append elements to the document head more than once
+  // A script will get called more than once it that happens
+  it(`Inline script work and get called only once`, () => {
+
+    // Head export seem to be appending the tags after waitForRouteChange()
+    // We need to find a way to make waitForRouteChange() catch Head export too
+    cy.wait(3000)
+
+    cy.window().then(win => {
+      expect(win.__SOME_GLOBAL_TO_CHECK_CALL_COUNT__).to.equal(1)
+    })
+  })
+})

e2e-tests/development-runtime/src/pages/head-function-export/basic.js

@@ -12,7 +12,10 @@ export default function HeadFunctionExportBasic() {
       <Link data-testid="gatsby-link" to="/head-function-export/page-query">
         Navigate to page-query via Gatsby Link
       </Link>
-      <Link data-testid="navigate-to-page-without-head-export" to="/without-head">
+      <Link
+        data-testid="navigate-to-page-without-head-export"
+        to="/without-head"
+      >
         Navigate to without head export
       </Link>
     </>
@@ -28,7 +31,7 @@ export function Head() {
     style,
     link,
     extraMeta,
-    jsonLD
+    jsonLD,
   } = data.static
 
   return (
@@ -54,6 +57,9 @@ export function Head() {
       <script data-testid="jsonLD" type="application/ld+json">
         {jsonLD}
       </script>
+      <script type="text/javascript">
+        {`window.__SOME_GLOBAL_TO_CHECK_CALL_COUNT__ = (window.__SOME_GLOBAL_TO_CHECK_CALL_COUNT__ || 0 ) + 1`}
+      </script>
     </>
   )
 }

e2e-tests/production-runtime/cypress/integration/head-function-export/scripts.js

@@ -0,0 +1,20 @@
+import { page } from "../../../shared-data/head-function-export.js"
+
+describe("Scripts", () => {
+  beforeEach(() => {
+    cy.visit(page.basic).waitForRouteChange()
+  })
+
+  // This tests that we don't append elements to the document head more than once
+  // A script will get called more than once it that happens
+  it(`Inline script work and get called only once`, () => {
+
+    // Head export seem to be appending the tags after waitForRouteChange()
+    // We need to find a way to make waitForRouteChange() catch Head export too
+    cy.wait(3000)
+
+    cy.window().then(win => {
+      expect(win.__SOME_GLOBAL_TO_CHECK_CALL_COUNT__).to.equal(1)
+    })
+  })
+})

e2e-tests/production-runtime/src/pages/head-function-export/basic.js

@@ -38,6 +38,9 @@ export function Head() {
       <script data-testid="jsonLD" type="application/ld+json">
         {jsonLD}
       </script>
+      <script type="text/javascript">
+        {`window.__SOME_GLOBAL_TO_CHECK_CALL_COUNT__ = (window.__SOME_GLOBAL_TO_CHECK_CALL_COUNT__ || 0 ) + 1`}
+      </script>
     </>
   )
 }

integration-tests/head-function-export/__tests__/ssr-html-output.js

@@ -34,7 +34,7 @@ describe(`Head function export SSR'ed HTML output`, () => {
     expect(noscript.text).toEqual(data.static.noscript)
     expect(style.text).toContain(data.static.style)
     expect(link.attributes.href).toEqual(data.static.link)
-    expect(jsonLD.text).toEqual(data.static.jsonLD)
+    expect(jsonLD.innerHTML).toEqual(data.static.jsonLD)
   })
 
   it(`should work with data from a page query`, () => {

packages/gatsby/cache-dir/head/head-export-handler-for-browser.js

@@ -9,6 +9,7 @@ import {
   headExportValidator,
   filterHeadProps,
   warnForInvalidTags,
+  isEqualNode,
 } from "./utils"
 
 const hiddenRoot = document.createElement(`div`)
@@ -21,8 +22,6 @@ const removePrevHeadElements = () => {
 const onHeadRendered = () => {
   const validHeadNodes = []
 
-  removePrevHeadElements()
-
   const seenIds = new Map()
   for (const node of hiddenRoot.childNodes) {
     const nodeName = node.nodeName.toLowerCase()
@@ -31,8 +30,19 @@ const onHeadRendered = () => {
     if (!VALID_NODE_NAMES.includes(nodeName)) {
       warnForInvalidTags(nodeName)
     } else {
-      const clonedNode = node.cloneNode(true)
+      let clonedNode = node.cloneNode(true)
       clonedNode.setAttribute(`data-gatsby-head`, true)
+
+      // Create an element for scripts to make script work
+      if (clonedNode.nodeName.toLowerCase() === `script`) {
+        const script = document.createElement(`script`)
+        for (const attr of clonedNode.attributes) {
+          script.setAttribute(attr.name, attr.value)
+        }
+        script.innerHTML = clonedNode.innerHTML
+        clonedNode = script
+      }
+
       if (id) {
         if (!seenIds.has(id)) {
           validHeadNodes.push(clonedNode)
@@ -48,7 +58,42 @@ const onHeadRendered = () => {
     }
   }
 
-  document.head.append(...validHeadNodes)
+  const diffedHeadNodes = []
+
+  const existingHeadElements = [
+    ...document.querySelectorAll(`[data-gatsby-head]`),
+  ]
+
+  if (existingHeadElements.length === 0) {
+    document.head.append(...validHeadNodes)
+    return
+  }
+
+  const elementsToRemove = []
+
+  for (const existingHeadElement of existingHeadElements) {
+    const isInValidNodes = validHeadNodes.some(e =>
+      isEqualNode(e, existingHeadElement)
+    )
+
+    if (!isInValidNodes) {
+      elementsToRemove.push(existingHeadElement)
+    }
+  }
+
+  elementsToRemove.forEach(e => e.remove())
+
+  for (const validHeadNode of validHeadNodes) {
+    const isInExistingHeadElementsList = existingHeadElements.some(e =>
+      isEqualNode(e, validHeadNode)
+    )
+
+    if (!isInExistingHeadElementsList) {
+      diffedHeadNodes.push(validHeadNode)
+    }
+  }
+
+  document.head.append(...diffedHeadNodes)
 }
 
 if (process.env.BUILD_STAGE === `develop`) {

packages/gatsby/cache-dir/head/utils.js

@@ -52,3 +52,33 @@ export function warnForInvalidTags(tagName) {
     warnOnce(warning)
   }
 }
+
+/**
+ * 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
+ */
+export 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 cloneTag = newTag.cloneNode(true)
+      cloneTag.setAttribute(`nonce`, ``)
+      cloneTag.nonce = nonce
+      return nonce === oldTag.nonce && oldTag.isEqualNode(cloneTag)
+    }
+  }
+
+  return oldTag.isEqualNode(newTag)
+}