WebUI: Display error when download fails

Previously we would still download the file but it would contain the error response, resulting in an invalid file.
To test: export a .torrent file for a torrent that hasn't yet downloaded metadata

PR #21696.

Signed-off-by: Thomas Piccirello <thomas@piccirello.com>

src/webui/webapplication.cpp

@@ -467,7 +467,7 @@ void WebApplication::configure()
     const QString contentSecurityPolicy =
         (m_isAltUIUsed
             ? QString()
-            : u"default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src 'self' 'unsafe-inline'; object-src 'none'; form-action 'self';"_s)
+            : u"default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src 'self' 'unsafe-inline'; object-src 'none'; form-action 'self'; frame-src 'self' blob:;"_s)
         + (isClickjackingProtectionEnabled ? u" frame-ancestors 'self';"_s : QString())
         + (m_isHttpsEnabled ? u" upgrade-insecure-requests;"_s : QString());
     if (!contentSecurityPolicy.isEmpty())

src/webui/www/private/scripts/misc.js

@@ -47,6 +47,7 @@ window.qBittorrent.Misc ??= (() => {
             toFixedPointString: toFixedPointString,
             containsAllTerms: containsAllTerms,
             sleep: sleep,
+            downloadFile: downloadFile,
             // variables
             FILTER_INPUT_DELAY: 400,
             MAX_ETA: 8640000
@@ -275,6 +276,35 @@ window.qBittorrent.Misc ??= (() => {
         });
     };
 
+    const downloadFile = async (url, defaultFileName, errorMessage = "QBT_TR(Unable to download file)QBT_TR[CONTEXT=HttpServer]") => {
+        try {
+            const response = await fetch(url);
+            if (!response.ok) {
+                alert(errorMessage);
+                return;
+            }
+
+            const blob = await response.blob();
+            const fileNamePrefix = "attachment; filename=";
+            const fileNameHeader = response.headers.get("content-disposition");
+            let fileName = defaultFileName;
+            if (fileNameHeader.startsWith(fileNamePrefix)) {
+                fileName = fileNameHeader.substring(fileNamePrefix.length);
+                if (fileName.startsWith("\"") && fileName.endsWith("\""))
+                    fileName = fileName.slice(1, -1);
+            }
+
+            const link = document.createElement("a");
+            link.href = window.URL.createObjectURL(blob);
+            link.download = fileName;
+            link.click();
+            link.remove();
+        }
+        catch (error) {
+            alert(errorMessage);
+        }
+    };
+
     return exports();
 })();
 Object.freeze(window.qBittorrent.Misc);

src/webui/www/private/scripts/mocha-init.js

@@ -1115,16 +1115,10 @@ const initializeWindows = () => {
                 continue;
 
             const name = row.full_data.name;
-            const url = new URI("api/v2/torrents/export");
-            url.setData("hash", hash);
+            const url = new URI("api/v2/torrents/export").setData("hash", hash).toString();
 
             // download response to file
-            const element = document.createElement("a");
-            element.href = url;
-            element.download = (name + ".torrent");
-            document.body.appendChild(element);
-            element.click();
-            document.body.removeChild(element);
+            await window.qBittorrent.Misc.downloadFile(url, `${name}.torrent`, "QBT_TR(Unable to export torrent file)QBT_TR[CONTEXT=MainWindow]");
 
             // https://stackoverflow.com/questions/53560991/automatic-file-downloads-limited-to-10-files-on-chrome-browser
             await window.qBittorrent.Misc.sleep(200);