Take CSP style nonce as props, pass to react-virtualized AutoSizer

When using a Content-Security-Policy with a style-src rule that does not include 'unsafe-inline', a nonce prop needs to be used with react-virtualized as it appends inline <style> tags to the DOM. Resolves frontend-collective#653
rjoonas · Nov 3, 2020 · 7b1e660 · 7b1e660
1 parent 3c29cbf
commit 7b1e660
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -128,6 +128,7 @@ export default class Tree extends Component {
 | isVirtualized                  |      bool      | Set to false to disable virtualization. Defaults to `true`. **NOTE**: Auto-scrolling while dragging, and scrolling to the `searchFocusOffset` will be disabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 | nodeContentRenderer            |      any       | Override the default component ([`NodeRendererDefault`](https://github.com/frontend-collective/react-sortable-tree/blob/master/src/node-renderer-default.js)) for rendering nodes (but keep the scaffolding generator). This is a last resort for customization - most custom styling should be able to be solved with `generateNodeProps`, a `theme` or CSS rules. If you must use it, is best to copy the component in `node-renderer-default.js` to use as a base, and customize as needed.                                                                                                                                                     |
 | placeholderRenderer            |      any       | Override the default placeholder component ([`PlaceholderRendererDefault`](https://github.com/frontend-collective/react-sortable-tree/blob/master/src/placeholder-renderer-default.js)) which is displayed when the tree is empty. This is an advanced option, and in most cases should probably be solved with a `theme` or custom CSS instead.                                                                                                                                                                                                                                                                                                   |
+| cssNonce                       |     string     | Content-Security-Policy nonce to use with inline `<style>` tags in virtualized mode.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
 
 ## Data Helper Functions
 

diff --git a/src/react-sortable-tree.js b/src/react-sortable-tree.js
@@ -613,6 +613,7 @@ class ReactSortableTree extends Component {
       dragDropManager,
       style,
       className,
+      cssNonce,
       innerStyle,
       rowHeight,
       isVirtualized,
@@ -687,7 +688,7 @@ class ReactSortableTree extends Component {
       const ScrollZoneVirtualList = this.scrollZoneVirtualList;
       // Render list with react-virtualized
       list = (
-        <AutoSizer>
+        <AutoSizer nonce={cssNonce}>
           {({ height, width }) => (
             <ScrollZoneVirtualList
               {...scrollToInfo}
@@ -835,6 +836,9 @@ ReactSortableTree.propTypes = {
   // NOTE: Auto-scrolling while dragging, and scrolling to the `searchFocusOffset` will be disabled.
   isVirtualized: PropTypes.bool,
 
+  // Content-Security-Policy nonce to use with inline `<style>` tags in virtualized mode.
+  cssNonce: PropTypes.string,
+
   treeNodeRenderer: PropTypes.func,
 
   // Override the default component for rendering nodes (but keep the scaffolding generator)
@@ -909,6 +913,7 @@ ReactSortableTree.defaultProps = {
   canDrop: null,
   canNodeHaveChildren: () => true,
   className: '',
+  cssNonce: null,
   dndType: null,
   generateNodeProps: null,
   getNodeKey: defaultGetNodeKey,