add support for CSP nonces in createStyleTag

ueberdosis · May 13, 2022 · ccc37d5 · ccc37d5
1 parent 413a923
commit ccc37d5
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 2 deletions.
diff --git a/docs/api/editor.md b/docs/api/editor.md
@@ -349,6 +349,22 @@ new Editor({
 })
 ```
 
+### injectNonce
+When you use a [Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) with `nonce`, you can specify a `nonce` to be added to dynamically created elements. Here is an example:
+
+```js
+import { Editor } from '@tiptap/core'
+import StarterKit from '@tiptap/starter-kit'
+
+new Editor({
+  extensions: [
+    StarterKit,
+  ],
+  injectCSS: true,
+  injectNonce: "your-nonce-here"
+})
+```
+
 ### editorProps
 For advanced use cases, you can pass `editorProps` which will be handled by [ProseMirror](https://prosemirror.net/docs/ref/#view.EditorProps). You can use it to override various editor events or change editor DOM element attributes, for example to add some Tailwind classes. Here is an example:
 

diff --git a/packages/core/src/Editor.ts b/packages/core/src/Editor.ts
@@ -57,6 +57,7 @@ export class Editor extends EventEmitter<EditorEvents> {
     element: document.createElement('div'),
     content: '',
     injectCSS: true,
+    injectNonce: undefined,
     extensions: [],
     autofocus: false,
     editable: true,
@@ -136,7 +137,7 @@ export class Editor extends EventEmitter<EditorEvents> {
    */
   private injectCSS(): void {
     if (this.options.injectCSS && document) {
-      this.css = createStyleTag(style)
+      this.css = createStyleTag(style, this.options.injectNonce)
     }
   }
 

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -70,6 +70,7 @@ export interface EditorOptions {
   content: Content,
   extensions: Extensions,
   injectCSS: boolean,
+  injectNonce: string | undefined,
   autofocus: FocusPosition,
   editable: boolean,
   editorProps: EditorProps,

diff --git a/packages/core/src/utilities/createStyleTag.ts b/packages/core/src/utilities/createStyleTag.ts
@@ -1,4 +1,4 @@
-export function createStyleTag(style: string): HTMLStyleElement {
+export function createStyleTag(style: string, nonce?: string): HTMLStyleElement {
   const tipTapStyleTag = (<HTMLStyleElement>document.querySelector('style[data-tiptap-style]'))
 
   if (tipTapStyleTag !== null) {
@@ -7,6 +7,10 @@ export function createStyleTag(style: string): HTMLStyleElement {
 
   const styleNode = document.createElement('style')
 
+  if (nonce) {
+    styleNode.setAttribute('nonce', nonce)
+  }
+
   styleNode.setAttribute('data-tiptap-style', '')
   styleNode.innerHTML = style
   document.getElementsByTagName('head')[0].appendChild(styleNode)