Global Middleware

[00:00:00]
>> Scott Moss: Let's just do some middleware then, so. Let's get into that. So let's go into our server. Jay asked me to pull up my notes over here, so I know what I'm doing.

[00:00:21]
Jay asked me to pull up my notes over here, so I know what I'm doing. Where is this? Oh, there we go, so much stuff here. OK, so let's go to our server JS.

[00:00:38]
OK, so let's go to our server JS. We're gonna add our global middleware here. It should already be installed, but actually I'm just gonna check the packs just to make sure and I'll Go over right now, so yeah. One in the middle where we're gonna use is called CORS.

[00:00:54]
One in the middle where we're gonna use is called CORS. Anybody here ever had a CORS error before? Yeah, I know what that is? Where you at, you're the server engineer now, so now you're about to implement course.

[00:01:15]
Where you at, you're the server engineer now, so now you're about to implement course. Yeah, you're about to be that person that causes that error for that engineer when they see Coors. That's what you're about to do right now. COR stands for Cross origin Research Resource sharing.

[00:01:35]
COR stands for Cross origin Research Resource sharing. It's something that only exists in browsers, and basically it protects you as a user for having some script that's running in your Browser or on a website, try to access another resource on another origin other than the origin that you're currently on. So if I'm on. ESPN.com or wherever I am and there's like a Chrome extension or Chrome is a little different, or there's like, let's say there's like a script on ESPN that they have and they're trying to like, I don't know, mine Bitcoin or something, they're trying to go hit this other URL.

[00:01:53]
ESPN.com or wherever I am and there's like a Chrome extension or Chrome is a little different, or there's like, let's say there's like a script on ESPN that they have and they're trying to like, I don't know, mine Bitcoin or something, they're trying to go hit this other URL. Well, Chrome will block that. If the people who created the server for that Bitcoin one. Said hey, I don't want anyone accessing this server whose origin is not these allowed origins.

[00:02:11]
Said hey, I don't want anyone accessing this server whose origin is not these allowed origins. Typically the origin of the app that we have. So if any request that comes in isn't for our Bitcoin site.com, don't allow the request to go in and Chrome has to respect that. They do that automatically.

[00:02:26]
They do that automatically. Typically what would happen is. Chrome would send out or any Browser, I keep saying Chrome, but I'm using Arc would send out a options request. I mentioned that a little sooner or a little earlier.

[00:02:40]
I mentioned that a little sooner or a little earlier. It's like, hey, there's another method it's called options. That's what the options request is or you will hear it referred to as a pre-flight check. The browserwill do a preflight check.

[00:02:55]
The browserwill do a preflight check. It's an options request, it sends it to the server and it's like hey. This person is trying to access this URL, here's their origin, here's the headers they're trying to use And then the server can choose to respond back with like, here are the allowed headers that we accept, here are the allowed origins that we accept, so if and then Chrome will determine if you're allowed to do that based on the rules of that server and based on your intent. If you are allowed to do that, Chrome will automatically then send your request.

[00:03:07]
If you are allowed to do that, Chrome will automatically then send your request. So sometimes when you send a request in a Browser, there's 2. There's an options request and then your request. But if Chrome determined based off that policy from that server, that Cres policy that you do not.

[00:03:25]
But if Chrome determined based off that policy from that server, that Cres policy that you do not. You don't pass, you don't you know, you don't fit that bill, you will get a Coors error on your console, saying like, oh, Coors error, you know, cross order research sharing can't do that, you can't use this. So, and there's nothing you can do, you can't do anything about that unless You're the one making the server, and you add the domain in which you're on, the origin of what you want to that allow list. You can also just not use the Browser.

[00:03:39]
You can also just not use the Browser. So if it's just like an API that you're trying to get access to with data, then just like make the call from the terminal or Postman or anything, because those things don't do course, it's only a browserthing. Only browsers do the options check for courses. It's a browserthing, given the fact that websites can run.

