fix: use only the DOM for key

src/user/reporting/ReportMenu.tsx

@@ -18,6 +18,7 @@ import {
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 import DownloadIcon from "@mui/icons-material/Download";
+import { uInt8Array } from "util/uInt8Array";
 
 interface ReportMenuProps {
   hasVerifiedConversions: boolean;
@@ -27,19 +28,20 @@ export const ReportMenu = ({
   campaignId,
   hasVerifiedConversions,
 }: ReportMenuProps) => {
-  const [privateKey, setPrivateKey] = useState<string>();
   const [dialogue, setDialogue] = useState(false);
   const [isError, setIsError] = useState(false);
+  const set = (s: string) =>
+    document.getElementById("private-key")?.setAttribute("value", s);
+  const get = () =>
+    document.getElementById("private-key")?.getAttribute("value");
   const { download, loading, error } = useDownloadCSV({
     onComplete() {
       setAnchorEl(null);
       setDialogue(false);
-      setPrivateKey(undefined);
     },
     onError() {
       setIsError(true);
       setDialogue(false);
-      setPrivateKey(undefined);
     },
   });
 
@@ -98,7 +100,13 @@ export const ReportMenu = ({
         </Alert>
       </Snackbar>
 
-      <Dialog open={dialogue} onClose={() => setDialogue(false)}>
+      <Dialog
+        open={dialogue}
+        onClose={() => {
+          setDialogue(false);
+          // setPrivateKey(undefined);
+        }}
+      >
         <DialogTitle>Decrypt Conversion Data?</DialogTitle>
         <DialogContent>
           <DialogContentText>
@@ -110,13 +118,15 @@ export const ReportMenu = ({
             be sent to or stored on any Brave servers.
           </DialogContentText>
           <TextField
+            autoComplete="off"
+            onChange={(e) => set(e.target.value)}
             autoFocus
-            onChange={(e) => setPrivateKey(e.target.value)}
             margin="normal"
             label="Private key"
             fullWidth
             variant="standard"
           />
+          <input type="hidden" id="private-key" />
           {loading && <LinearProgress />}
         </DialogContent>
         <DialogActions>
@@ -129,7 +139,11 @@ export const ReportMenu = ({
           </Button>
           <Button
             variant="contained"
-            onClick={() => download(campaignId, true, privateKey)}
+            onClick={() => {
+              const val = get();
+              const pk = val ? uInt8Array(val) : undefined;
+              download(campaignId, true, pk);
+            }}
             disabled={loading}
           >
             Export

src/user/reporting/csv.library.tsx

@@ -2,6 +2,7 @@ import { useCallback, useState } from "react";
 import { buildAdServerEndpoint } from "util/environment";
 import Papa from "papaparse";
 import tweetnacl from "tweetnacl";
+import { uInt8Array } from "util/uInt8Array";
 interface DownloadProps {
   onComplete?: () => void;
   onError?: () => void;
@@ -12,7 +13,7 @@ export function useDownloadCSV(props: DownloadProps = {}) {
   const [error, setError] = useState<string>();
 
   const download = useCallback(
-    (campaignId: string, isVac: boolean, privateKey?: string) => {
+    (campaignId: string, isVac: boolean, privateKey?: Uint8Array) => {
       setLoading(true);
       setError(undefined);
 
@@ -71,15 +72,13 @@ export function useDownloadCSV(props: DownloadProps = {}) {
 type Envelope = { ciphertext: string; epk: string; nonce: string };
 async function transformConversionEnvelope(
   blob: Blob,
-  privateKey?: string,
+  privateKey?: Uint8Array,
 ): Promise<Blob> {
   if (!privateKey) {
     return Promise.resolve(blob);
   }
 
-  const te = new TextEncoder();
   const td = new TextDecoder();
-  const ui8a = (s: string) => Uint8Array.from(atob(s), (c) => c.charCodeAt(0));
 
   return await new Promise((resolve, reject) => {
     const fileReader = new FileReader();
@@ -98,10 +97,10 @@ async function transformConversionEnvelope(
             if (field.includes("Conversion")) {
               const { ciphertext, nonce, epk }: Envelope = JSON.parse(value);
               const res = tweetnacl.box.open(
-                ui8a(ciphertext),
-                ui8a(nonce),
-                ui8a(epk),
-                ui8a(privateKey),
+                uInt8Array(ciphertext),
+                uInt8Array(nonce),
+                uInt8Array(epk),
+                privateKey,
               );
               return res
                 ? td.decode(res.filter((v) => v !== 0x00))
@@ -114,8 +113,7 @@ async function transformConversionEnvelope(
             const newCSV = Papa.unparse(results.data, {
               skipEmptyLines: "greedy",
             });
-            const blob = te.encode(newCSV).buffer;
-            resolve(new Blob([blob]));
+            resolve(new Blob([newCSV]));
           },
           error(error: Error) {
             reject(error);

src/util/uInt8Array.ts

@@ -0,0 +1,2 @@
+export const uInt8Array = (s: string) =>
+  Uint8Array.from(atob(s), (c) => c.charCodeAt(0));