Add trusted types policies where `.innerHTML` needs to be used (#108400)

src/vs/editor/browser/view/domLineBreaksComputer.ts

@@ -12,6 +12,8 @@ import * as strings from 'vs/base/common/strings';
 import { Configuration } from 'vs/editor/browser/config/configuration';
 import { ILineBreaksComputer, LineBreakData } from 'vs/editor/common/viewModel/viewModel';
 
+const ttPolicy = window.trustedTypes?.createPolicy('domLineBreaksComputer', { createHTML: value => value });
+
 export class DOMLineBreaksComputerFactory implements ILineBreaksComputerFactory {
 
 	public static create(): DOMLineBreaksComputerFactory {
@@ -108,7 +110,9 @@ function createLineBreaks(requests: string[], fontInfo: FontInfo, tabSize: numbe
 		allCharOffsets[i] = tmp[0];
 		allVisibleColumns[i] = tmp[1];
 	}
-	containerDomNode.innerHTML = sb.build();
+	const html = sb.build();
+	const trustedhtml = ttPolicy ? ttPolicy.createHTML(html) : html;
+	containerDomNode.innerHTML = trustedhtml as unknown as string;
 
 	containerDomNode.style.position = 'absolute';
 	containerDomNode.style.top = '10000';

src/vs/editor/browser/widget/diffEditorWidget.ts

@@ -156,6 +156,7 @@ let DIFF_EDITOR_ID = 0;
 
 const diffInsertIcon = registerIcon('diff-insert', Codicon.add);
 const diffRemoveIcon = registerIcon('diff-remove', Codicon.remove);
+const ttPolicy = window.trustedTypes?.createPolicy('diffEditorWidget', { createHTML: value => value });
 
 export class DiffEditorWidget extends Disposable implements editorBrowser.IDiffEditor {
 
@@ -2383,7 +2384,9 @@ class InlineViewZonesComputer extends ViewZonesComputer {
 			}
 			maxCharsPerLine += scrollBeyondLastColumn;
 
-			domNode.innerHTML = sb.build();
+			const html = sb.build();
+			const trustedhtml = ttPolicy ? ttPolicy.createHTML(html) : html;
+			domNode.innerHTML = trustedhtml as unknown as string;
 			viewZone.minWidthInPx = (maxCharsPerLine * typicalHalfwidthCharacterWidth);
 
 			if (viewLineCounts) {

src/vs/editor/standalone/browser/colorizer.ts

@@ -15,6 +15,8 @@ import { ViewLineRenderingData } from 'vs/editor/common/viewModel/viewModel';
 import { IStandaloneThemeService } from 'vs/editor/standalone/common/standaloneThemeService';
 import { MonarchTokenizer } from 'vs/editor/standalone/common/monarch/monarchLexer';
 
+const ttPolicy = window.trustedTypes?.createPolicy('standaloneColorizer', { createHTML: value => value });
+
 export interface IColorizerOptions {
 	tabSize?: number;
 }
@@ -40,7 +42,8 @@ export class Colorizer {
 		let text = domNode.firstChild ? domNode.firstChild.nodeValue : '';
 		domNode.className += ' ' + theme;
 		let render = (str: string) => {
-			domNode.innerHTML = str;
+			const trustedhtml = ttPolicy ? ttPolicy.createHTML(str) : str;
+			domNode.innerHTML = trustedhtml as unknown as string;
 		};
 		return this.colorize(modeService, text || '', mimeType, options).then(render, (err) => console.error(err));
 	}