feat: add support for CSP nonce

Author: jedwards1211

.circleci/config.yml

@@ -1,4 +1,4 @@
-version: 2
+version: 2.1
 jobs:
   build:
     docker:
@@ -36,3 +36,10 @@ jobs:
       - run:
           name: release
           command: yarn run semantic-release || true
+workflows:
+  build-and-deploy:
+    jobs:
+      - build:
+          context:
+            - github-release
+            - npm-release

README.md

@@ -122,3 +122,13 @@ const html = (
   </html>
 )
 ```
+
+## Content Security Policy
+
+Make sure your header includes this meta tag:
+
+```jsx
+  <meta property="csp-nonce" content={nonce} />
+```
+
+And in SSR, pass the `nonce` to `registry.scriptTags({ nonce })`.

src/index.js

@@ -29,8 +29,8 @@ export class ScriptsRegistry {
   results: { [src: string]: { error: ?Error } } = {}
   promises: { [src: string]: Promise<any> } = {}
 
-  scriptTags(): React.Node {
-    return this.scripts.map(props => <script key={props.src} {...props} />)
+  scriptTags(options?: {| nonce?: string |}): React.Node {
+    return this.scripts.map(props => <script key={props.src} nonce={options ? options.nonce : undefined} {...props} />)
   }
 }
 

src/loadScript.js

@@ -2,6 +2,15 @@
 /* eslint-env browser */
 import { type InnerProps } from './index'
 
+let nonce
+function getNonce(): string | void {
+  if (nonce === undefined) {
+    const node = document.querySelector('meta[property="csp-nonce"], meta[name="csp-nonce"]')
+    nonce = node ? node.getAttribute('content') ?? null : null
+  }
+  return nonce
+}
+
 const loadScript = async ({
   scriptsRegistry,
   onLoad,
@@ -29,6 +38,7 @@ const loadScript = async ({
   return new Promise((resolve: () => void, reject: (error?: Error) => void) => {
     const script = document.createElement('script')
     script.src = src
+    script.nonce = getNonce()
     Object.keys(props).forEach(key => script.setAttribute(key, props[key]))
     script.onload = resolve
     script.onerror = reject