Add nonce to style element for Content Security Policy

docs/AutoSizer.md

@@ -9,6 +9,7 @@ High-order component that automatically adjusts the width and height of a single
 | children | Function | ✓ | Function responsible for rendering children. This function should implement the following signature: `({ height: number, width: number }) => PropTypes.element` |
 | disableHeight | Boolean |  | Fixed `height`; if specified, the child's `height` property will not be managed |
 | disableWidth | Boolean |  | Fixed `width`; if specified, the child's `width` property will not be managed |
+| nonce | String | | Nonce of the inlined stylesheets for Content Security Policy  |
 | onResize | Function |  | Callback to be invoked on-resize; it is passed the following named parameters: `({ height: number, width: number })`. | 
 
 ### Examples

docs/usingAutoSizer.md

@@ -75,3 +75,15 @@ When using an `AutoSizer` as a direct child of a flex box it usually works out b
 ```
 
 You can see an example of this [here](https://bvaughn.github.io/react-virtualized/#/components/InfiniteLoader).
+
+### Applying Content Security Policy
+[The specification of Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#intro)
+describes as the following:
+
+> This document defines Content Security Policy, a mechanism web applications
+> can use to mitigate a broad class of content injection vulnerabilities, such
+> as cross-site scripting (XSS).
+
+To apply Content Security Policy, you need to pass a nonce to
+_react-virtualized_ and accordingly set `nonce-source` to `Content-Security-Policy` field
+in HTTP header.

source/AutoSizer/AutoSizer.js

@@ -23,6 +23,9 @@ export default class AutoSizer extends PureComponent {
     /** Disable dynamic :width property */
     disableWidth: PropTypes.bool,
 
+    /** Nonce of the inlined stylesheet for Content Security Policy */
+    nonce: PropTypes.string,
+
     /** Callback to be invoked on-resize: ({ height, width }) */
     onResize: PropTypes.func.isRequired
   };
@@ -51,7 +54,7 @@ export default class AutoSizer extends PureComponent {
 
     // Defer requiring resize handler in order to support server-side rendering.
     // See issue #41
-    this._detectElementResize = createDetectElementResize()
+    this._detectElementResize = createDetectElementResize(this.props.nonce)
     this._detectElementResize.addResizeListener(this._parentNode, this._onResize)
 
     this._onResize()

source/vendor/detectElementResize.js

@@ -7,9 +7,10 @@
  * 1) Guard against unsafe 'window' and 'document' references (to support SSR).
  * 2) Defer initialization code via a top-level function wrapper (to support SSR).
  * 3) Avoid unnecessary reflows by not measuring size for scroll events bubbling from children.
+ * 4) Add nonce for style element.
  **/
 
-export default function createDetectElementResize () {
+export default function createDetectElementResize (nonce) {
   // Check `document` and `window` in case of server-side rendering
   var _window
   if (typeof window !== 'undefined') {
@@ -118,6 +119,7 @@ export default function createDetectElementResize () {
 
       style.id = 'detectElementResize';
       style.type = 'text/css';
+      style.setAttribute('nonce', nonce);
       if (style.styleSheet) {
         style.styleSheet.cssText = css;
       } else {