Bug fix for issue #724; XSS issue when importing through getHTML() function; remove usage of innerHTML and pre-parse the string using native JS DOMParser

packages/tiptap/src/Editor.js

@@ -4,13 +4,13 @@ import {
   PluginKey,
   TextSelection,
 } from 'prosemirror-state'
-import { EditorView } from 'prosemirror-view'
+import {EditorView} from 'prosemirror-view'
-import { Schema, DOMParser, DOMSerializer } from 'prosemirror-model'
+import {Schema, DOMParser, DOMSerializer} from 'prosemirror-model'
-import { dropCursor } from 'prosemirror-dropcursor'
+import {dropCursor} from 'prosemirror-dropcursor'
-import { gapCursor } from 'prosemirror-gapcursor'
+import {gapCursor} from 'prosemirror-gapcursor'
-import { keymap } from 'prosemirror-keymap'
+import {keymap} from 'prosemirror-keymap'
-import { baseKeymap } from 'prosemirror-commands'
+import {baseKeymap} from 'prosemirror-commands'
-import { inputRules, undoInputRule } from 'prosemirror-inputrules'
+import {inputRules, undoInputRule} from 'prosemirror-inputrules'
 import {
   markIsActive,
   nodeIsActive,
@@ -25,7 +25,7 @@ import {
   ComponentView,
   minMax,
 } from './Utils'
-import { Doc, Paragraph, Text } from './Nodes'
+import {Doc, Paragraph, Text} from './Nodes'
 import css from './style.css'
 
 export default class Editor extends Emitter {
@@ -52,13 +52,20 @@ export default class Editor extends Emitter {
       dropCursor: {},
       parseOptions: {},
       injectCSS: true,
-      onInit: () => {},
+      onInit: () => {
-      onTransaction: () => {},
+      },
-      onUpdate: () => {},
+      onTransaction: () => {
-      onFocus: () => {},
+      },
-      onBlur: () => {},
+      onUpdate: () => {
-      onPaste: () => {},
+      },
-      onDrop: () => {},
+      onFocus: () => {
+      },
+      onBlur: () => {
+      },
+      onPaste: () => {
+      },
+      onDrop: () => {
+      },
     }
 
     this.events = [
@@ -80,7 +87,7 @@ export default class Editor extends Emitter {
       ...options,
     })
     this.focused = false
-    this.selection = { from: 0, to: 0 }
+    this.selection = {from: 0, to: 0}
     this.element = document.createElement('div')
     this.extensions = this.createExtensions()
     this.nodes = this.createNodes()
@@ -103,7 +110,8 @@ export default class Editor extends Emitter {
     }
 
     this.events.forEach(name => {
-      this.on(name, this.options[camelCase(`on ${name}`)] || (() => {}))
+      this.on(name, this.options[camelCase(`on ${name}`)] || (() => {
+      }))
     })
 
     this.emit('init', {
@@ -272,8 +280,9 @@ export default class Editor extends Emitter {
     }
 
     if (typeof content === 'string') {
-      const element = document.createElement('div')
+      const htmlString = `<div>${content}</div>`;
-      element.innerHTML = content.trim()
+      const parser = new window.DOMParser;
+      const element = parser.parseFromString(htmlString, "text/html").body.firstChild;
 
       return DOMParser.fromSchema(this.schema).parse(element, parseOptions)
     }
@@ -284,8 +293,12 @@ export default class Editor extends Emitter {
   createView() {
     return new EditorView(this.element, {
       state: this.createState(),
-      handlePaste: (...args) => { this.emit('paste', ...args) },
+      handlePaste: (...args) => {
-      handleDrop: (...args) => { this.emit('drop', ...args) },
+        this.emit('paste', ...args)
+      },
+      handleDrop: (...args) => {
+        this.emit('drop', ...args)
+      },
       dispatchTransaction: this.dispatchTransaction.bind(this),
     })
   }
@@ -306,7 +319,7 @@ export default class Editor extends Emitter {
     })
   }
 
-  initNodeViews({ parent, extensions }) {
+  initNodeViews({parent, extensions}) {
     return extensions
       .filter(extension => ['node', 'mark'].includes(extension.type))
       .filter(extension => extension.view)
@@ -377,7 +390,7 @@ export default class Editor extends Emitter {
     }
 
     if (position === 'end') {
-      const { doc } = this.state
+      const {doc} = this.state
       return {
         from: doc.content.size,
         to: doc.content.size,
@@ -395,14 +408,14 @@ export default class Editor extends Emitter {
       return
     }
 
-    const { from, to } = this.resolveSelection(position)
+    const {from, to} = this.resolveSelection(position)
 
     this.setSelection(from, to)
     setTimeout(() => this.view.focus(), 10)
   }
 
   setSelection(from = 0, to = 0) {
-    const { doc, tr } = this.state
+    const {doc, tr} = this.state
     const resolvedFrom = minMax(from, 0, doc.content.size)
     const resolvedEnd = minMax(to, 0, doc.content.size)
     const selection = TextSelection.create(doc, resolvedFrom, resolvedEnd)
@@ -438,7 +451,7 @@ export default class Editor extends Emitter {
   }
 
   setContent(content = {}, emitUpdate = false, parseOptions) {
-    const { doc, tr } = this.state
+    const {doc, tr} = this.state
     const document = this.createDocument(content, parseOptions)
     const selection = TextSelection.create(doc, 0, doc.content.size)
     const transaction = tr
@@ -502,7 +515,7 @@ export default class Editor extends Emitter {
     const plugins = typeof handlePlugins === 'function'
       ? handlePlugins(plugin, this.state.plugins)
       : [plugin, ...this.state.plugins]
-    const newState = this.state.reconfigure({ plugins })
+    const newState = this.state.reconfigure({plugins})
     this.view.updateState(newState)
   }