Font optimization - Pass nonce to inlined font definition (vercel#21346)

janicklas-ralph · web-flow · commit dc2de37014bf · 2021-01-26T18:32:39.000Z
diff --git a/packages/next/next-server/lib/post-process.ts b/packages/next/next-server/lib/post-process.ts
@@ -89,7 +89,7 @@ async function processHTML(
 }
 
 class FontOptimizerMiddleware implements PostProcessMiddleware {
-  fontDefinitions: Array<string> = []
+  fontDefinitions: (string | undefined)[][] = []
   inspect(
     originalDom: HTMLElement,
     _data: postProcessData,
@@ -112,8 +112,10 @@ class FontOptimizerMiddleware implements PostProcessMiddleware {
       )
       .forEach((element: HTMLElement) => {
         const url = element.getAttribute('data-href')
+        const nonce = element.getAttribute('nonce')
+
         if (url) {
-          this.fontDefinitions.push(url)
+          this.fontDefinitions.push([url, nonce])
         }
       })
   }
@@ -127,7 +129,7 @@ class FontOptimizerMiddleware implements PostProcessMiddleware {
       return markup
     }
     for (const key in this.fontDefinitions) {
-      const url = this.fontDefinitions[key]
+      const [url, nonce] = this.fontDefinitions[key]
       const fallBackLinkTag = `<link rel="stylesheet" href="${url}"/>`
       if (
         result.indexOf(`<style data-href="${url}">`) > -1 ||
@@ -136,16 +138,17 @@ class FontOptimizerMiddleware implements PostProcessMiddleware {
         // The font is already optimized and probably the response is cached
         continue
       }
-      const fontContent = options.getFontDefinition(url)
+      const fontContent = options.getFontDefinition(url as string)
       if (!fontContent) {
         /**
          * In case of unreachable font definitions, fallback to default link tag.
          */
         result = result.replace('</head>', `${fallBackLinkTag}</head>`)
       } else {
+        const nonceStr = nonce ? ` nonce="${nonce}"` : ''
         result = result.replace(
           '</head>',
-          `<style data-href="${url}">${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)

Original file line number	Diff line number	Diff line change
`@@ -89,7 +89,7 @@ async function processHTML(`
`89`	`89`	`}`
`90`	`90`
`91`	`91`	`class FontOptimizerMiddleware implements PostProcessMiddleware {`
`92`		`- fontDefinitions: Array<string> = []`
	`92`	`+ fontDefinitions: (string \| undefined)[][] = []`
`93`	`93`	`inspect(`
`94`	`94`	`originalDom: HTMLElement,`
`95`	`95`	`_data: postProcessData,`
`@@ -112,8 +112,10 @@ class FontOptimizerMiddleware implements PostProcessMiddleware {`
`112`	`112`	`)`
`113`	`113`	`.forEach((element: HTMLElement) => {`
`114`	`114`	`const url = element.getAttribute('data-href')`
	`115`	`+ const nonce = element.getAttribute('nonce')`
	`116`	`+`
`115`	`117`	`if (url) {`
`116`		`- this.fontDefinitions.push(url)`
	`118`	`+ this.fontDefinitions.push([url, nonce])`
`117`	`119`	`}`
`118`	`120`	`})`
`119`	`121`	`}`
`@@ -127,7 +129,7 @@ class FontOptimizerMiddleware implements PostProcessMiddleware {`
`127`	`129`	`return markup`
`128`	`130`	`}`
`129`	`131`	`for (const key in this.fontDefinitions) {`
`130`		`- const url = this.fontDefinitions[key]`
	`132`	`+ const [url, nonce] = this.fontDefinitions[key]`
`131`	`133`	const fallBackLinkTag = `<link rel="stylesheet" href="${url}"/>`
`132`	`134`	`if (`
`133`	`135`	result.indexOf(`<style data-href="${url}">`) > -1 \|\|
`@@ -136,16 +138,17 @@ class FontOptimizerMiddleware implements PostProcessMiddleware {`
`136`	`138`	`// The font is already optimized and probably the response is cached`
`137`	`139`	`continue`
`138`	`140`	`}`
`139`		`- const fontContent = options.getFontDefinition(url)`
	`141`	`+ const fontContent = options.getFontDefinition(url as string)`
`140`	`142`	`if (!fontContent) {`
`141`	`143`	`/**`
`142`	`144`	`* In case of unreachable font definitions, fallback to default link tag.`
`143`	`145`	`*/`
`144`	`146`	result = result.replace('</head>', `${fallBackLinkTag}</head>`)
`145`	`147`	`} else {`
	`148`	+ const nonceStr = nonce ? ` nonce="${nonce}"` : ''
`146`	`149`	`result = result.replace(`
`147`	`150`	`'</head>',`
`148`		- `<style data-href="${url}">${fontContent}</style></head>`
	`151`	+ `<style data-href="${url}"${nonceStr}>${fontContent}</style></head>`
`149`	`152`	`)`
`150`	`153`	`}`
`151`	`154`	`}`