[00:03:53]
It's a browserthing, given the fact that websites can run. Malicious scripts outside of your control, it's a protection mechanism, whereas like if you're in your terminal. If somebody's writing scripts in your terminal, you got other problems, so you know, nobody's concerned about that, that's how you get away from that. So Coors is only a browserthing, So, yeah, so we will have courses to define our policy on who can access our API as far as like people in the browseris concerned, We will also use Helmet.

[00:04:11]
So Coors is only a browserthing, So, yeah, so we will have courses to define our policy on who can access our API as far as like people in the browseris concerned, We will also use Helmet. Helmets is a, it's like a grab bag of Security best practices for every server. To the point where I could even tell you all the things that it's doing, but it's essentially like setting the appropriate headers and things that will be needed to protect you from common attacks that you would typically be. You know, so typically you'd be vulnerable to, so like Helmet just does that for you, so it's like.

[00:04:27]
You know, so typically you'd be vulnerable to, so like Helmet just does that for you, so it's like. I just always add that and you can go look at the docs to see exactly what it does, but I'm not interested in security, so I just use it for everything. Morgan is a logger, not a logger, as in the fact that It's a logger that we can use on a code level like a console log, although in APIs you do want to do that, we won't be covering that here. Morgan is a request logger, so it will log every single request that you have coming in, which is a super useful, so we're gonna use.

[00:04:46]
Morgan is a request logger, so it will log every single request that you have coming in, which is a super useful, so we're gonna use. Although, so let's go do that. So if we Go to our server, we can import cores from Coors. Yeah import Morgan from Morgan.

[00:05:02]
Yeah import Morgan from Morgan. And Helmets from Helmets. These middleware were made so long ago, and they're still used every single day. Like These are all well over 10 years old and still to this day super popular So because these are global and I want all this stuff to be registered before anything runs, I'm gonna put them here.

[00:05:21]
Like These are all well over 10 years old and still to this day super popular So because these are global and I want all this stuff to be registered before anything runs, I'm gonna put them here. So I'm gonna do this, I'm gonna say app. Use Helmet. I'm gonna call it.

[00:05:49]
I'm gonna call it. Typically the convention that I see for middleware is to do a higher order function that way you can pass in options here. If there's ever any options you want to pass here. That's why these things are functions and that's why they're not like this.

[00:06:05]
That's why these things are functions and that's why they're not like this. Like, you look at our routes, our routes are like that. They're just, they themselves are the function in this case the router, but if we ever wanted to pass an options here, we would return a function that returns the router. Right, it's a higher order function, most.

[00:06:25]
Right, it's a higher order function, most. Most middleware and plug-ins and things like that are typically higher order functions for that reason so there's a potential to pass in options, right? And then the by calling this function you actually get the middleware itself This returns a function essentially Is that is that a higher order functions that a curry? I don't know.

[00:06:42]
I don't know. One of those things, highroid function. The Next thing we wanna do is, let's say chorus. You can just do this and be done.

[00:06:57]
You can just do this and be done. It's totally fine. This basically just says enable everything, enable everyone Ope open everything. I don't care, right?

[00:07:08]
I don't care, right? If you don't add a course policy by default, the browsers will block everything, so you typically have to have a course policy like the Chrome or any browserwon't assume that because you don't have a Chrome policy or course policy that you're OK with everything, they'll actually assume the opposite. They're like, oh, they don't have a C policy so you can't get access to it. So you, it's better to, even if you don't really care who's getting access to this for whatever reason it's still better to be like, you have to be explicit about it, otherwise they can't use it.

[00:07:28]
So you, it's better to, even if you don't really care who's getting access to this for whatever reason it's still better to be like, you have to be explicit about it, otherwise they can't use it. So, I'm gonna do that, If you wanted to configure this like I have in the docs you can do this thing called like origin It can take a bracket of domains that you can put here, just the localhost. I have it set up to do. Like the environment variables, like a cores origin, but we're on localhos.

