feat(config): new style.nonce option for CSP (#2519)

docs/CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ### 2.29.0
 
+- `New` — Editor Config now has the `style.nonce` attribute that could be used to allowlist editor style tag for Content Security Policy "style-src"
 - `Fix` — Passing an empty array via initial data or `blocks.render()` won't break the editor
 - `Fix` — Layout did not shrink when a large document cleared in Chrome
 - `Fix` — Multiple Tooltip elements creation fixed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/editorjs",
-  "version": "2.29.0-rc.4",
+  "version": "2.29.0-rc.5",
   "description": "Editor.js — Native JS, based on API and Open Source",
   "main": "dist/editorjs.umd.js",
   "module": "dist/editorjs.mjs",

src/components/dom.ts

@@ -52,7 +52,7 @@ export default class Dom {
    * @param  {object} [attributes] - any attributes
    * @returns {HTMLElement}
    */
-  public static make(tagName: string, classNames: string | string[] = null, attributes: object = {}): HTMLElement {
+  public static make(tagName: string, classNames: string | string[] | null = null, attributes: object = {}): HTMLElement {
     const el = document.createElement(tagName);
 
     if (Array.isArray(classNames)) {

src/components/modules/ui.ts

@@ -294,6 +294,15 @@ export default class UI extends Module<UINodes> {
       textContent: styles.toString(),
     });
 
+    /**
+     * If user enabled Content Security Policy, he can pass nonce through the config
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce
+     */
+    if (this.config.style && !_.isEmpty(this.config.style) && this.config.style.nonce) {
+      tag.setAttribute('nonce', this.config.style.nonce);
+    }
+
     /**
      * Append styles at the top of HEAD tag
      */

test/cypress/tests/initialization.cy.ts

@@ -48,5 +48,21 @@ describe('Editor basic initialization', () => {
           .should('eq', 'false');
       });
     });
+
+    describe('style', () => {
+      describe('nonce', () => {
+        it('should add passed nonce as attribute to editor style tag', () => {
+          cy.createEditor({
+            style: {
+              nonce: 'test-nonce',
+            },
+          }).as('editorInstance');
+
+          cy.get('[data-cy=editorjs]')
+            .get('#editor-js-styles')
+            .should('have.attr', 'nonce', 'test-nonce');
+        });
+      });
+    });
   });
 });

types/configs/editor-config.d.ts

@@ -104,4 +104,15 @@ export interface EditorConfig {
    * Common Block Tunes list. Will be added to all the blocks which do not specify their own 'tunes' set
    */
   tunes?: string[];
+
+  /**
+   * Section for style-related settings
+   */
+  style?: {
+    /**
+     * A random value to handle Content Security Policy "style-src" policy
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce
+     */
+    nonce?: string;
+  }
 }