Add support for style nonce

vercel · Nov 13, 2020 · 151ee99 · 151ee99
1 parent 2969457
commit 151ee99
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/packages/next/client/index.tsx b/packages/next/client/index.tsx
@@ -648,12 +648,19 @@ function doRender(input: RenderRouteInfo): Promise<any> {
       currentStyleTags.map((tag) => tag.getAttribute('data-n-href'))
     )
 
+    const noscript = document.querySelector('noscript[data-n-css]')
+    const nonce = noscript?.getAttribute('data-n-css')
+
     styleSheets.forEach(({ href, text }) => {
       if (!currentHrefs.has(href)) {
         const styleTag = document.createElement('style')
         styleTag.setAttribute('data-n-href', href)
         styleTag.setAttribute('media', 'x')
 
+        if (nonce) {
+          styleTag.setAttribute('nonce', nonce)
+        }
+
         document.head.appendChild(styleTag)
         styleTag.appendChild(document.createTextNode(text))
       }

diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
@@ -508,7 +508,7 @@ export class Head extends Component<
             {process.env.__NEXT_OPTIMIZE_FONTS
               ? this.makeStylesheetInert(this.getCssLinks(files))
               : this.getCssLinks(files)}
-            <noscript data-n-css />
+            <noscript data-n-css={this.props.nonce ?? ''} />
             {!disableRuntimeJS && this.getPreloadDynamicChunks()}
             {!disableRuntimeJS && this.getPreloadMainLinks(files)}
             {this.context.isDevelopment && (