Allow style in span in markdown (#97793)

Part of #40607

2 files changed, 25 insertions, 3 deletions

diff --git a/src/vs/base/browser/markdownRenderer.ts b/src/vs/base/browser/markdownRenderer.ts
index 143ab78cb67..4726ad8b8de 100644
--- a/src/vs/base/browser/markdownRenderer.ts
+++ b/src/vs/base/browser/markdownRenderer.ts
@@ -188,6 +188,13 @@ export function renderMarkdown(markdown: IMarkdownString, options: MarkdownRende
 		}));
 	}
 
+	// Use our own sanitizer so that we can let through only spans.
+	// Otherwise, we'd be letting all html be rendered.
+	// If we want to allow markdown permitted tags, then we can delete sanitizer and sanitize.
+	markedOptions.sanitizer = (html: string): string => {
+		const match = markdown.isTrusted ? html.match(/^(<span[^<]+>)|(<\/\s*span>)$/) : undefined;
+		return match ? html : '';
+	};
 	markedOptions.sanitize = true;
 	markedOptions.renderer = renderer;
 
@@ -203,18 +210,32 @@ export function renderMarkdown(markdown: IMarkdownString, options: MarkdownRende
 		markedOptions
 	);
 
+	function filter(token: { tag: string, attrs: { readonly [key: string]: string } }): boolean {
+		if (token.tag === 'span' && markdown.isTrusted) {
+			if (token.attrs['style'] && Object.keys(token.attrs).length === 1) {
+				return !!token.attrs['style'].match(/^(color\:#[0-9a-fA-F]+;)?(background-color\:#[0-9a-fA-F]+;)?$/);
+			}
+			return false;
+		}
+		return true;
+	}
+
 	element.innerHTML = insane(renderedMarkdown, {
 		allowedSchemes,
+		// allowedTags should included everything that markdown renders to.
+		// Since we have our own sanitize function for marked, it's possible we missed some tag so let insane make sure.
+		// HTML tags that can result from markdown are from reading https://spec.commonmark.org/0.29/
+		allowedTags: ['ul', 'li', 'p', 'code', 'blockquote', 'ol', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'em', 'pre', 'table', 'tr', 'td', 'div', 'del', 'a', 'strong', 'br', 'img', 'span'],
 		allowedAttributes: {
 			'a': ['href', 'name', 'target', 'data-href'],
-			'iframe': ['allowfullscreen', 'frameborder', 'src'],
 			'img': ['src', 'title', 'alt', 'width', 'height'],
 			'div': ['class', 'data-code'],
-			'span': ['class'],
+			'span': ['class', 'style'],
 			// https://github.com/microsoft/vscode/issues/95937
 			'th': ['align'],
 			'td': ['align']
-		}
+		},
+		filter
 	});
 
 	signalInnerHTML!();
diff --git a/src/vs/base/common/insane/insane.d.ts b/src/vs/base/common/insane/insane.d.ts
index 9b5a77c3b8e..13fa1f2662b 100644
--- a/src/vs/base/common/insane/insane.d.ts
+++ b/src/vs/base/common/insane/insane.d.ts
@@ -9,6 +9,7 @@ export function insane(
 		readonly allowedSchemes?: readonly string[],
 		readonly allowedTags?: readonly string[],
 		readonly allowedAttributes?: { readonly [key: string]: string[] },
+		readonly filter?: (token: { tag: string, attrs: { readonly [key: string]: string } }) => boolean,
 	},
 	strict?: boolean,
 ): string;