If you’ve ever run into issues with CORS (cross-origin resource sharing), just know that you are not alone! In today’s episode we ask, ‘What the CORS?!’ and delve into the mechanics of CORS, the purpose it serves, and how to keep from freaking out when you receive a baffling error message in your browser. Learn how CORS is engineered to protect multiple parties, including servers, functionality, and users. You’ll also get an overview of the various error messages you may encounter, the primary reason behind most of them, along with directions on how to solve them. If you’ve ever asked yourself whether CORS is really your friend, then make sure you tune in today!
Key Points From This Episode:
{{addCallout()}}
Transcript for Episode 268. What the CORS?!
[INTRODUCTION]
[0:00:00.5] DM: Hey everyone, I’m Debby Madden, founder and chair of Stride Consulting. I want to give a huge thanks to everyone who listens to The Rabbit Hole Podcast, you have made us what we are today. We are thrilled and humbled to share that we have been around for over five years, have had 250 unique episodes and over 400,000 downloads. So thank you so much, it means the world to us.
Also, I want to give a big shout out to Stride’s employees and clients, you make us who we are every single day. Thanks to you, we have helped some of the world’s most incredible, most well-known brands get real valuable complex software into the market, into the hands of their users, one day at a time.
If you or your team could use some help getting product to market, whether it be through custom software delivery, augmenting your existing team or things like improving efficiency through team or product assessments, we’re here to help. Go check us out on stridenyc.com.
[DISCUSSION]
[0:00:59.0] MN: Hello and welcome to The Rabbit Hole, the definitive developer’s podcast, living large in New York. I’m your host, Michael Nunez and today, we’ll be talking about CORS, what the CORS, why do I see this? We’re going to talk about what CORS is, is it really a friend and what to do when you run into it?
Here’s an example: You’re working on a full stack application or having to hit an API from the frontend when suddenly, you get hit with the flowing message. “Access to fetch at” and it’s usually the end point that you’re trying to hit, “from origin, URL for your frontend web app has been blocked by CORS policy.”
Normally, there’s a colon and then there's various messages that you may run into. Normally, I would look at this message and freak out. It’s red and it’s scary on Chrome and I used to scream all the time. “Oh my God, it’s another CORS issue, I got to figure out what’s happening” So here we are today, talking about CORS, it’s going down.
Let’s talk about what is CORS. CORS, the acronym for cross-origin resource sharing, is an HTTP header base mechanism that allows a server to indicate any origins, domain, scheme or port other than its own from which a browser should permit loading resources.
[0:02:20.4] So it’s pretty much a rule that exist in the header of a browser to make sure that A, you can retrieve information from that particular endpoint and whether it should return information or data back to you from your browser. It’s twofold and how CORS actually protects multiple parties, if you will.
One, it secures a server to ensure that only the correct domains are calling the endpoint and it secures the user when they visit a website by ensuring that those endpoints are reachable from the correct domain.
Note: Again, this is a browser implement mechanism and one wouldn’t run into a CORS issue when you use curl or postman. So often times in a project where I’m working in, I would see a CORS issue. If I’m working on a project where there’s a dedicated backend team, I would have to go to that particular backend Slack channel message and you know, use a here and bother everyone.
No, I definitely don’t do that. Do not use “Here” do not use “Channel” do not use “All” I think that’s one of them in Slack. Please don’t do that but I would drop a message and say, “Hey, I’m running into a CORS issue, are the CORS Permissions correct?” and if someone replies, “Oh, it works when I curled” you can say, “Well, it would work normally when you use curl or postman but it’s the browser that’s running into this issue and that’s why you cannot see information.”
[0:03:48.6] Is CORS really your friend? Let’s talk about that for a second. We’re going to talk about how CORS protect the server and functionality. I was fiddling with a particular application that I spun up using Create React app. I think in Slack, there’s these new alphabet emojis.
I forget what they’re called, I think they’re called – if you Google alphabet emoji Slack, you’ll see that there are these new emojis that is just the alphabet, some symbols I think there’s exclamation, @, hash and question mark that allows you to you know, say a message using emojis.
One of the things I like to do is, I wrote a script where you can just type in the letters and it converts it into the text that it expects for the slack emoji, copy it, and then paste it over to Slack and I can use that to welcome someone in, to give someone a congratulations and it’s like a really large word and it’s pretty cool.
So I have one of these functions that exist in a Lambda. I used AWS server list to kind of figure out how could I create an endpoint that if I pass in a body of text that I get the converted version from that? If I don’t set anything in the header and the response or I have a strict origin policy, I would normally run into this CORS issue.
[0:05:12.7] So 99% of the time, if you run into a CORS issue, you will, it’s because that the header is not like setup properly. Normally I would see the error, freak out, but now I know. Like, “Hey, I should check the backend to see whether the header actually exists in this particular function that I‘m trying to run or to hit to get information back.”
Which is great, because if I had this Lambda and I don’t want everyone to use it, I can make sure that it only comes from this one place, and that one place being, my website that I want to hit this Lambda. So if Bobby Crouton somewhere in the world, wants to use this Lambda and I actually set my origin to be an asterisk, which means anyone can use it, then Bobby Crouton can use it whenever he wants.
If I, suppose Lambda wasn’t as cheap as it is and it cost 10 cents to run each function, I might want to be a little bit more strict, right? Because then like, this converter application that I have, I can charge people 25 cents for every use so that I get 10 and then there’s 15 cent spread and money, right?
So that’s probably one of the many ways you would want to secure your backend application in your APIs and just note that you should have other security in place for your application but this is like, the one that you would run into when you use a browser, so just be mindful of that.
[0:06:37.5] We’re going to talk about how it protects the user. Suppose you’re – I think the example I had, it’s pretty bad but I’m going to use it anyway. I think like, if you have an account, let’s say you go to a website and you go to yobobby.com, don’t go there or go there, whatever, I promise, there’s no fishy Lambda functions that are happening there.
But you go to yobobby.com and suppose your bank, let’s call that Bobby Bank, does not have their core API set up or it has it in a way that it can be retrieved from anyone. They’re letting anybody access the data. It’s the wild, wild west baby, we got to do something about it or we can’t.
If you were to visit yobobby.com and I have a JavaScript call that can call Bobby Bank to retrieved information based on information on your computer, I can then send that information to another Lambda that exists on yobobby.com.
So the idea is to make sure if Bobby Bank had the CORS option header to make sure that I only can retrieve things from Bobby Banks domain, then you wouldn’t get that information in the first place. I think that’s definitely one of the security implementations that exists on your browser. I think this was a concern back in, you know, in the early days of the Internet.
Now, we can just pick resources from wherever we want, right? A lot of people use APIs that different APIs that exists on the planet, you know, from New York Times to whether app and stuff like that. So we’re going to have these cross-origin applications that exists.
[0:08:04.5]: So just be mindful when you are creating an API to ensure that you have a proper CORS set up and I can dive into some of the errors that I have seen to help you in the future when you do see this error, so you don’t have to freak out like I did. So before we dive into all the CORS errors, I’m going to talk about the preflight request and what is a preflight request?
According to Mozzilla.org It is an options request to see if the CORS protocol is understood and a server is aware you’re using specific methods and headers. The preflight request is automatically issued by a browser and in normal cases, front end developers don’t need to craft such a request themselves.
It appears when a request is qualified as to be preflighted and omitted for simple request. For example, a client might be asking the server if it would allow it to delete request before it’s sending the delete request by using a preflight request, using three HTTP headers that is access control request method, access control request headers and then the origin header.
So normally, you wouldn’t run in or have to create or craft a preflight request. The idea of it is that you don’t want to send resources to an API if you don’t know if you’re able to do that. So sometimes a preflight request is automatically injected from your browser and part of the reason why I bring it up is because when I was using the API gateway, I ran into a preflight request error and I am going to go over some of the errors that you may see if you run into any CORS issue.
[0:09:36.8] All right, we’re going to talk about the different errors that I was able to produce in the small app that I created and one of the various errors and what do they mean. Just so you know, a lot of them or maybe all of them if I recall, start with the following phrase, access to fetch at and then it’s the end point you’re trying to hit from origin, which is your page, has been blocked by the CORS policy.
So just know that. I am not going to repeat that every time. So after the colon, let’s start with the first one, no access control allow origin header is present on the requested resource. If an opaque response serves your needs, the request mode to no CORS to fetch the resource with CORS disable. This means that there’s no CORS in your header in the reply of your server code and you need to add the access control allow origin to your header. You can add a strict URL end point or an asterisk so that anyone can hit the end point.
The next error is response to preflight request doesn’t pass access control check. It does not have HTTP okay status. How does one address this? You will need to create a new option’s API endpoint that has the response header to include the access control request method, which is the methods that you expect people to hit, which will be in the example above, options and delete access control request header, which is the content type that you want to return.
I believe it’s the origin header, which is the name of the website that you expect to hit this end point. So just be mindful of that. Again, you may not need to do this if you’re not working on the AWS stack. Again, I use the serverless framework to kind of spin up the application that I was using, which in turn, there are some specific CORS options you can use to kind of bypass this preflight request.
[0:11:28.4] Then there’s the access control allow origin header contains the invalid value and the URL and the header response would exist here. Have the server send the header with the valid value or if an opaque response serves your needs, set the request mode to no CORS to fetch the resource with CORS disable.
This error just means that you may have input the wrong URL for the origin to respond to and to fix that, you can either again put a star or you can just update the URL to ensure that you have that and I mean, there’s one more thing like a caveat to know, it is very possible to bypass CORS by creating a proxy that you would hit that will then fetch that information and then the proxy will then return that information to your application.
But please, don’t do that in production. It’s very, very dangerous. The proxy could be high jacked and you know, you don’t want to let anyone just snoop into information that you want to be kept secret if you will. I hope that if you run into a CORS issue, you can kind of understand what’s happening and how to get out of it because I personally hate them all the time and I’m glad that I was able to run, spin up the server, this application fairly quickly to kind of understand the concepts.
But yes, CORS is your friend. As much as we hate it and run into it when we’re developing front end applications, it’s there to save you. It is there to protect you. So be nice to the CORS.
[END OF DISCUSSION]
[0:13:02.3] MN: Follow us now on Twitter @radiofreerabbit so we can keep the conversation going. Like what you hear? Give us a five star review and help developers just like you find their way into The Rabbit Hole and never miss an episode, subscribe now however you listen to your favorite podcast. On behalf of our producer extraordinaire, William Jeffries and my amazing co-host, Dave Anderson and me, your host, Michael Nunez, thanks for listening to The Rabbit Hole.
[END]
Links and Resources:
