Allow href="data:..." in config flow step description (#25559)

* Allow href="data:..." in config flow step description

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

src/components/ha-markdown-element.ts

@@ -26,6 +26,9 @@ class HaMarkdownElement extends ReactiveElement {
 
   @property({ attribute: "allow-svg", type: Boolean }) public allowSvg = false;
 
+  @property({ attribute: "allow-data-url", type: Boolean })
+  public allowDataUrl = false;
+
   @property({ type: Boolean }) public breaks = false;
 
   @property({ type: Boolean, attribute: "lazy-images" }) public lazyImages =
@@ -66,6 +69,7 @@ class HaMarkdownElement extends ReactiveElement {
     return hash({
       content: this.content,
       allowSvg: this.allowSvg,
+      allowDataUrl: this.allowDataUrl,
       breaks: this.breaks,
     });
   }
@@ -79,6 +83,7 @@ class HaMarkdownElement extends ReactiveElement {
       },
       {
         allowSvg: this.allowSvg,
+        allowDataUrl: this.allowDataUrl,
       }
     );
 

src/components/ha-markdown.ts

@@ -8,6 +8,9 @@ export class HaMarkdown extends LitElement {
 
   @property({ attribute: "allow-svg", type: Boolean }) public allowSvg = false;
 
+  @property({ attribute: "allow-data-url", type: Boolean })
+  public allowDataUrl = false;
+
   @property({ type: Boolean }) public breaks = false;
 
   @property({ type: Boolean, attribute: "lazy-images" }) public lazyImages =
@@ -23,6 +26,7 @@ export class HaMarkdown extends LitElement {
     return html`<ha-markdown-element
       .content=${this.content}
       .allowSvg=${this.allowSvg}
+      .allowDataUrl=${this.allowDataUrl}
       .breaks=${this.breaks}
       .lazyImages=${this.lazyImages}
       .cache=${this.cache}

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

@@ -73,7 +73,12 @@ export const showConfigFlowDialog = (
       );
       return description
         ? html`
-            <ha-markdown allow-svg breaks .content=${description}></ha-markdown>
+            <ha-markdown
+              .allowDataUrl=${step.handler === "zwave_js"}
+              allow-svg
+              breaks
+              .content=${description}
+            ></ha-markdown>
           `
         : "";
     },

src/resources/markdown-worker.ts

@@ -7,34 +7,13 @@ import { filterXSS, getDefaultWhiteList } from "xss";
 let whiteListNormal: IWhiteList | undefined;
 let whiteListSvg: IWhiteList | undefined;
 
-// Override the default `onTagAttr` behavior to only render
-// our markdown checkboxes.
-// Returning undefined causes the default measure to be taken
-// in the xss library.
-const onTagAttr = (
-  tag: string,
-  name: string,
-  value: string
-): string | undefined => {
-  if (tag === "input") {
-    if (
-      (name === "type" && value === "checkbox") ||
-      name === "checked" ||
-      name === "disabled"
-    ) {
-      return undefined;
-    }
-    return "";
-  }
-  return undefined;
-};
-
 const renderMarkdown = async (
   content: string,
   markedOptions: MarkedOptions,
   hassOptions: {
     // Do not allow SVG on untrusted content, it allows XSS.
     allowSvg?: boolean;
+    allowDataUrl?: boolean;
   } = {}
 ): Promise<string> => {
   if (!whiteListNormal) {
@@ -70,10 +49,41 @@ const renderMarkdown = async (
   } else {
     whiteList = whiteListNormal;
   }
+  if (hassOptions.allowDataUrl && whiteList.a) {
+    whiteList.a.push("download");
+  }
 
   return filterXSS(await marked(content, markedOptions), {
     whiteList,
-    onTagAttr,
+    onTagAttr: (
+      tag: string,
+      name: string,
+      value: string
+    ): string | undefined => {
+      // Override the default `onTagAttr` behavior to only render
+      // our markdown checkboxes.
+      // Returning undefined causes the default measure to be taken
+      // in the xss library.
+      if (tag === "input") {
+        if (
+          (name === "type" && value === "checkbox") ||
+          name === "checked" ||
+          name === "disabled"
+        ) {
+          return undefined;
+        }
+        return "";
+      }
+      if (
+        hassOptions.allowDataUrl &&
+        tag === "a" &&
+        name === "href" &&
+        value.startsWith("data:")
+      ) {
+        return `href="${value}"`;
+      }
+      return undefined;
+    },
   });
 };