Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-04-27 12:04:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

Switch to dompurify for sanitizing markdown content (#131950)

Browse Source 
* Switch to dompurify for sanitizing markdown content

Switches us from using `insane` to instead use `dompurify`, which seems to be better maintained and also has some nice features, such as built-in trusted types support

I've tried to port over our existing sanitizer settings as best as possible, but there's not always a 1:1 mapping between how insane works and how dompurify does. I'd like to get this change in early in the iteration to catch potential regressions

* Remove logging and renaming param

* Move dompurify to browser layer

* Fixing tests and how we check valid attributes

* Allow innerhtml in specific files

* Use isEqualNode instead of checking innerHTML directly

innerHTML can return different results on different browsers. Use `isEqualNode` instead

* Reapply fix for trusted types

* Enable ALLOW_UNKNOWN_PROTOCOLS

I beleive this is required since we allow links to commands and loading images over remote

* in -> of

* Fix check of protocol

* Enable two more safe tags
This commit is contained in:
Matt Bierner
2021-09-03 12:17:02 -07:00
committed by GitHub
parent 82a3d2645f
commit 474d4951d8
20 changed files with 2042 additions and 669 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/vs/base/browser/dom.ts
View File

@@ -10,10 +10,10 @@ import { IMouseEvent, StandardMouseEvent } from 'vs/base/browser/mouseEvent';
import { TimeoutTimer } from 'vs/base/common/async';
import { onUnexpectedError } from 'vs/base/common/errors';
import { Emitter, Event } from 'vs/base/common/event';
import { insane, InsaneOptions } from 'vs/base/common/insane/insane';
import * as dompurify from 'vs/base/browser/dompurify/dompurify';
import { KeyCode } from 'vs/base/common/keyCodes';
import { Disposable, DisposableStore, IDisposable, toDisposable } from 'vs/base/common/lifecycle';
import { FileAccess, RemoteAuthorities } from 'vs/base/common/network';
import { FileAccess, RemoteAuthorities, Schemas } from 'vs/base/common/network';
import * as platform from 'vs/base/common/platform';
import { withNullAsUndefined } from 'vs/base/common/types';
import { URI } from 'vs/base/common/uri';
@@ -1361,52 +1361,41 @@ export function detectFullscreen(): IDetectedFullscreen | null {
// -- sanitize and trusted html
function _extInsaneOptions(opts: InsaneOptions, allowedAttributesForAll: string[]): InsaneOptions {
let allowedAttributes: Record<string, string[]> = opts.allowedAttributes ?? {};
if (opts.allowedTags) {
for (let tag of opts.allowedTags) {
let array = allowedAttributes[tag];
if (!array) {
array = allowedAttributesForAll;
} else {
array = array.concat(allowedAttributesForAll);
}
allowedAttributes[tag] = array;
}
}
return { ...opts, allowedAttributes };
}
const _ttpSafeInnerHtml = window.trustedTypes?.createPolicy('safeInnerHtml', {
createHTML(value, options: InsaneOptions) {
return insane(value, options);
}
});
/**
* Sanitizes the given `value` and reset the given `node` with it.
*/
export function safeInnerHtml(node: HTMLElement, value: string): void {
const options: dompurify.Config = {
ALLOWED_TAGS: ['a', 'button', 'blockquote', 'code', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'input', 'label', 'li', 'p', 'pre', 'select', 'small', 'span', 'strong', 'textarea', 'ul', 'ol'],
ALLOWED_ATTR: ['href', 'data-href', 'data-command', 'target', 'title', 'name', 'src', 'alt', 'class', 'id', 'role', 'tabindex', 'style', 'data-code', 'width', 'height', 'align', 'x-dispatch', 'required', 'checked', 'placeholder'],
RETURN_DOM: false,
RETURN_DOM_FRAGMENT: false,
};
const options = _extInsaneOptions({
allowedTags: ['a', 'button', 'blockquote', 'code', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'input', 'label', 'li', 'p', 'pre', 'select', 'small', 'span', 'strong', 'textarea', 'ul', 'ol'],
allowedAttributes: {
'a': ['href', 'x-dispatch'],
'button': ['data-href', 'x-dispatch'],
'input': ['type', 'placeholder', 'checked', 'required'],
'label': ['for'],
'select': ['required'],
'span': ['data-command', 'role'],
'textarea': ['name', 'placeholder', 'required'],
},
allowedSchemes: ['http', 'https', 'command']
}, ['class', 'id', 'role', 'tabindex']);
const allowedProtocols = [Schemas.http, Schemas.https, Schemas.command];
const html = _ttpSafeInnerHtml?.createHTML(value, options) ?? insane(value, options);
node.innerHTML = html as string;
// https://github.com/cure53/DOMPurify/blob/main/demos/hooks-scheme-allowlist.html
dompurify.addHook('afterSanitizeAttributes', (node) => {
// build an anchor to map URLs to
const anchor = document.createElement('a');
// check all href/src attributes for validity
for (const attr in ['href', 'src']) {
if (node.hasAttribute(attr)) {
anchor.href = node.getAttribute(attr) as string;
if (!allowedProtocols.includes(anchor.protocol)) {
node.removeAttribute(attr);
}
}
}
});
try {
const html = dompurify.sanitize(value, { ...options, RETURN_TRUSTED_TYPE: true });
node.innerHTML = html as unknown as string;
} finally {
dompurify.removeHook('afterSanitizeAttributes');
}
}
/**