What is CORS?

greetings friends welcome to a shot of code today we're talking about Korres which is cross-origin resource sharing now this is a feature that actually relaxes the security of your website or API by default the same origin policy applies in browsers all the browser's so you can only call from your origin back to your web server so this you know that's in place to kind of MIT to help mitigate cross-site scripting attacks now there are cases where you want to relax this but you don't want to be able to let everybody in and that's where course helps us it can specify certain origins that are allowed to access the API so if you've got a subdomain or particular third-party websites you can let in just those rather than everyone and it does this by returning a course header in the response headers and the browser's is only the browser's that implement this by the way if you try and access an API from the command line there's no cause in place you can access it so it's just a browser security feature you know same-origin doesn't apply when you run fetch from a node app you can get you can get to the data right so let's do stop in and have a look at an example so I've got a couple of API sites here we're going to Star Wars one here and let me then just go back to the network here and clear that down so if I was gonna make a call here now so because I'm on the Star Wars site I'm on the same origin so I can call this API without any problems at all if we look at the network request our response we're getting a 200 response the response headers here don't specify they don't even need to specify any cause headers because the browser is gonna let you see this information anyway if we're on a different origin the browser would only let you see it if that cause header except it's called access control allow origins only of that is present and it's got your origin on it so gonna have on here Chuck Norris one we can make a call to Chuck Norris and if we look at that one it's very similar nothing required there so let's you know that's BAU but let's now create a site that's not from the origin of these sites and try and call into it then so if I open up code and we'll just create an index write you up and we'll put some boilerplate there or just create a script and we're gonna call fetch in here and we're gonna try and fetch I just made this a bit bigger I should be bigger on there as well and even this one will just make a bit bigger so let's have a look what call did I make here's a call I made from the website so let's try and call that there's gonna be a get so just need to specify that as it get and then we will get some JSON back so we'll turn our response into JSON and that will then give us the data and we're just going to console.log that out like so a little bit nicer okay so maybe a return JSON it doesn't like that because why don't you like that I don't even need to do return really approaches except that yeah there's an implicit return on that one that's fine okay let's open this up in live server and make it a bit bigger and if we open up the dev tools in here we can see what's being called so what we're getting back in this case if I just refresh it again we get back r2d2 so that is fine and if we look in the network we can see our call here I'll fetch call and we compared to when we were the first two that we did we're now seeing a different response header the access control allow origin so the Star Wars API website has basically per star so it's allowing anyone to access this API so it's cause implementation has added this in the response and our browser because it sees this is gonna let us see the data if that wasn't there then coming from this origin localhost 5500 we wouldn't be able to get at the data and well sure I'll show that in a second now as well let's quickly do the Chuck Norris one so Chuck Norris joke if we call that what do we see if i refresh this now you can see it's called random here this is our fetch call and again we've got this access control allow origin and it's got our actual origin in here it's also got another one related to cause here so there's this find is more control you can have over it this one specifies that our fetch call could have passed credentials if it wanted but we didn't say that one didn't matter okay so in both these cases anyone can use the API now you've opened it up to to allow anyone to use it we won't want to do that you will want to specify a particularly so let's have a look now at it failing so just gonna create a test directory here and then I'm gonna create a net API for us to use as the test so this will just scaffold out a very simple weather forecast API for us and if I open that up and I'm just going to I'm just going to build this and then run it so this is our demo API similar to the Chuck Norris one and the Star Wars one but it's got no cause implementation so I'm gonna grab this out and try and get on the left there so we've got two websites here we got the website that we were calling Chuck Norris with just here a minute ago and Star Wars so that's on a different origin and now we've got a new API our API here so I can get to the weather forecast in this view here because I'm on the same origin even though there's no cause being added it doesn't need cause it's on the same origin it's it's happy the browser's happy with that but what if I call this from our other website I'll put this call now in here and refresh here so you can see we're getting an error here now and if I go into the console we're getting this access to fetch the weather forecast from our origin has been blocked by the cause posi because it's not seeing this access control allow origin header the browser is saying no you can't look at this data I need I need this header in the response and then you can see it so we need to add this header in our API to allow the other origin you have probably just a sub-domain about our domain access to the API so let's try and add that in if I come into the startup here I've got a snippet that I can add here I Cho just got to go and find it so dotnet core cores should get us there and I can just grab this here so this enables cause in a dotnet core application and we need to specify a name for it so I'll just call it default and then we need to specify which origins because we're not open out for everyone we just want one and that origin is going to be our website here so it's going to be this thing here so I'm going to replace all of that with our origin there and I don't need the slash I need like that and I can also say just to be sure that this works allow any header just in case we're passing anything and allow any method as well that should be fine and tidy up okay and in here I just need to say app dot use cores like so and that should be good so let's stop that do a build and run that back up so let's have a look is it still working here yeah we're still able to get the forecast from the same origin now from our app will we still get this cause error or has access control allow origin this header now been added that still failed it still failed because I needed to specify in here that name so this maps to the policy so let's build and run and now it's already run it so we run it here you can see we're now getting back the weather information in JSON in here on our application and if I go to the network and look at the call you can see once again we've got access control allow origin so our new web api is now adding that in browser sees it and it says okay you can look at this so this we've got remember that this is just a browser thing is you know outside the browser anyone can access it same origin policy doesn't apply you don't need cause that in the browser causes what will allow you to specify who can use your API so when you've quite often you'll build a website maybe and have it on your domain and then you might have a subdomain for the API and then for your website to be able to call back is on a different origin so you're gonna have to add that cause policy in place to make sure it turns this header so there you go that sound that's cause hope that was interesting if you enjoyed it give me a thumbs up if you want to see more videos click on that subscribe button below and thanks very much for watching catch you next time bye you you

Channel: A shot of code

Views: 36,658

Keywords: CORS, security, SOP, cross origin

Id: UjozQOaGt1k

Length: 13min 22sec (802 seconds)

Published: Sun Feb 09 2020