Bypassing CORS with Electron

Sometimes your Electron app needs to bypass CORS. The only reason I even used Electron in my recent RSS Reader application was to bypass CORS. You can follow this guide to implement it in your own project as well

Why bypass CORS?

Story time. So recently I was developing an RSS Reader application. Now the application was written purely in React and it was supposed to be deployed as a GitHub.io website where you could add the feeds you were interested in and read articles.

Now CORS is good and there are good reasons for it having been introduced but sometimes, technologies like CORS just get in the way.

My deployment could have happened in 2 ways

1. Asking the user to disable Browser based security, which would led to no one using my site (myself included)
2. Use Electron

While there are downsides to this option too, at least by sharing it with Electron, even yours truly will use his own app.

A bad but popular way to bypass CORS

Using webSecurity: false as a way to disable the feature in Electron.
Although it bypasses CORS, it also sort of opens a Pandora’s Box which is best avoided.

I initially used this approach during the development period, when I was less aware and far newer to the Electron framework after which I switched to the slightly more safer approach mentioned below

How to bypass CORS?

It is very simple to bypass CORS

Let us say you have a BrowserWindow by the name of win

In that case, all you have to do is copy paste the following code

Et viola

You now know how to use Electron to bypass CORS for your next application.

How does it work?

Image source: Victoria Lo and Nick Ramirez

Let us imagine we are using our regular Firefox or Chrome browser for this webapp. So the way the request would work is that we make a request from our domain to the domain of interest (let’s assume ESPNCricInfo). What first happens is that we make our request to ESPNCricInfo

ESPNCricInfo now processes our request and sends a reply to the browser

The browser then checks if our domain is listed in the Access-Control-Allow-Origin list. If it is not, as can be seen the response is blocked from access to us.

Wait a second. I know how to bypass CORS

What if we made ESPNCricInfo recognize our website?
Like that’s ever gonna happen (for me).

What if we just before the browser made a check for Access-Control-Allow-Origin, we changed it to make the browser feel that ESPNCricInfo said yes to us. Would that work?

Image source: Nick Ramirez

Yessss!
And as can be seen we use onHeadersReceived for this exact purpose. In this function, we replace the Access-Control-Allow-Origin header sent by ESPNCricInfo with our very own. Thus we have bypassed CORS

Bypassing CORS for Headers

1. Let’s say you wish to use your own headers
2. But the server has not yet said yes to those headers for CORS purposes
3. For example, ESPNCricInfo does not allow my testing field “hi”
4. But let’s say you know their CORS is wrong and wish to send the header anyways
5. So we need to fix Access-Control-Allow-Headers

And done!!

They use different cases Mr Bean

Instead of ‘Access-Control-Allow-Origin’, they use ‘access-control-allow-origin’.

Looking at you browsers. Why so accommodating?

Aah browsers. Why are they so accommodating?
There are ways to fix this of course.

1. Define our key of interest
2. Lower case it
3. Look at all lower cased keys till we find ours
4. Replace it
5. Terminate loop
6. If 3 was never true, insert a new key

The new CORS bypass

Do we need to customize Fetch for this?

No no no no

The best part is, no need to customize Fetch. No need to change a single line of the existing code.

The following code continues to work with Electron

TypeScript Compatibility

Yes indeed this code is indeed compatible in TypeScript

Credits

1. Jerold Wilson How do you handle CORS in an electron app? — Stack Overflow
   The answer here forms a base but is not correct for our use case which is to bypass CORS for all websites. Further, our code handles the error mentioned by serg06.
2. peade he for mentioning the need to support bypassing CORS Headers

How did you bypass CORS?

You can tell me either via comments or via LinkedIn in case you don’t have a Medium account