Merge pull request microsoft#258825 from mjbvz/magnificent-chinchilla

Allow disabled checkbox inputs in rendered markdown

Author: mjbvz

src/vs/base/browser/markdownRenderer.ts

@@ -424,6 +424,11 @@ function sanitizeRenderedMarkdown(
 	return domSanitize.sanitizeHtml(renderedMarkdown, sanitizerConfig);
 }
 
+export const allowedMarkdownHtmlTags = Object.freeze([
+	...domSanitize.basicMarkupHtmlTags,
+	'input', // Allow inputs for rendering checkboxes. Other types of inputs are removed and the inputs are always disabled
+]);
+
 export const allowedMarkdownHtmlAttributes = [
 	'align',
 	'autoplay',
@@ -483,7 +488,7 @@ function getSanitizerOptions(isTrusted: boolean | MarkdownStringTrustedOptions,
 		// HTML tags that can result from markdown are from reading https://spec.commonmark.org/0.29/
 		// HTML table tags that can result from markdown are from https://github.github.com/gfm/#tables-extension-
 		allowedTags: {
-			override: options.allowedTags?.override ?? domSanitize.basicMarkupHtmlTags
+			override: options.allowedTags?.override ?? allowedMarkdownHtmlTags
 		},
 		allowedAttributes: {
 			override: allowedMarkdownHtmlAttributes,
@@ -541,15 +546,19 @@ function getSanitizerOptions(isTrusted: boolean | MarkdownStringTrustedOptions,
 				}
 			},
 			uponSanitizeElement: (element, e) => {
+				let wantsReplaceWithPlaintext = false;
 				if (e.tagName === 'input') {
 					if (element.attributes.getNamedItem('type')?.value === 'checkbox') {
 						element.setAttribute('disabled', '');
-					} else if (!options.replaceWithPlaintext) {
+					} else if (options.replaceWithPlaintext) {
+						wantsReplaceWithPlaintext = true;
+					} else {
 						element.remove();
+						return;
 					}
 				}
 
-				if (options.replaceWithPlaintext && !e.allowedTags[e.tagName] && e.tagName !== 'body') {
+				if (options.replaceWithPlaintext && (wantsReplaceWithPlaintext || (!e.allowedTags[e.tagName] && e.tagName !== 'body'))) {
 					if (element.parentElement) {
 						let startTagText: string;
 						let endTagText: string | undefined;

src/vs/base/test/browser/markdownRenderer.test.ts

@@ -346,6 +346,17 @@ suite('MarkdownRenderer', () => {
 			const result = store.add(renderMarkdown(mds)).element;
 			assert.strictEqual(result.innerHTML, `<img src="vscode-file://vscode-app/images/cat.gif">`);
 		});
+
+		test('Should only allow checkbox inputs', () => {
+			const mds = new MarkdownString(
+				'text: <input type="text">\ncheckbox:<input type="checkbox">',
+				{ supportHtml: true });
+
+			const result = store.add(renderMarkdown(mds)).element;
+
+			// Inputs should always be disabled too
+			assert.strictEqual(result.innerHTML, `<p>text: \ncheckbox:<input type="checkbox" disabled=""></p>`);
+		});
 	});
 
 	suite('fillInIncompleteTokens', () => {

src/vs/workbench/contrib/chat/browser/chatMarkdownRenderer.ts

@@ -18,7 +18,7 @@ import { IOpenerService } from '../../../../platform/opener/common/opener.js';
 import product from '../../../../platform/product/common/product.js';
 import { REVEAL_IN_EXPLORER_COMMAND_ID } from '../../files/browser/fileConstants.js';
 
-export const allowedChatMarkdownHtmlTags = [
+export const allowedChatMarkdownHtmlTags = Object.freeze([
 	'b',
 	'blockquote',
 	'br',
@@ -53,7 +53,9 @@ export const allowedChatMarkdownHtmlTags = [
 	// Not in the official list, but used for codicons and other vscode markdown extensions
 	'span',
 	'div',
-];
+
+	'input', // Allowed for rendering checkboxes. Other types of inputs are removed and the inputs are always disabled
+]);
 
 /**
  * This wraps the MarkdownRenderer and applies sanitizer options needed for Chat.

src/vs/workbench/contrib/chat/test/browser/__snapshots__/ChatMarkdownRenderer_self-closing_elements.1.snap

@@ -0,0 +1 @@
+<div class="rendered-markdown"><p>&lt;area&gt;</p><hr><br><input type="checkbox" disabled=""><p></p></div>

src/vs/workbench/contrib/chat/test/browser/chatMarkdownRenderer.test.ts

@@ -79,10 +79,18 @@ suite('ChatMarkdownRenderer', () => {
 	});
 
 	test('self-closing elements', async () => {
-		const md = new MarkdownString('<area><hr><br><input type="text" value="test">');
-		md.supportHtml = true;
-		const result = store.add(testRenderer.render(md));
-		await assertSnapshot(result.element.outerHTML);
+		{
+			const md = new MarkdownString('<area><hr><br><input type="text" value="test">');
+			md.supportHtml = true;
+			const result = store.add(testRenderer.render(md));
+			await assertSnapshot(result.element.outerHTML);
+		}
+		{
+			const md = new MarkdownString('<area><hr><br><input type="checkbox">');
+			md.supportHtml = true;
+			const result = store.add(testRenderer.render(md));
+			await assertSnapshot(result.element.outerHTML);
+		}
 	});
 
 	test('html comments', async () => {