How do you send a cookie to a cross origin request using react and maybe electron?

Question

I need to make a request to this other website and I need to send a cookie alongside it. I have no control over this other website so I cannot modify its cors policy or allow credentials in any meaningful way.

So, I decided to convert my website to a react app that will run contained inside an electron web browser. I thought that as the electron has full control over the computer, I would be able to send a normal request without having to deal with cors, but it seems, that cors and all sorts of other protections are still enabled.

To clarify my current setup, I have:

A react website localhost:3000
A electron app showing the react website.
There is no other communication happening between the two.
All requests are made solely by the react website.
The react website needs to communicate with foreignwebsite.com and send a cookie to it.

Normally this in any server-side type of application, including electron itself, would be of no problem, but react cannot make direct requests.

One way I could do this was to potentially create a middle server that communicates with the foreigner API and friendly gives me the data I need for my front-end app. But, I don't want to host a server, and if I create a server on the client machine I think the app would be too heavy.

I could use the electron process as a server and make node.js requests with it, but to communicate between react and electron seems weirdly complicated, it feels like it would be a mess of events.

I found an answer online that tries to kind of deactivate the cors of the electron browser, it partially did work, or at least it seems that it worked, it shows no error but the cookie simply isn't transferred, maybe it just tricks the browser but it doesn't work behind the scenes, idk...

  const filter = {
    urls: ['http://foreignwebsite.com/*']
  }
  
  mainWindow.webContents.session.webRequest.onBeforeSendHeaders(
    filter,
    (details, callback) => {
      details.requestHeaders.Origin = `http://foreignwebsite.com/`
      details.requestHeaders.Referer = `http://foreignwebsite.com/`
      callback({ requestHeaders: details.requestHeaders })
    }
  )
  
  mainWindow.webContents.session.webRequest.onHeadersReceived(
    filter,
    (details, callback) => {
      details.responseHeaders['access-control-allow-origin'] = ['http://localhost:3000']
      details.responseHeaders['access-control-allow-credentials'] = 'true'
      callback({ responseHeaders: details.responseHeaders })
    }
  )

So above it sets the AccessControlAllowOrigin and the AllowCredentials of the response accordingly and it changes the origin and referer of the requests.

And when I go make requests on the react website I do it like this:

document.cookie = 'OmegaCookie=' + cookieVal + '; path=/; SameSite=None; Secure';
let response = await fetch('http://foreignwebsite.com', {credentials: 'include'});

But the cookie is not sent. Do you know what could be going wrong or how to handle it better in this situation?

How do you send a cookie to a cross origin request using react and maybe electron?

0 Answers