Support Strict CSP with a nonce

readme.md

@@ -385,6 +385,22 @@ It's **paramount** that you use one of these two functions so that
 the generated styles can be diffed when the client loads and
 duplicate styles are avoided.
 
+### Content Security Policy
+
+Strict [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) is supported. 
+
+You should generate a nonce **per request**.
+```js
+import nanoid from 'nanoid'
+
+const nonce = Buffer.from(nanoid()).toString('base64') //ex: N2M0MDhkN2EtMmRkYi00MTExLWFhM2YtNDhkNTc4NGJhMjA3
+```
+
+You must then pass a nonce to either `flush({ nonce })` or `flushToHTML({ nonce })` **and** set a `<meta property="csp-nonce" content={nonce} />` tag.
+
+Your CSP policy must share the same nonce as well (the header nonce needs to match the html nonce and remain unpredictable).
+`Content-Security-Policy: default-src 'self'; style-src 'self' 'nonce-N2M0MDhkN2EtMmRkYi00MTExLWFhM2YtNDhkNTc4NGJhMjA3';`
+
 ### External CSS and styles outside of the component
 
 In styled-jsx styles can be defined outside of the component's render method or in separate JavaScript modules using the `styled-jsx/css` library. `styled-jsx/css` exports three tags that can be used to tag your styles:

src/lib/stylesheet.js

@@ -7,13 +7,11 @@ const isProd = process.env && process.env.NODE_ENV === 'production'
 const isString = o => Object.prototype.toString.call(o) === '[object String]'
 
 export default class StyleSheet {
-  constructor(
-    {
-      name = 'stylesheet',
-      optimizeForSpeed = isProd,
-      isBrowser = typeof window !== 'undefined'
-    } = {}
-  ) {
+  constructor({
+    name = 'stylesheet',
+    optimizeForSpeed = isProd,
+    isBrowser = typeof window !== 'undefined'
+  } = {}) {
     invariant(isString(name), '`name` must be a string')
     this._name = name
     this._deletedRulePlaceholder = `#${name}-deleted-rule____{}`
@@ -29,9 +27,14 @@ export default class StyleSheet {
     this._tags = []
     this._injected = false
     this._rulesCount = 0
+
+    const node =
+      typeof document === 'object' &&
+      document.querySelector('meta[property="csp-nonce"]')
+    this._nonce = node ? node.getAttribute('content') : null
   }
 
-  setOptimizeForSpeed(bool) {
+  setOptimizeForSpeed(bool, options = { flush: {} }) {
     invariant(
       typeof bool === 'boolean',
       '`setOptimizeForSpeed` accepts a boolean'
@@ -41,7 +44,7 @@ export default class StyleSheet {
       this._rulesCount === 0,
       'optimizeForSpeed cannot be when rules have already been inserted'
     )
-    this.flush()
+    this.flush(options.flush)
     this._optimizeForSpeed = bool
     this.inject()
   }
@@ -50,7 +53,7 @@ export default class StyleSheet {
     return this._optimizeForSpeed
   }
 
-  inject() {
+  inject(options = { flush: {} }) {
     invariant(!this._injected, 'sheet already injected')
     this._injected = true
     if (this._isBrowser && this._optimizeForSpeed) {
@@ -62,7 +65,7 @@ export default class StyleSheet {
             'StyleSheet: optimizeForSpeed mode not supported falling back to standard mode.'
           ) // eslint-disable-line no-console
         }
-        this.flush()
+        this.flush(options.flush)
         this._injected = true
       }
       return
@@ -225,6 +228,7 @@ export default class StyleSheet {
       )
     }
     const tag = document.createElement('style')
+    if (this._nonce) tag.setAttribute('nonce', this._nonce)
     tag.type = 'text/css'
     tag.setAttribute(`data-${name}`, '')
     if (cssString) {

src/server.js

@@ -1,26 +1,29 @@
 import React from 'react'
 import { flush } from './style'
 
-export default function flushToReact() {
+export default function flushToReact(options = {}) {
   return flush().map(args => {
     const id = args[0]
     const css = args[1]
     return React.createElement('style', {
       id: `__${id}`,
       // Avoid warnings upon render with a key
       key: `__${id}`,
+      nonce: options.nonce ? options.nonce : undefined,
       dangerouslySetInnerHTML: {
         __html: css
       }
     })
   })
 }
 
-export function flushToHTML() {
+export function flushToHTML(options = {}) {
   return flush().reduce((html, args) => {
     const id = args[0]
     const css = args[1]
-    html += `<style id="__${id}">${css}</style>`
+    html += `<style id="__${id}"${
+      options.nonce ? ` nonce="${options.nonce}"` : ''
+    }>${css}</style>`
     return html
   }, '')
 }

src/stylesheet-registry.js

@@ -94,8 +94,8 @@ export default class StyleSheetRegistry {
     this.remove(props)
   }
 
-  flush() {
-    this._sheet.flush()
+  flush(options = {}) {
+    this._sheet.flush(options)
     this._sheet.inject()
     this._fromServer = undefined
     this._indices = {}

test/index.js

@@ -145,3 +145,50 @@ test('server rendering', t => {
   t.is(0, flush().length)
   t.is('', flushToHTML())
 })
+
+test('server rendering with nonce', t => {
+  function App() {
+    const color = 'green'
+    return React.createElement(
+      'div',
+      null,
+      React.createElement(JSXStyle, {
+        css: 'p { color: red }',
+        styleId: 1
+      }),
+      React.createElement(JSXStyle, {
+        css: 'div { color: blue }',
+        styleId: 2
+      }),
+      React.createElement(JSXStyle, {
+        css: `div { color: ${color} }`,
+        styleId: 3
+      })
+    )
+  }
+  // Expected CSS
+  const expected =
+    '<style id="__jsx-1" nonce="test-nonce">p { color: red }</style>' +
+    '<style id="__jsx-2" nonce="test-nonce">div { color: blue }</style>' +
+    '<style id="__jsx-3" nonce="test-nonce">div { color: green }</style>'
+
+  // Render using react
+  ReactDOM.renderToString(React.createElement(App))
+  const html = ReactDOM.renderToStaticMarkup(
+    React.createElement('head', null, flush({ nonce: 'test-nonce' }))
+  )
+
+  t.is(html, `<head>${expected}</head>`)
+
+  // Assert that memory is empty
+  t.is(0, flush({ nonce: 'test-nonce' }).length)
+  t.is('', flushToHTML({ nonce: 'test-nonce' }))
+
+  // Render to html again
+  ReactDOM.renderToString(React.createElement(App))
+  t.is(expected, flushToHTML({ nonce: 'test-nonce' }))
+
+  // Assert that memory is empty
+  t.is(0, flush({ nonce: 'test-nonce' }).length)
+  t.is('', flushToHTML({ nonce: 'test-nonce' }))
+})

test/stylesheet-registry.js

@@ -104,6 +104,29 @@ test('add - sanitizes dynamic CSS on the server', t => {
   ])
 })
 
+test('add - nonce is properly fetched from meta tag', t => {
+  const originalDocument = global.document
+  // We need to stub a document in order to simulate the meta tag
+  global.document = {
+    querySelector(query) {
+      t.is(query, 'meta[property="csp-nonce"]')
+      return {
+        getAttribute(attr) {
+          t.is(attr, 'content')
+          return 'test-nonce'
+        }
+      }
+    }
+  }
+
+  const registry = makeRegistry()
+  registry.add({ styleId: '123', css: [cssRule] })
+
+  t.is(registry._sheet._nonce, 'test-nonce')
+
+  global.document = originalDocument
+})
+
 // registry.remove
 
 test('remove', t => {