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
- Asking the user to disable Browser based security, which would led to no one using my site (myself included)
- 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?
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?
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
- Let’s say you wish to use your own headers
- But the server has not yet said yes to those headers for CORS purposes
- For example, ESPNCricInfo does not allow my testing field “hi”
- But let’s say you know their CORS is wrong and wish to send the header anyways
- 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’.
Aah browsers. Why are they so accommodating?
There are ways to fix this of course.
- Define our key of interest
- Lower case it
- Look at all lower cased keys till we find ours
- Replace it
- Terminate loop
- 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
- 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. - 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
