Do not allow SVG by default (#3640)

This commit is contained in:
Paulus Schoutsen 2019-09-06 17:36:28 -07:00 committed by GitHub
parent 3aba2e3408
commit 2ff4d0fa4b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 36 additions and 14 deletions

View File

@ -96,6 +96,7 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
return html` return html`
${this.localize("ui.panel.page-authorize.abort_intro")}: ${this.localize("ui.panel.page-authorize.abort_intro")}:
<ha-markdown <ha-markdown
allowsvg
.content=${this.localize( .content=${this.localize(
`ui.panel.page-authorize.form.providers.${ `ui.panel.page-authorize.form.providers.${
step.handler[0] step.handler[0]

View File

@ -10,6 +10,7 @@ let worker: any | undefined;
@customElement("ha-markdown") @customElement("ha-markdown")
class HaMarkdown extends UpdatingElement { class HaMarkdown extends UpdatingElement {
@property() public content = ""; @property() public content = "";
@property({ type: Boolean }) public allowSvg = false;
protected update(changedProps) { protected update(changedProps) {
super.update(changedProps); super.update(changedProps);
@ -22,11 +23,17 @@ class HaMarkdown extends UpdatingElement {
} }
private async _render() { private async _render() {
this.innerHTML = await worker.renderMarkdown(this.content, { this.innerHTML = await worker.renderMarkdown(
this.content,
{
breaks: true, breaks: true,
gfm: true, gfm: true,
tables: true, tables: true,
}); },
{
allowSvg: this.allowSvg,
}
);
this._resize(); this._resize();

View File

@ -45,7 +45,7 @@ export const showConfigFlowDialog = (
return description return description
? html` ? html`
<ha-markdown .content=${description}></ha-markdown> <ha-markdown allowsvg .content=${description}></ha-markdown>
` `
: ""; : "";
}, },
@ -64,7 +64,7 @@ export const showConfigFlowDialog = (
); );
return description return description
? html` ? html`
<ha-markdown .content=${description}></ha-markdown> <ha-markdown allowsvg .content=${description}></ha-markdown>
` `
: ""; : "";
}, },
@ -102,7 +102,7 @@ export const showConfigFlowDialog = (
</p> </p>
${description ${description
? html` ? html`
<ha-markdown .content=${description}></ha-markdown> <ha-markdown allowsvg .content=${description}></ha-markdown>
` `
: ""} : ""}
`; `;
@ -119,7 +119,7 @@ export const showConfigFlowDialog = (
return html` return html`
${description ${description
? html` ? html`
<ha-markdown .content=${description}></ha-markdown> <ha-markdown allowsvg .content=${description}></ha-markdown>
` `
: ""} : ""}
<p>Created config for ${step.title}.</p> <p>Created config for ${step.title}.</p>

View File

@ -39,7 +39,7 @@ export const showOptionsFlowDialog = (
return description return description
? html` ? html`
<ha-markdown .content=${description}></ha-markdown> <ha-markdown allowsvg .content=${description}></ha-markdown>
` `
: ""; : "";
}, },

View File

@ -73,6 +73,7 @@ class HaMfaModuleSetupFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
<template is="dom-if" if="[[_step]]"> <template is="dom-if" if="[[_step]]">
<template is="dom-if" if="[[_equals(_step.type, 'abort')]]"> <template is="dom-if" if="[[_equals(_step.type, 'abort')]]">
<ha-markdown <ha-markdown
allowsvg
content="[[_computeStepAbortedReason(localize, _step)]]" content="[[_computeStepAbortedReason(localize, _step)]]"
></ha-markdown> ></ha-markdown>
</template> </template>
@ -90,6 +91,7 @@ class HaMfaModuleSetupFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
if="[[_computeStepDescription(localize, _step)]]" if="[[_computeStepDescription(localize, _step)]]"
> >
<ha-markdown <ha-markdown
allowsvg
content="[[_computeStepDescription(localize, _step)]]" content="[[_computeStepDescription(localize, _step)]]"
></ha-markdown> ></ha-markdown>
</template> </template>

View File

@ -2,9 +2,21 @@ import marked from "marked";
// @ts-ignore // @ts-ignore
import filterXSS from "xss"; import filterXSS from "xss";
export const renderMarkdown = (content: string, markedOptions: object) => const allowedSvgTags = ["svg", "path"];
const allowedTag = (tag: string) => tag === "ha-icon";
export const renderMarkdown = (
content: string,
markedOptions: object,
hassOptions: {
// Do not allow SVG on untrusted content, it allows XSS.
allowSvg?: boolean;
} = {}
) =>
filterXSS(marked(content, markedOptions), { filterXSS(marked(content, markedOptions), {
onIgnoreTag(tag, html) { onIgnoreTag: hassOptions.allowSvg
return ["svg", "path", "ha-icon"].indexOf(tag) !== -1 ? html : null; ? (tag, html) =>
}, allowedTag(tag) || allowedSvgTags.includes(tag) ? html : null
: (tag, html) => (allowedTag(tag) ? html : null),
}); });