Merge pull request #2229 from jcoreio/nonce

feat: support nonce for CSP

Author: adumesny

doc/README.md

@@ -118,6 +118,8 @@ gridstack.js API
 - `marginLeft`: numberOrString
 - `maxRow` - maximum rows amount. Default is `0` which means no max.
 - `minRow` - minimum rows amount which is handy to prevent grid from collapsing when empty. Default is `0`. You can also do this with `min-height` CSS attribute on the grid div in pixels, which will round to the closest row.
+- `nonce` - If you are using a nonce-based Content Security Policy, pass your nonce here and
+GridStack will add it to the <style> elements it creates.
 - `oneColumnSize` - minimal width. If grid width is less than or equal to, grid will be shown in one-column mode (default: `768`)
 - `oneColumnModeDomSort` - set to `true` if you want oneColumnMode to use the DOM order and ignore x,y from normal multi column layouts during sorting. This enables you to have custom 1 column layout that differ from the rest. (default?: `false`)
 - `placeholderClass` - class for placeholder (default: `'grid-stack-placeholder'`)

src/gridstack.ts

@@ -1327,7 +1327,9 @@ export class GridStack {
     if (!this._styles) {
       // insert style to parent (instead of 'head' by default) to support WebComponent
       let styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode as HTMLElement;
-      this._styles = Utils.createStylesheet(this._styleSheetClass, styleLocation);
+      this._styles = Utils.createStylesheet(this._styleSheetClass, styleLocation, {
+        nonce: this.opts.nonce,
+      });
       if (!this._styles) return this;
       this._styles._max = 0;
 

src/types.ts

@@ -205,6 +205,10 @@ export interface GridStackOptions {
    */
   minRow?: number;
 
+  /** If you are using a nonce-based Content Security Policy, pass your nonce here and
+   * GridStack will add it to the <style> elements it creates. */
+  nonce?: string;
+
   /** minimal width before grid will be shown in one column mode (default?: 768) */
   oneColumnSize?: number;
 

src/utils.ts

@@ -137,8 +137,10 @@ export class Utils {
    * @param parent to insert the stylesheet as first child,
    * if none supplied it will be appended to the document head instead.
    */
-  static createStylesheet(id: string, parent?: HTMLElement): CSSStyleSheet {
+  static createStylesheet(id: string, parent?: HTMLElement, options?: { nonce?: string }): CSSStyleSheet {
     let style: HTMLStyleElement = document.createElement('style');
+    const nonce = options?.nonce
+    if (nonce) style.nonce = nonce
     style.setAttribute('type', 'text/css');
     style.setAttribute('gs-style-id', id);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any