fix: security issues with programatic download

adds fetch and blob so that the browser can explicitly fetch the file before download

Author: buckhalt

app/(dashboard)/dashboard/interviews/_components/ExportInterviewsDialog.tsx

@@ -75,7 +75,7 @@ export const ExportInterviewsDialog = ({
       }
 
       // Download the zip file
-      download(result.data.url, result.data.name);
+      await download(result.data.url, result.data.name);
     } catch (error) {
       toast({
         icon: <XCircle />,

hooks/useDownload.ts

@@ -1,14 +1,25 @@
 import { useCallback } from 'react';
 
 export const useDownload = () => {
-  const download = useCallback((url: string, nameWithExtension: string) => {
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = nameWithExtension;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  }, []);
+  const download = useCallback(
+    async (url: string, nameWithExtension: string) => {
+      try {
+        const response = await fetch(url);
+        const blob = await response.blob();
+        const blobUrl = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = blobUrl;
+        link.download = nameWithExtension;
+        document.body.appendChild(link);
+        link.click();
+        URL.revokeObjectURL(blobUrl);
+        document.body.removeChild(link);
+      } catch (error) {
+        throw new Error('Failed to download file');
+      }
+    },
+    [],
+  );
 
   return download;
 };