Fix external image replacement serialization

Chromium changed how HTML is serialized:

https://developer.chrome.com/release-notes/138?

https://chromestatus.com/feature/6264983847174144

whatwg/html#6235

Which caused some of our HTML sanitizing tests to fail.

To prevent any possible issues with serialization we instead create
a Blob URL for our svg. This way we sidestep DOM serialization
peculiarities. As a side effect DOM should be smaller.

Close #9465

Co-authored-by: paw <[email protected]>

Author: 2 people

packages/otest/lib/Assertion.ts

@@ -80,7 +80,11 @@ export class Assertion<T> {
 	satisfies(check: (value: T) => { pass: false; message: string } | { pass: true }): AssertionDescriber {
 		const result = check(this.actual)
 		if (!result.pass) {
-			return this.addError(`expected to satisfy condition: "${result.message}"`)
+			return this.addError(`expected
+${this.actual}
+to satisfy condition:
+${result.message}
+`)
 		}
 		return noop
 	}
@@ -96,7 +100,11 @@ export class Assertion<T> {
 	): Promise<AssertionDescriber> {
 		const result = await check(this.actual)
 		if (!result.pass) {
-			return this.addError(`expected to satisfy condition: "${result.message}"`)
+			return this.addError(`expected
+${this.actual}
+to satisfy condition:
+${result.message}
+`)
 		}
 		return noop
 	}
@@ -105,7 +113,10 @@ export class Assertion<T> {
 	notSatisfies(check: (value: T) => { pass: boolean; message: string }): AssertionDescriber {
 		const result = check(this.actual)
 		if (result.pass) {
-			return this.addError(`expected "${asString(this.actual)}" to NOT satisfy condition: "${result.message}"`)
+			return this.addError(`expected
+${asString(this.actual)}
+to NOT satisfy condition:
+${result.message}`)
 		}
 		return noop
 	}

src/calendar-app/calendar/gui/eventeditor-model/CalendarEventModel.ts

@@ -182,7 +182,7 @@ export async function makeCalendarEventModel(
 	showProgress: ShowProgressCallback = identity,
 	uiUpdateCallback: () => void = m.redraw,
 ): Promise<CalendarEventModel | null> {
-	const { htmlSanitizer } = await import("../../../../common/misc/HtmlSanitizer.js")
+	const { getHtmlSanitizer } = await import("../../../../common/misc/HtmlSanitizer.js")
 	const ownMailAddresses = getOwnMailAddressesWithDefaultSenderInFront(logins, mailboxDetail, mailboxProperties)
 	if (operation === CalendarOperation.DeleteAll || operation === CalendarOperation.EditAll) {
 		assertNonNull(initialValues.uid, "tried to edit/delete all with nonexistent uid")
@@ -228,7 +228,7 @@ export async function makeCalendarEventModel(
 		alarmModel: new CalendarEventAlarmModel(eventType, alarms, new DefaultDateProvider(), uiUpdateCallback),
 		location: new SimpleTextViewModel(initializationEvent.location, uiUpdateCallback),
 		summary: new SimpleTextViewModel(initializationEvent.summary, uiUpdateCallback),
-		description: new SanitizedTextViewModel(initializationEvent.description, htmlSanitizer, uiUpdateCallback),
+		description: new SanitizedTextViewModel(initializationEvent.description, getHtmlSanitizer(), uiUpdateCallback),
 		comment: new SimpleTextViewModel("", uiUpdateCallback),
 	})
 

src/calendar-app/calendar/gui/eventpopup/CalendarEventPreviewViewModel.ts

@@ -349,11 +349,11 @@ export class CalendarEventPreviewViewModel {
 	}
 
 	async sanitizeDescription(): Promise<void> {
-		const { htmlSanitizer } = await import("../../../../common/misc/HtmlSanitizer.js")
+		const { getHtmlSanitizer } = await import("../../../../common/misc/HtmlSanitizer.js")
 		this.sanitizedDescription = prepareCalendarDescription(
 			this.calendarEvent.description,
 			(s) =>
-				htmlSanitizer.sanitizeHTML(convertTextToHtml(s), {
+				getHtmlSanitizer().sanitizeHTML(convertTextToHtml(s), {
 					blockExternalContent: false,
 					highlightedStrings: this.highlightedStrings,
 				}).html,

src/calendar-app/calendar/view/CalendarInvites.ts

@@ -52,7 +52,7 @@ async function getParsedEvent(fileData: DataFile): Promise<ParsedIcalFileContent
 }
 
 export async function showEventDetails(event: CalendarEvent, eventBubbleRect: ClientRect, mail: Mail | null): Promise<void> {
-	const [latestEvent, { CalendarEventPopup }, { CalendarEventPreviewViewModel }, { htmlSanitizer }] = await Promise.all([
+	const [latestEvent, { CalendarEventPopup }, { CalendarEventPreviewViewModel }, { getHtmlSanitizer }] = await Promise.all([
 		getLatestEvent(event),
 		import("../gui/eventpopup/CalendarEventPopup.js"),
 		import("../gui/eventpopup/CalendarEventPreviewViewModel.js"),
@@ -93,7 +93,7 @@ export async function showEventDetails(event: CalendarEvent, eventBubbleRect: Cl
 		lazyIndexEntry,
 		editModelsFactory,
 	)
-	new CalendarEventPopup(viewModel, eventBubbleRect, htmlSanitizer).show()
+	new CalendarEventPopup(viewModel, eventBubbleRect, getHtmlSanitizer()).show()
 }
 
 export async function getEventsFromFile(file: TutanotaFile, invitedConfidentially: boolean): Promise<ParsedIcalFileContent> {

src/calendar-app/calendar/view/CalendarView.ts

@@ -158,7 +158,7 @@ export class CalendarView extends BaseTopLevelView implements TopLevelView<Calen
 
 		this.viewModel = attrs.calendarViewModel
 		this.currentViewType = deviceConfig.getDefaultCalendarView(userId) || CalendarViewType.MONTH
-		this.htmlSanitizer = import("../../../common/misc/HtmlSanitizer").then((m) => m.htmlSanitizer)
+		this.htmlSanitizer = import("../../../common/misc/HtmlSanitizer").then((m) => m.getHtmlSanitizer())
 		this.sidebarColumn = new ViewColumn(
 			{
 				view: () =>

src/calendar-app/calendarLocator.ts

@@ -799,7 +799,7 @@ class CalendarLocator implements CommonLocator {
 				: new WebThemeFacade(deviceConfig)
 		const lazySanitizer = isTest()
 			? () => Promise.resolve(sanitizerStub as HtmlSanitizer)
-			: () => import("../common/misc/HtmlSanitizer").then(({ htmlSanitizer }) => htmlSanitizer)
+			: () => import("../common/misc/HtmlSanitizer").then(({ getHtmlSanitizer }) => getHtmlSanitizer())
 
 		this.themeController = new ThemeController(theme, selectedThemeFacade, lazySanitizer, AppType.Calendar)
 

src/common/gui/editor/HtmlEditor.ts

@@ -4,7 +4,7 @@ import { Editor } from "./Editor.js"
 import type { MaybeTranslation, TranslationKey } from "../../misc/LanguageViewModel"
 import { lang } from "../../misc/LanguageViewModel"
 import { px } from "../size"
-import { htmlSanitizer } from "../../misc/HtmlSanitizer"
+import { getHtmlSanitizer, HtmlSanitizer } from "../../misc/HtmlSanitizer"
 import { assertNotNull } from "@tutao/tutanota-utils"
 import { DropDownSelector } from "../base/DropDownSelector.js"
 import { RichTextToolbar, RichTextToolbarAttrs } from "../base/RichTextToolbar.js"
@@ -33,14 +33,16 @@ export class HtmlEditor implements Component {
 	private toolbarAttrs: Omit<RichTextToolbarAttrs, "editor"> = {}
 	private staticLineAmount: number | null = null // Static amount of lines the editor shall allow at all times
 
+	private readonly htmlSanitizer: HtmlSanitizer = getHtmlSanitizer()
+
 	constructor(
 		private label?: MaybeTranslation,
 		private readonly injections?: () => Children,
 	) {
 		this.editor = new Editor(
 			null,
 			(html) =>
-				htmlSanitizer.sanitizeFragment(html, {
+				this.htmlSanitizer.sanitizeFragment(html, {
 					blockExternalContent: false,
 					allowRelativeLinks: this.areRelativeLinksAllowed,
 				}).fragment,
@@ -216,7 +218,7 @@ export class HtmlEditor implements Component {
 			}
 		} else {
 			if (this.domTextArea) {
-				return htmlSanitizer.sanitizeHTML(this.domTextArea.value, {
+				return this.htmlSanitizer.sanitizeHTML(this.domTextArea.value, {
 					blockExternalContent: false,
 					allowRelativeLinks: this.areRelativeLinksAllowed,
 				}).html

src/common/mailFunctionality/SendMailModel.ts

@@ -906,9 +906,9 @@ export class SendMailModel {
 			const attachments = saveAttachments ? this.attachments : null
 
 			// We also want to create new drafts for drafts edited from trash or spam folder
-			const { htmlSanitizer } = await import("../misc/HtmlSanitizer.js")
+			const { getHtmlSanitizer } = await import("../misc/HtmlSanitizer.js")
 			const unsanitized_body = this.getBody()
-			const body = htmlSanitizer.sanitizeHTML(unsanitized_body, {
+			const body = getHtmlSanitizer().sanitizeHTML(unsanitized_body, {
 				// store the draft always with external links preserved. this reverts
 				// the draft-src and draft-srcset attribute stow.
 				blockExternalContent: false,

src/common/misc/HtmlSanitizer.ts

@@ -1,12 +1,8 @@
 import { ReplacementImage } from "../gui/base/icons/Icons"
-import { downcast, isEmpty, stringToUtf8Uint8Array, utf8Uint8ArrayToString } from "@tutao/tutanota-utils"
+import { downcast, isEmpty, memoized, stringToUtf8Uint8Array, utf8Uint8ArrayToString } from "@tutao/tutanota-utils"
 import { DataFile } from "../api/common/DataFile"
-import { encodeSVG } from "../gui/base/GuiUtils.js"
 import DOMPurify, { Config } from "dompurify"
-import { splitTextForHighlighting, SearchToken } from "../api/common/utils/QueryTokenUtils"
-
-/** Data url for an SVG image that will be shown in place of external content. */
-export const PREVENT_EXTERNAL_IMAGE_LOADING_ICON: string = encodeSVG(ReplacementImage)
+import { SearchToken, splitTextForHighlighting } from "../api/common/utils/QueryTokenUtils"
 
 // background attribute is deprecated but still used in common browsers
 const EXTERNAL_CONTENT_ATTRS = Object.freeze([
@@ -123,9 +119,9 @@ export class HtmlSanitizer {
 	private links!: Array<Link>
 	private purifier!: typeof DOMPurify
 
-	constructor() {
+	constructor(private readonly replacementImageUrl: string) {
 		if (DOMPurify.isSupported) {
-			this.purifier = DOMPurify
+			this.purifier = DOMPurify()
 			// Do changes in afterSanitizeAttributes and not afterSanitizeElements so that images are not removed again because of the SVGs.
 			this.purifier.addHook("afterSanitizeAttributes", this.afterSanitizeAttributes.bind(this))
 			this.purifier.addHook("beforeSanitizeElements", this.beforeSanitizeElements.bind(this))
@@ -335,15 +331,15 @@ export class HtmlSanitizer {
 
 					this.inlineImageCids.push(cid)
 
-					attribute.value = PREVENT_EXTERNAL_IMAGE_LOADING_ICON
+					attribute.value = this.replacementImageUrl
 					htmlNode.setAttribute("cid", cid)
 					htmlNode.classList.add("tutanota-placeholder")
 				} else if (config.blockExternalContent && attribute.name === "srcset") {
 					this.externalContent++
 
 					htmlNode.setAttribute("draft-srcset", attribute.value)
 					htmlNode.removeAttribute("srcset")
-					htmlNode.setAttribute("src", PREVENT_EXTERNAL_IMAGE_LOADING_ICON)
+					htmlNode.setAttribute("src", this.replacementImageUrl)
 					htmlNode.style.maxWidth = "100px"
 				} else if (
 					config.blockExternalContent &&
@@ -360,7 +356,7 @@ export class HtmlSanitizer {
 					this.externalContent++
 
 					htmlNode.setAttribute("draft-" + attribute.name, attribute.value)
-					attribute.value = PREVENT_EXTERNAL_IMAGE_LOADING_ICON
+					attribute.value = this.replacementImageUrl
 					htmlNode.attributes.setNamedItem(attribute)
 					htmlNode.style.maxWidth = "100px"
 				} else if (!config.blockExternalContent && DRAFT_ATTRIBUTES.includes(attribute.name)) {
@@ -413,7 +409,7 @@ export class HtmlSanitizer {
 		// image-set('test.jpg' 1x, 'test-2x.jpg' 2x)
 		if (value.includes("url(") && value.match(/url\(/g)?.length !== value.match(/url\(["']?data:/g)?.length) {
 			this.externalContent++
-			;(htmlNode.style as any)[styleAttributeName] = `url("${PREVENT_EXTERNAL_IMAGE_LOADING_ICON}")`
+			;(htmlNode.style as any)[styleAttributeName] = `url("${this.replacementImageUrl}")`
 
 			if (limitWidth) {
 				htmlNode.style.maxWidth = "100px"
@@ -509,4 +505,14 @@ function isTextElement(node: Node): node is Text {
 	return node.nodeName === "#text"
 }
 
-export const htmlSanitizer: HtmlSanitizer = new HtmlSanitizer()
+export const getHtmlSanitizer = memoized(() => {
+	// Create a blob URL for the replacement image instead of inlining SVG as data URL.
+	// This way we sidestep serialization/escaping problems plus DOM is smaller.
+	// It is never revoked and should only be run in browser context so we lazily instantiate
+	// it once.
+	const blob = new Blob([ReplacementImage], {
+		type: "image/svg+xml",
+	})
+
+	return new HtmlSanitizer(URL.createObjectURL(blob))
+})

src/common/settings/EditNotificationEmailDialog.ts

@@ -11,7 +11,7 @@ import { DropDownSelector } from "../gui/base/DropDownSelector.js"
 import { TextField } from "../gui/base/TextField.js"
 import { showProgressDialog } from "../gui/dialogs/ProgressDialog.js"
 import { assertNotNull, LazyLoaded, memoized, neverNull, ofClass } from "@tutao/tutanota-utils"
-import { htmlSanitizer } from "../misc/HtmlSanitizer.js"
+import { getHtmlSanitizer } from "../misc/HtmlSanitizer.js"
 import { PayloadTooLargeError } from "../api/common/error/RestError.js"
 import { SegmentControl } from "../gui/base/SegmentControl.js"
 import { UserError } from "../api/main/UserError.js"
@@ -162,6 +162,7 @@ export function show(existingTemplate: NotificationMailTemplate | null, customer
 		senderDomain = "https://" + ((whitelabelDomainInfo && whitelabelDomainInfo.domain) || "app.tuta.com")
 		m.redraw()
 	})
+	const htmlSanitizer = getHtmlSanitizer()
 	// Even though savedHtml is always sanitized changing it might lead to mXSS
 	const sanitizePreview = memoized<(html: string) => string>((html) => {
 		return htmlSanitizer.sanitizeHTML(html).html