Ensure we always sanitize HTML we set as innerHTML

basecamp · May 28, 2024 · e87da3f · e87da3f
1 parent ccf7b20
commit e87da3f
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/src/trix/models/html_parser.js b/src/trix/models/html_parser.js
@@ -90,8 +90,7 @@ export default class HTMLParser extends BasicObject {
   parse() {
     try {
       this.createHiddenContainer()
-      const html = HTMLSanitizer.sanitize(this.html).getHTML()
-      this.containerElement.innerHTML = html
+      HTMLSanitizer.setHTML(this.containerElement, this.html)
       const walker = walkTree(this.containerElement, { usingFilter: nodeFilter })
       while (walker.nextNode()) {
         this.processNode(walker.currentNode)

diff --git a/src/trix/models/html_sanitizer.js b/src/trix/models/html_sanitizer.js
@@ -7,6 +7,10 @@ const DEFAULT_FORBIDDEN_PROTOCOLS = "javascript:".split(" ")
 const DEFAULT_FORBIDDEN_ELEMENTS = "script iframe form noscript".split(" ")
 
 export default class HTMLSanitizer extends BasicObject {
+  static setHTML(element, html) {
+    element.innerHTML = new this(html).sanitize().getHTML()
+  }
+
   static sanitize(html, options) {
     const sanitizer = new this(html, options)
     sanitizer.sanitize()

diff --git a/src/trix/views/attachment_view.js b/src/trix/views/attachment_view.js
@@ -2,6 +2,7 @@ import * as config from "trix/config"
 import { ZERO_WIDTH_SPACE } from "trix/constants"
 import { copyObject, makeElement } from "trix/core/helpers"
 import ObjectView from "trix/views/object_view"
+import HTMLSanitizer from "trix/models/html_sanitizer"
 
 const { css } = config
 
@@ -33,7 +34,7 @@ export default class AttachmentView extends ObjectView {
     }
 
     if (this.attachment.hasContent()) {
-      innerElement.innerHTML = this.attachment.getContent()
+      HTMLSanitizer.setHTML(innerElement, this.attachment.getContent())
     } else {
       this.createContentNodes().forEach((node) => {
         innerElement.appendChild(node)
@@ -165,6 +166,6 @@ const createCursorTarget = (name) =>
 
 const htmlContainsTagName = function(html, tagName) {
   const div = makeElement("div")
-  div.innerHTML = html || ""
+  HTMLSanitizer.setHTML(div, html || "")
   return div.querySelector(tagName)
 }