From fc0af7a33844968ef8392e8c4c17f89e9e644d6f Mon Sep 17 00:00:00 2001 From: Jesper Jakobsen <137038231+JesperJakobsenCIM@users.noreply.github.com> Date: Thu, 2 Nov 2023 16:28:41 +0100 Subject: [PATCH 1/3] fix: add `nonce` grid option set the nonce value for CSP header (#902) * Made the user set the nonce value --- examples/example-csp-header.html | 4 ++-- examples/example-csp-header.js | 1 + src/models/gridOption.interface.ts | 5 +++++ src/slick.grid.ts | 3 ++- 4 files changed, 10 insertions(+), 3 deletions(-) diff --git a/examples/example-csp-header.html b/examples/example-csp-header.html index 22f1cad1..1a8cbb23 100644 --- a/examples/example-csp-header.html +++ b/examples/example-csp-header.html @@ -4,8 +4,8 @@ - - + + diff --git a/examples/example-csp-header.js b/examples/example-csp-header.js index ddcd200a..37a04094 100644 --- a/examples/example-csp-header.js +++ b/examples/example-csp-header.js @@ -11,6 +11,7 @@ var columns = [ var options = { enableCellNavigation: true, enableColumnReorder: false, + nonce: 'random-string', sanitizer: (html) => DOMPurify.sanitize(html, { RETURN_TRUSTED_TYPE: true }) }; diff --git a/src/models/gridOption.interface.ts b/src/models/gridOption.interface.ts index fc1a1cd8..7c2ff641 100644 --- a/src/models/gridOption.interface.ts +++ b/src/models/gridOption.interface.ts @@ -43,6 +43,11 @@ export interface GridOption { // TODO: not sure what that option does? auto?: boolean; + /** + * Added for CSP header because of dynamic css generation. + */ + nonce?: string; + /** * Defaults to false, when enabled will try to commit the current edit without focusing on the next row. * If a custom editor is implemented and the grid cannot auto commit, you must use this option to implement it yourself diff --git a/src/slick.grid.ts b/src/slick.grid.ts index 3cd0f8ec..b9cb596c 100644 --- a/src/slick.grid.ts +++ b/src/slick.grid.ts @@ -226,6 +226,7 @@ export class SlickGrid = Column, O e enableAsyncPostRenderCleanup: false, asyncPostRenderCleanupDelay: 40, auto: false, + nonce: '', editorLock: GlobalEditorLock, showColumnHeader: true, showHeaderRow: false, @@ -2304,7 +2305,7 @@ export class SlickGrid = Column, O e protected createCssRules() { this._style = document.createElement('style'); - this._style.nonce = 'random-string'; + this._style.nonce = this._options.nonce || ''; (this._options.shadowRoot || document.head).appendChild(this._style); const rowHeight = (this._options.rowHeight! - this.cellHeightDiff); From fb0e4f5cb8755d9b3351eafdfbcdf2a4e4aa1016 Mon Sep 17 00:00:00 2001 From: Ghislain B Date: Thu, 2 Nov 2023 13:54:24 -0400 Subject: [PATCH 2/3] fix: add `nonce` grid option set the nonce value for CSP header (#902) (#905) * fix: add `nonce` grid option set the nonce value for CSP header (#902) * Made the user set the nonce value * chore: add back previous CSP header --------- Co-authored-by: Jesper Jakobsen <137038231+JesperJakobsenCIM@users.noreply.github.com> --- examples/example-csp-header.html | 2 +- examples/example-csp-header.js | 1 + src/models/gridOption.interface.ts | 5 +++++ src/slick.grid.ts | 3 ++- 4 files changed, 9 insertions(+), 2 deletions(-) diff --git a/examples/example-csp-header.html b/examples/example-csp-header.html index 22f1cad1..eeba0d01 100644 --- a/examples/example-csp-header.html +++ b/examples/example-csp-header.html @@ -4,7 +4,7 @@ - + diff --git a/examples/example-csp-header.js b/examples/example-csp-header.js index ddcd200a..37a04094 100644 --- a/examples/example-csp-header.js +++ b/examples/example-csp-header.js @@ -11,6 +11,7 @@ var columns = [ var options = { enableCellNavigation: true, enableColumnReorder: false, + nonce: 'random-string', sanitizer: (html) => DOMPurify.sanitize(html, { RETURN_TRUSTED_TYPE: true }) }; diff --git a/src/models/gridOption.interface.ts b/src/models/gridOption.interface.ts index fc1a1cd8..7c2ff641 100644 --- a/src/models/gridOption.interface.ts +++ b/src/models/gridOption.interface.ts @@ -43,6 +43,11 @@ export interface GridOption { // TODO: not sure what that option does? auto?: boolean; + /** + * Added for CSP header because of dynamic css generation. + */ + nonce?: string; + /** * Defaults to false, when enabled will try to commit the current edit without focusing on the next row. * If a custom editor is implemented and the grid cannot auto commit, you must use this option to implement it yourself diff --git a/src/slick.grid.ts b/src/slick.grid.ts index 3cd0f8ec..b9cb596c 100644 --- a/src/slick.grid.ts +++ b/src/slick.grid.ts @@ -226,6 +226,7 @@ export class SlickGrid = Column, O e enableAsyncPostRenderCleanup: false, asyncPostRenderCleanupDelay: 40, auto: false, + nonce: '', editorLock: GlobalEditorLock, showColumnHeader: true, showHeaderRow: false, @@ -2304,7 +2305,7 @@ export class SlickGrid = Column, O e protected createCssRules() { this._style = document.createElement('style'); - this._style.nonce = 'random-string'; + this._style.nonce = this._options.nonce || ''; (this._options.shadowRoot || document.head).appendChild(this._style); const rowHeight = (this._options.rowHeight! - this.cellHeightDiff); From 5f8557498cbd2e60de383a525542893dbe59cdc3 Mon Sep 17 00:00:00 2001 From: Ghislain B Date: Thu, 2 Nov 2023 14:02:09 -0400 Subject: [PATCH 3/3] fix: add missing RowMoveManager `containerCssClass` option (#906) * fix: add missing RowMoveManager `containerCssClass` option --- examples/example-drag-row-between-grids.html | 3 ++- examples/example-frozen-row-reordering.html | 3 ++- examples/example9-row-reordering-simple.html | 3 ++- examples/example9-row-reordering.html | 3 ++- src/models/rowMoveManagerOption.interface.ts | 3 +++ src/plugins/slick.rowmovemanager.ts | 6 +++++- 6 files changed, 16 insertions(+), 5 deletions(-) diff --git a/examples/example-drag-row-between-grids.html b/examples/example-drag-row-between-grids.html index e19f85ed..d2b5d809 100644 --- a/examples/example-drag-row-between-grids.html +++ b/examples/example-drag-row-between-grids.html @@ -109,7 +109,8 @@

View Source:

behavior: "selectAndMove", selectable: false, resizable: false, - cssClass: "cell-drag-cross-grid dnd sgi sgi-drag sgi-14px", + cssClass: "cell-drag-cross-grid dnd", + formatter: () => `` }, { id: "name", diff --git a/examples/example-frozen-row-reordering.html b/examples/example-frozen-row-reordering.html index 03b52ab1..7a4d9ad8 100644 --- a/examples/example-frozen-row-reordering.html +++ b/examples/example-frozen-row-reordering.html @@ -113,7 +113,8 @@

behavior: "selectAndMove", selectable: false, resizable: false, - cssClass: "cell-reorder dnd sgi sgi-drag sgi-14px", + cssClass: "cell-reorder dnd", + formatter: () => `` }, { id: "name", diff --git a/examples/example9-row-reordering-simple.html b/examples/example9-row-reordering-simple.html index c565d836..4ddac60b 100644 --- a/examples/example9-row-reordering-simple.html +++ b/examples/example9-row-reordering-simple.html @@ -66,7 +66,8 @@

View Source:

behavior: "selectAndMove", selectable: false, resizable: false, - cssClass: "slickgrid-cell-reorder sgi sgi-drag sgi-14px" + cssClass: "slickgrid-cell-reorder", + formatter: () => `` }, { id: "name", diff --git a/examples/example9-row-reordering.html b/examples/example9-row-reordering.html index b57d209b..007ad79f 100644 --- a/examples/example9-row-reordering.html +++ b/examples/example9-row-reordering.html @@ -113,7 +113,8 @@

View Source:

behavior: "selectAndMove", selectable: false, resizable: false, - cssClass: "cell-reorder dnd sgi sgi-drag sgi-14px" + cssClass: "cell-reorder dnd", + formatter: () => `` }, { id: "name", diff --git a/src/models/rowMoveManagerOption.interface.ts b/src/models/rowMoveManagerOption.interface.ts index daead249..5750396b 100644 --- a/src/models/rowMoveManagerOption.interface.ts +++ b/src/models/rowMoveManagerOption.interface.ts @@ -21,6 +21,9 @@ export interface RowMoveManagerOption { /** A CSS class to be added to the div of the cell formatter. */ cssClass?: string; + /** A CSS class to be added to the cell container. */ + containerCssClass?: string; + /** Column definition id(defaults to "_move") */ columnId?: string; diff --git a/src/plugins/slick.rowmovemanager.ts b/src/plugins/slick.rowmovemanager.ts index d8113afd..dc08769e 100644 --- a/src/plugins/slick.rowmovemanager.ts +++ b/src/plugins/slick.rowmovemanager.ts @@ -9,6 +9,7 @@ const Utils = IIFE_ONLY ? Slick.Utils : Utils_; /** * Row Move Manager options: + * containerCssClass: A CSS class to be added to the cell container. * cssClass: A CSS class to be added to the div of the cell formatter. * columnId: Column definition id (defaults to "_move") * cancelEditOnDrag: Do we want to cancel any Editing while dragging a row (defaults to false) @@ -250,7 +251,10 @@ export class SlickRowMoveManager { if (!this.checkUsabilityOverride(row, dataContext, grid)) { return ''; } else { - return { addClasses: `cell-reorder dnd ${this._options.cssClass || ''}`.trim(), text: '' }; + return { + addClasses: `cell-reorder dnd ${this._options.containerCssClass || ''}`, + text: `
` + }; } }