Adding test case for nonce

vercel · kodiakhq · Jan 26, 2021 · Apr 4, 2020 · Apr 5, 2020 · Apr 16, 2020
commit d2fea4bb794df25972401fadaa19e2dd19f315b2
diff --git a/packages/next/next-server/lib/post-process.ts b/packages/next/next-server/lib/post-process.ts
@@ -113,6 +113,7 @@ class FontOptimizerMiddleware implements PostProcessMiddleware {
       .forEach((element: HTMLElement) => {
         const url = element.getAttribute('data-href')
         const nonce = element.getAttribute('nonce')
+
         if (url) {
           this.fontDefinitions.push([url, nonce])
         }
@@ -144,9 +145,10 @@ class FontOptimizerMiddleware implements PostProcessMiddleware {
          */
         result = result.replace('</head>', `${fallBackLinkTag}</head>`)
       } else {
+        const nonceStr = nonce ? ` nonce="${nonce}"` : ''
         result = result.replace(
           '</head>',
-          `<style data-href="${url}" nonce="${nonce}">${fontContent}</style></head>`
+          `<style data-href="${url}"${nonceStr}>${fontContent}</style></head>`
         )
       }
     }

diff --git a/test/integration/font-optimization/pages/nonce.js b/test/integration/font-optimization/pages/nonce.js
@@ -0,0 +1,19 @@
+import React from 'react'
+import Head from 'next/head'
+
+const Page = () => {
+  return (
+    <>
+      <Head>
+        <link
+          href="https://fonts.googleapis.com/css2?family=Modak"
+          rel="stylesheet"
+          nonce="VmVyY2Vs"
+        />
+      </Head>
+      <div>Hi!</div>
+    </>
+  )
+}
+
+export default Page
diff --git a/test/integration/font-optimization/test/index.test.js b/test/integration/font-optimization/test/index.test.js
@@ -52,6 +52,17 @@ function runTests() {
     )
   })
 
+  it('should pass nonce to the inlined font definition', async () => {
+    const html = await renderViaHTTP(appPort, '/nonce')
+    expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
+    expect(html).toContain(
+      '<link rel="stylesheet" nonce="VmVyY2Vs" data-href="https://fonts.googleapis.com/css2?family=Modak"/>'
+    )
+    expect(html).toMatch(
+      /<style data-href="https:\/\/fonts\.googleapis\.com\/css2\?family=Modak" nonce="VmVyY2Vs">.*<\/style>/
+    )
+  })
+
   it('should inline the google fonts for static pages with Next/Head', async () => {
     const html = await renderViaHTTP(appPort, '/static-head')
     expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)