diff --git a/docs/AutoSizer.md b/docs/AutoSizer.md index da3b7b3e0..f784b0db7 100644 --- a/docs/AutoSizer.md +++ b/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 diff --git a/docs/usingAutoSizer.md b/docs/usingAutoSizer.md index ec549b17f..37a43f73c 100644 --- a/docs/usingAutoSizer.md +++ b/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. diff --git a/source/AutoSizer/AutoSizer.js b/source/AutoSizer/AutoSizer.js index d976f36ae..3e6b37cd3 100644 --- a/source/AutoSizer/AutoSizer.js +++ b/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() diff --git a/source/vendor/detectElementResize.js b/source/vendor/detectElementResize.js index 81d2d8d57..b3af71882 100644 --- a/source/vendor/detectElementResize.js +++ b/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 {