diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 485b00e5..8274f50f 100644 --- a/docs/CHANGELOG.md +++ b/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 diff --git a/package.json b/package.json index cffc355c..4d87891f 100644 --- a/package.json +++ b/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", diff --git a/src/components/dom.ts b/src/components/dom.ts index 8c4afd41..1771c0c3 100644 --- a/src/components/dom.ts +++ b/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)) { diff --git a/src/components/modules/ui.ts b/src/components/modules/ui.ts index 5bcc7051..25b76b0e 100644 --- a/src/components/modules/ui.ts +++ b/src/components/modules/ui.ts @@ -294,6 +294,15 @@ export default class UI extends Module { 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 */ diff --git a/test/cypress/tests/initialization.cy.ts b/test/cypress/tests/initialization.cy.ts index 5ed95063..2336595f 100644 --- a/test/cypress/tests/initialization.cy.ts +++ b/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'); + }); + }); + }); }); }); diff --git a/types/configs/editor-config.d.ts b/types/configs/editor-config.d.ts index 7c38fdad..0f60a3fd 100644 --- a/types/configs/editor-config.d.ts +++ b/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; + } }