diff --git a/src/trix/models/html_parser.js b/src/trix/models/html_parser.js
index 306ca3edf..601e428fe 100644
--- 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
index 12893dc30..8473255a4 100644
--- 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
index 231e25360..17a9cef8c 100644
--- 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)
}