Building Microservices with Go: 9 CORS (Cross-Origin Resource Sharing)

[Music] hey we're back how're you all doing I hope productive week whoa today what are we gonna do we're gonna look at cause oh look at that there and and what about I kind of show you is how we manage calls requests across cross-origin requests why is that a problem well let's kind of dig in and look and I'm really God all right let me back track all right so welcome now what I've just done today is I've just run the website there so I'm running the API server and I'm running the react Jas website so the react.js website is going to make some back-end calls to the API and it's doing that pretty pretty straightforward it's just well if we just look at the code there so we got react J s we are using this coffee list component if I look at the coffee list component it makes a call to our global API slash product and then it renders the products so the the global API is located at localhost 1990 now if I go in my browser here and type localhost 1990 products you can see that I can get by my API information it's about rendering fine but if you look at the react j/s website you'll see that the react j/s website is not showing any data now that could be my bugs in this instance it actually isn't so let's just inspect and then let's look at the console and what you can see here is that it says access to ax HTML request at localhost 1990 products from origin 3000 has been blocked by cause policy this is something you're gonna you're gonna see all the time very very common setup so why why is this blocked by cause so let's let's take a look so the reason is that that causes is specifically blocking that so the way that cause works is that it will lock requests to other origins from other than the one that's loaded now what is an origin what an origin is a fully qualified domain name it's a difference between the protocol HTTP and HTTPS and also something that's running on a different port so my react.js website is running on three thousand so the origin is localhost 3000 and when we we look I apologize this this doesn't zoom in particularly well but when we when we kind of look at the requests there in the browser you can see that request and you can see that the referrer there is localhost 3000 which is the original orange so website the sort of the API though is running at localhost 1990 now that's a different origin according to cause because it's got a different port so the browser is blocking the request now when you kind of just look at cause you just think this is the most irritating thing in the world like why would it possibly be doing this but you've got to appreciate why it's doing it so it's doing it to protect protect us so what causes is predominantly designed to do is to protect the the browser from sending things like making requests - well let's let's think in a scenario you logged into your your banking system so you log into your banking system your banking system writes a cookie to your browser to make API back-end requests but then you visit another page let's say you click on a link for a funny meme and as it turns out that is a malicious website now that malicious website makes a call to your banking API now the way that the browser works is that the browser will see the request made to Big Bang comm and it will say oh I've got some cookies for Big Bang calm I will send the cookies so it forwards the cookies to big back now big bank will just it's just gonna get that and it's gonna do whatever the browser says so that clickjacking website well I could make let's say make a transfer from your your bank account into my bank account because I need the money right and and I've done that just because I've directed you to a website and I've made a call to your API and I've just taken advantage of the way that the browser works that it's going to send the cookies so to avoid that situation you get this cause mechanism in play and what cause does is before the browser just forwards those cookies to do to your rare to your website so it to you to the API it does a check and it says hey what what origins are allowed to to speak to you as an API and of course big bank is responsible so it'll say well only front end big bank calm so the domain that you're clickjacking page if that's been loaded from evil calm then the cause request or the access control origin will be different so the browser will just reject the request so that's exactly what's happening here right so imagine that this coffee shop front-end web site as a has an occasion and login and I've got my back end here now imagine this is this is a malicious coffee site and it's it's not running it the correct location but I've I've set it up specifically to to click Jack you now if I on my malicious site make a call to the legitimate back-end then I'm gonna forward those cookies right but because of this axe HR and the cause it's blocking it because well in this instance product website is not returning any access control origin headers again we see that in here there's there's just no edit so how are we we going to fix this so what we can do is we can use the handler where we've been using the guerilla framework so we'll continue to use the guerilla framework and we can use the piece of middleware that gorilla has called caused and what that's going to do is that's going to allow us to configure a pre-flight request so let's see that that in operation so what I need to do so let's scroll down here and I'm going to add my my cause header right okay so the the cause header I'm just gonna use gorilla and that's in the the handlers package for for gorilla so gorilla cause and this is the signature here so let's implement that I'm going to just have to add the import because I've already got a package class I'm gonna call it go handlers so I add my import there and then I can create my my course handler so go handlers dot cause and that's gonna create me a handler pullouts eh nice and easy so what I can do is I can specify some of the the options here and one of the options is what are the the allowed origin so go handlers dot allowed origins so this takes a string so my allowed origins I'm going to specify it has to be fully qualified including the protocol HTTP slash localhost 3000 where my rat chasis website is running from and I can add that as an origin and then what I can do is I can just use that handler and I'm just going to wrap absolutely everything with this so just go in my server where I've got my my standard serve MUX let me just wrap my standard serve marks with my course handler and saying oh well yeah I mean I've been coding completely different language all day haven't I so let's try and do that with go shall we okay so JavaScript right okay so we're now running our server again so when we we go back over now to our react website you can see that we've now loaded our data so again let's look at the request in that xhr request and you can see that again I've made a call to product and I have a cat request and the request has included the sort of the origin there but the the responses time I'm getting this access control allow origin this header has been automatically populated by the guerilla cause handler and what that's done is it means that the xhr request is is allowed to to continue which which is kind of straightforward kind of nice now it's it's important for you to to implement this so why wouldn't you just use star right so I could just put star absolutely everywhere and let me just show you rather than having localhost in there I could just use star allow every origin and there are actually a number of cases when this is a valid request so you would you know you'd want to use star if you had like maybe a public API that that everybody can access and again that's that's kind of still still working there because I got that access control allowed star now what this won't allow you to do though is if you do have a valid requirement for the cookies so for example your back-end API has some authentication requirements you've got a cookie a JWT which is encoded into a secure cookie and you need that cookie in order to authenticate the API request when you when you kind of want to do that then what you've got to send through is you've kind of got to send through the the access control allow credentials and the browser once it's kind of got that information it will be looking at the the domain you know it you can't use a star in that you have to be very explicit on the domains that you allow I think kind of one thing right what I think what I want to really show you in this video and I'm and I was pleased it's it's turned out to be just a little bit of a shorter video is just how you can set this because this is a general real real pain for a lot of folks when they're getting instant of a micro-services development and they they start to sort of just play around and they're trying to get a front-end web service to talk to a back-end web service nine times out of ten you're running on different ports and you're you're running into access control problems and this is just a nice and easy way of bypassing that I'm gonna put in the links below a link to this really nice blog post from Bartos and he explains the kind of the whole process and why it's actually really important which i think is really really cool the the Mozilla web doc swill give you the kind of the full technical lowdown if you're gonna read one thing I would read autos medium post but ultimately the kind of the crux of the matter is when you've got a website which is running on a different domain or a different port or different protocol to a back-end service back-end service must set erect headers in order for this reaction it needs to be setting that access control allow origin header otherwise the data just won't load and you're gonna get that really really confusing it ain't working what's going on six months later you and that was it that was a real short video today I'm kind of hoping you enjoyed it I find it quite a confusing concept so I I do apologize if you you find this a little bit it's a bit of a pain outside but you know it's there now you know how it handled what we're going to do midweek is where we're nearly ready to wrap up restful api is I want to show you how to serve some files and some nice little tricks around doing that so how we can use things like gzip compression and all from again the standard library and then next week we're gonna be straight and G RPC services so rest is done in 2g RPC GOP see I'm pretty excited about I'm gonna teach you how to use basic sort of you know AJ RPC but also how you can use things like geo RPC bi-directional streaming let's create a cool little chat app or something like that but for now I thank you for watching and I'll see you next time [Music]

Channel: Nic Jackson

Views: 8,421

Keywords: go, microservices, JSON, RESTful, CORS, golang

Id: RlYoy_RiYPw

Length: 16min 50sec (1010 seconds)

Published: Sun Feb 16 2020