[00:07:46]
Like the environment variables, like a cores origin, but we're on localhos. It doesn't matter, and we're never gonna use a client for this. The other ones are actually built into Express, so I'm gonna say app. Use Express.

[00:07:59]
Use Express. JSON, The reason I have to do this, if I don't do this one, what's gonna happen is, if you try to post JSON. Up to this server without this middleware or something like it. You will not be able to access it as an object on the request stop body inside of your handlers or your middleware.

[00:08:12]
You will not be able to access it as an object on the request stop body inside of your handlers or your middleware. You would just get like. The buffer implementation of it, the, you would get the raw binary, I believe it or at best you'd get just like a regular string that you might stringify. So this right here just ensures that when you get inside of your middleware and your handlers, you could do wreck out body and get access to the payload that was sent up on that request and that's gonna be an object.

[00:08:31]
So this right here just ensures that when you get inside of your middleware and your handlers, you could do wreck out body and get access to the payload that was sent up on that request and that's gonna be an object. Which is super helpful. We're also gonna do I use URL or Express. URL encoded.

[00:08:51]
URL encoded. I'll pass in an option here called extended. True. What URL Encodeed does, it, basically well, I guess it does exactly what it says here, but It's going to there, so a couple things, the query string.

[00:09:10]
What URL Encodeed does, it, basically well, I guess it does exactly what it says here, but It's going to there, so a couple things, the query string. When you set up a query an API that URL has to be encoded in such a way. And sometimes those characters get replaced, right, so. This URL encoded thing understands how the URL gets encoded and it interprets that with the The given content type that's in the header, like for instance, you might have a content type that's like application JSON or XML form or different things like that.

[00:09:28]
This URL encoded thing understands how the URL gets encoded and it interprets that with the The given content type that's in the header, like for instance, you might have a content type that's like application JSON or XML form or different things like that. So it basically will try to match whatever is in the query stream or whatever the content type that you have. Without this, I've run into problems with curry strings, so I just add this every single time. I guess the extended option allows you to choose between parsing the URL encoded data with the curry string Library when false.

[00:09:46]
I guess the extended option allows you to choose between parsing the URL encoded data with the curry string Library when false. Or the QS Library went true. I don't know the difference between those two libraries and why one is QS and one is Christian. It sounds like some classic no JS fighting over names, but I've always done extended true, so that's why I put it.

[00:10:07]
It sounds like some classic no JS fighting over names, but I've always done extended true, so that's why I put it. That is the reasoning behind it, because I've always done it and I couldn't tell you why I started doing it. Cool, and then for Morgan, let's do that. So we can say app.us.

[00:10:32]
So we can say app.us. Morgan, there's many different modes you can put here. I like to use Dv because it's colorful, but I'm gonna add an option here I'm gonna say I wanna skip logging in general when we are, is. We are Testing.

[00:10:52]
We are Testing. I make sure that I, you know, it's test, for me it's test, it might be. It's Test ENV for you or whatever you call your function that you had in env.ts. I want to I want to skip logging.

[00:11:07]
I want to I want to skip logging. I don't want to see all those damn logs and I'm Testing. It's annoying, right? We can test it out right now, so let's, the one that's easy to test is just the Morgan one, we can look, we can look at the logs so I'll do a health thing Do it do it a few times, send that again, do a couple of these, and there we go, that's Morgan logging.

[00:11:23]
We can test it out right now, so let's, the one that's easy to test is just the Morgan one, we can look, we can look at the logs so I'll do a health thing Do it do it a few times, send that again, do a couple of these, and there we go, that's Morgan logging. It'll tell you like, you know, how long this request took. You know, what the status code was, what the method was, what the route was, right, just to show you what something else if I do something like this, right, this should. Give me a 404 and then you can see I get a 404.

[00:11:38]
Give me a 404 and then you can see I get a 404. Also, if you haven't noticed. The console For a servers is the terminal for the logs, yeah, so I remember when I was first working on a server, I was like, open up the Chrome console like where are the logs at?

[00:11:47]
It's not in the Browser, it's in the Termo, so.