Do not allow SVG by default (#3640)

src/auth/ha-auth-flow.ts

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

src/components/ha-markdown.ts

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

src/dialogs/config-flow/show-dialog-config-flow.ts

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

src/dialogs/config-flow/show-dialog-options-flow.ts

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

src/panels/profile/ha-mfa-module-setup-flow.js

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

src/resources/markdown_worker.ts

@@ -2,9 +2,21 @@ import marked from "marked";
 // @ts-ignore
 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), {
-    onIgnoreTag(tag, html) {
-      return ["svg", "path", "ha-icon"].indexOf(tag) !== -1 ? html : null;
-    },
+    onIgnoreTag: hassOptions.allowSvg
+      ? (tag, html) =>
+          allowedTag(tag) || allowedSvgTags.includes(tag) ? html : null
+      : (tag, html) => (allowedTag(tag) ? html : null),
   });