diff --git a/hassio/src/snapshots/hassio-snapshot.js b/hassio/src/snapshots/hassio-snapshot.js
index d105d8436d..e36c4c1b5b 100644
--- a/hassio/src/snapshots/hassio-snapshot.js
+++ b/hassio/src/snapshots/hassio-snapshot.js
@@ -7,6 +7,7 @@ import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
+import { getSignedPath } from "../../../src/auth/data";
 
 import "../../../src/resources/ha-style";
 
@@ -116,16 +117,12 @@ class HassioSnapshot extends PolymerElement {
             class="warning"
             title="Delete snapshot"
           ></paper-icon-button>
-          <a
-            href="[[_computeDownloadUrl(snapshotSlug)]]"
-            download="[[_computeDownloadName(snapshot)]]"
-          >
-            <paper-icon-button
-              icon="hassio:download"
-              class="download"
-              title="Download snapshot"
-            ></paper-icon-button>
-          </a>
+          <paper-icon-button
+            on-click="_downloadClicked"
+            icon="hassio:download"
+            class="download"
+            title="Download snapshot"
+          ></paper-icon-button>
           <paper-button on-click="_partialRestoreClicked"
             >Restore selected</paper-button
           >
@@ -282,14 +279,24 @@ class HassioSnapshot extends PolymerElement {
       );
   }
 
-  _computeDownloadUrl(snapshotSlug) {
-    const password = encodeURIComponent(this.hass.connection.options.authToken);
-    return `/api/hassio/snapshots/${snapshotSlug}/download?api_password=${password}`;
-  }
-
-  _computeDownloadName(snapshot) {
-    const name = this._computeName(snapshot).replace(/[^a-z0-9]+/gi, "_");
-    return `Hass_io_${name}.tar`;
+  async _downloadClicked() {
+    let signedPath;
+    try {
+      signedPath = await getSignedPath(
+        this.hass,
+        `/api/hassio/snapshots/${this.snapshotSlug}/download`
+      );
+    } catch (err) {
+      alert(`Error: ${err.message}`);
+      return;
+    }
+    const name = this._computeName(this.snapshot).replace(/[^a-z0-9]+/gi, "_");
+    const a = document.createElement("A");
+    a.href = signedPath.path;
+    a.download = `Hass_io_${name}.tar`;
+    this.$.dialog.appendChild(a);
+    a.click();
+    this.$.dialog.removeChild(a);
   }
 
   _computeName(snapshot) {
diff --git a/src/auth/data.ts b/src/auth/data.ts
new file mode 100644
index 0000000000..f970e90d52
--- /dev/null
+++ b/src/auth/data.ts
@@ -0,0 +1,7 @@
+import { HomeAssistant } from "../types";
+import { SignedPath } from "./types";
+
+export const getSignedPath = (
+  hass: HomeAssistant,
+  path: string
+): Promise<SignedPath> => hass.callWS({ type: "auth/sign_path", path });
diff --git a/src/auth/types.ts b/src/auth/types.ts
new file mode 100644
index 0000000000..bb1b00180a
--- /dev/null
+++ b/src/auth/types.ts
@@ -0,0 +1,3 @@
+export interface SignedPath {
+  path: string;
+}