fix: move revoking of object urls to content script and update firefo…

…x implementation for binary data (#308)

* chore: move revoking of object urls to content script

* chore: update CSP for firefox to allow fetching blobs

* fix: update firefox implementation

* chore: revert version bump

manifest.firefox.json

@@ -1,8 +1,6 @@
 {
   "background": {
-    "scripts": [
-      "index.js"
-    ]
+    "scripts": ["index.js"]
   },
   "browser_specific_settings": {
     "gecko": {
@@ -12,4 +10,4 @@
   "content_security_policy": {
     "extension_pages": "script-src 'self'"
   }
-}
+}

src/contentScript.ts

@@ -114,6 +114,10 @@ function main() {
   chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
     if (msg.action === "__POSTWOMAN_EXTENSION_PING__") {
       sendResponse(true)
+    } else if (msg.action === "__POSTWOMAN_EXTENSION_REVOKE_OBJECT_URLS__") {
+      msg.objectURLsToRevoke.forEach((objectURL: string) => {
+        URL.revokeObjectURL(objectURL)
+      })
     }
   })
 }

src/hookContent.js

@@ -84,12 +84,14 @@
         })
 
       if (config.data instanceof File) {
-        config.binaryContent = {
-          name: config.data.name,
-          type: config.data.type,
-          size: config.data.size,
-          // we'll convert the file to a url to access it from the extension
-          objectURL: URL.createObjectURL(config.data),
+        // firefox successfully sends the file object as is, but chrome malforms it
+        // so we're using objectURLs to access the file from the extension in chrome
+        if (process.env.HOPP_EXTENSION_TARGET === "CHROME") {
+          config.binaryContent = {
+            name: config.data.name,
+            // we'll convert the file to a url to access it from the extension
+            objectURL: URL.createObjectURL(config.data),
+          }
         }
       }
 

src/index.ts

@@ -52,7 +52,9 @@ async function fetchUsingAxiosConfig(
     method: axiosConfig.method,
 
     // Ignore the body for GET and HEAD requests to prevent error with axios
-    body: (["get", "head"].includes(axiosConfig.method?.toLowerCase())) ? undefined : axiosConfig.data,
+    body: ["get", "head"].includes(axiosConfig.method?.toLowerCase())
+      ? undefined
+      : axiosConfig.data,
     signal: abortController.signal,
   })
 
@@ -212,8 +214,6 @@ const processBinaryBody: (
     const blob = await response.blob()
 
     reqConfig.data = new File([blob], reqConfig.binaryContent.name, {})
-
-    URL.revokeObjectURL(objectURL)
   }
 
   return reqConfig
@@ -263,7 +263,7 @@ const getAllFetchResponseHeaders = (
   return headers
 }
 
-const handleSendRequestMessage = async (config: any) => {
+const handleSendRequestMessage = async (config: any, tabID?: number) => {
   try {
     const processedConfig = await processRequest(config)
 
@@ -331,6 +331,25 @@ const handleSendRequestMessage = async (config: any) => {
       },
     }
   } finally {
+    // revoke the objectURLs, if any
+    // keeping this as an array, cause in the future, if we're adding support for formdata files in a similar way, we can add those objectURLs here
+    const objectURLsToRevoke: string[] = []
+
+    if (config.binaryContent?.objectURL) {
+      objectURLsToRevoke.push(config.binaryContent.objectURL)
+    }
+
+    if (objectURLsToRevoke.length > 0 && tabID) {
+      chrome.tabs.sendMessage(
+        tabID,
+        {
+          action: "__POSTWOMAN_EXTENSION_REVOKE_OBJECT_URLS__",
+          objectURLsToRevoke,
+        },
+        () => {}
+      )
+    }
+
     // remove the cookies set for this request
     await removeRequestCookies()
   }
@@ -346,7 +365,7 @@ const cancelRequest = () => {
 chrome.runtime.onMessage.addListener(
   (message: PWChromeMessage<any>, _sender, sendResponse) => {
     if (message.messageType === "send-req") {
-      handleSendRequestMessage(message.data).then(sendResponse)
+      handleSendRequestMessage(message.data, _sender.tab.id).then(sendResponse)
       return true
     } else if (message.messageType === "cancel-req") {
       cancelRequest()