Hardening Express App

hello everybody in this video we're going to continue working with our node gsr and this is actually a i will say a fall 2021st video but i'm using exactly the same code that we have for the previous one where we created the node.js app itself in the basic server what i want to do now is is to make a little more robust a little more production ready and have a little bit of best practices up there and what i want to do later in the third video we're going to do the to-do app through an api so we'll be able to save to do and read create and pull the to do depending the status and change the style so that would be the idea but in this video the first thing i want to do is just want to make this a little bit more robust in order to cover a better understanding of a better way to handle the information so let's get started the first thing that we need to do is we need to get rid of everything that is regarding hardcoded code they're like secret like force number things like that so what i want to do is i want to implement it one of the first things that we need to do is implement dot emp dot dmv is a way to actually open the packet manager the server dependency module allows environment variables so we pretty much install it we execute the config and we have an emb file as you know that we did it in the bgs application where we saved the different variables and then we can use it through the process emb so after we use that we should be able to to get it so let's let's see what we can actually do so right now let me just import npm install dot emb right and instead of actually having here what i want to do is in my source directory i will create new folders called utils and menu tools i will create one called configurations so let's do a new file called config.javascript and in there we just need to do a simple import that's risk everything as dot emb rom dot emb and then we just do dot enb dot config that means that we use initialization and we just go export default networks for const config unless [Music] that's actually the default default dot emb that we allowed us to to have or or variable actually we don't need to export it right now and we just need to do this one and i believe the dmv is not smart enough to do it like this so they will allow us just to use it and import in our main application that will help us let's create a new file at dot emb is get guided by the phone let's put it here we need to have a couple of let's declare no environment for the development by default node.js works differently in development and in production so development will have access to another type of tools to true issue in the back so we're saying that we are working on development environment when we're going to push it to production we're going to change that to actually be um to be production and the build pack should be smaller because the environment changes and let's actually do the port number and let's do this one equal to 3000 right having that in place we can get rid of this port and we can do process.emb dot port and we do npm run that we should be able to get it you can open insomnia or any other sap clients what i did here extra if i look for tundra client and i install it it's printing it because it's actually it's like a little insomnia inside view and view vs code so i don't need to do anything so i create a new request that's request going to be to localhost or 3000 and i said it and we have an issue connection refused by the server oh yes of course and and something that i want to mention also so let me stop my server so the issue that we have is we created the dot emv still but we actually not using it anywhere so in order to use it in our main java index js in the very beginning we will need to execute that with a simple utils config right so import that into npm from development that will allow us to make code or 3000 and we have response with the hello there so that's the pretty much the first step after we have that first step what i want to do now is i want to oops sorry for that what i want to do is go a little more and complex configuration and don't worry this is going to be one time and after we have that we can actually um what can i say you can just copy and paste it later so one of the issue that we can see through this process is when your emb is not set up correctly let's say for example this one the part is not there right should be greater than zero we can have the kind of error in this case it works right but what happened when we have something like this like the port is not defined as you can see we don't have an error but when we try to use the app the usb connections refuse like it's not working correctly that is happening because we don't have a validation in or [Music] what can i say it doesn't have a validation in or configuration itself so one way to do it um well one way to handle it and in order to make a little bit a little bit better i will say is to add that configuration that validation there are several packers that do this and there are over the npm but one of i saw i don't remember where but i was reading an approach and that actually liked it and i want to implement it so i'm going to install joy let's remember oops enjoy npm install joy this is for validation remember that we use it in vue.js and we can actually use it here too and in configuration we just need to import joy from joy right after we have that we can actually create a scheme and can do cons or environment schema and actually already try to ask him to do it as a joy object and we can do the to start is going to be an object right let the emp schema let's call it so by default it's going to be an object and then we can say we need to have the different keys let's actually close us like this that object will have different different keys and we need to validate each one of those keys in order to get it so we have something like this for example we need to have the node emp right need to be development or production let's remove tests i don't want to have test for default and the file is going to be development that means we don't define it we're going to put us a development by default right away right it's going to be a string and these are the only two possible options if we put anything else it should not be there right through more than enough and the other one that we can actually do and it actually give us right there is the port right the port need to be a number um is default is going to be three three thousand but it can actually do the poorly to deposit it and all these elements actually came from joy you look for the joy documentation you can see the different type of validation that you can have so here we just create another schema and later when we use we need to have more we just need to add it there right we close it right and we have our emp schema working the way it's supposed to the only things that we'll add is added the unknown and this will just allow to add like extra elements that will be defined if we needed later right so this is just to create this schema itself for validation now what we need to do is we need to validate or process emp that came from dot emp through this schema so we're going to pour emp schema dot validate or process emb right as simple as that but let's zoom let's say let's extract some elements from here so before we actually value that i will say that i would prefer and this came on the documentation too that my error handling of my errors element errors is going to be in my label with the key element of the label right don't worry if i say before this is going to be used once in order to have it and it's i know it's a little complex but it's just javascript itself and we're just using joy to validate the process cmb so we have the amd schema then we emp schema we just validate the processing b and we need to extract from here and that's the good part we will need to extract the value and we call this enb let's call it emb and the error right but you need to extract it the value and we call the value in b and the error and we can say a simple validation it will have an error we just throw a new error and let's actually throw new error and we can continue that config validation error error message is not working the way it's supposed to right it's a simple error by itself and we can do export default or enb variables right so having this we have a little better um understanding now about what it needs to be done so if i run this again npm run that we have an issue with a prefers is not a function why is oh this actually pressed in plural let me roll in again no the media one development or production right now what we have is the i have a typo so as you can see right there is already working so if i change this to development the nomad and i restart my application now my application is working right i'm able to use it now like it was able to consume those variables itself as you can see i don't have the port but because in my compression you have a default that's actually works another way just for that validation is instead of having the default value we can just change this to require and it's going to require and that will allow me to have my port is required in my configuration and it's not where it's supposed to be right so that mean that i just need to put my port equal retarter restart my app and now my configuration to work the way that is supposed to now one last thing i can use it and it's working the way they're supposed to right i can still use my package to process.emb and should be more than enough or i can use it [Music] a little bit different i can use import emp from my utils and then just because of that i can use nb dot and i have my um not actually have my port either i don't know it's actually not showing it i can do something like this and it's going to work too right because i'm exporting the emp variants now i can use the export like this or i can use export something like this to be a little more we'll have a duplication a little bit but i can do something like node e and b is going to be my mb.emb and my port will be my enb port right if i do something like this i'm exporting this value in this form this is not valid anymore and i have an issue here [Music] we can actually change this that's okay so we can actually do enb dot port or we can actually just get my port or i can actually do import everything as config right and i can use my config.port and that should be working the way they're supposed to um [Music] this actually requests prefer the requests oh because i'm importing my configuration i can actually do my port is going to be extracted from there right this is what i'm doing from my configuration and now my port is going to be used in my app it's supposed to be users on the app let me do what i did growing here let's do application listing in my config.port it's not there so i have me my email being this actually should work what is not working put it something like that that's not working oh wait wait wait sorry i'm sorry i'm truly shooting right now and probably this one need to change there you go yeah i mean because i imported the default i don't need to have the star i sometimes forget that sorry for that but now i can actually import my configuration and i can use my configuration port in order to pull up that data and actually lose usually different elements and it can be done [Music] so that's one that is actually really really cool another one that we can actually use and let's actually create this and pat it config right the other one that should be really really useful is to change the logger right in order to print information here in a better way um one of the best ones that we can use actually we can use two different is one to will lock every express call and something and anything that we can actually send the way that we want to send so for that and i will show you we need to import install morgan and one really simple to use and let me just show you a little bit what it is npm program more morgan what it does is a request logger mirrorwear that we just imported and then we just use it and it actually doesn't show here how to use it but we just need to send every request from um from express to use that particular logger itself it's really simple to use so master we install it i will go to my utils i will create a new one called logger.javascript and and as well import logger from actually import morgan from organ right and we can use cons and logger equal morgan development and we'll do export default logger right simple like that this is what we allowed us to do in the index is we need just to import logger from our utils logger and in our application before every call we can actually do replication we'll use and this is actually called a middleware and we're going to use the logger that we use imported that we allowed us to do npm run that and the pretty cool about this logger is that every time that we make a request that request is going to be handled there will tell you where we call it the method where it was called and response status and the size of the request and how long it took to make it so this is a really simple way to track when it's receiving a call the correct way that it's supposed to be so that's pretty much morgan that's what morgan does for us and it helped us in that in that particular piece now the only thing with morgan is we cannot send custom um what can i say how can i call this um let's call this logger middleware let's export that let's call this middleware probably i'll export it like this and if we sport it like that that mean that this is going to be lower dot middleware there you go tested yes it's still working the only thing problem with morgan is that we want to send something custom that is normal request we are now able to do it through there so we're going to use another one that's really really simple and that one is called console let's use npm fbm install console and we just need to import it import controller from console right and we just need to export middleware and we need to export console about how we can actually call um let's actually do cons lock console probably unless export the lock yeah that should be more than enough what will help with that that mean that instead of using something like we want to verify something you can do console download doing call right it was something like that it's not best practice it gets exported where it's supposed to be but it's not best practice to use the console log itself so in this case i will just like to use the logger log dot info for example and that will allow us oops let me go here to have a different call [Music] oh i said ingo instead of info in there we go so we have the little info called over there and we're spraying it is that we can actually change that to success for example that will give the little check mark that everything could find when we have an issue we can change this to one right and that will allow us to have that little one with that space so we can actually see it in the logs right away or we can actually do an error and the error will be a little more cut something like that like really easy to pump up because something went bad right so in this case and as you can see over here let me just get back to here this will change to success right and doing calling root let's call it later right this will allow us to do um some changes in our configuration right as you can see we we can draw a new error and we can actually use we can actually perform here import logger from the logger itself and we can do logger.log.error and i'm actually going to send my error message right let me try to remove this let me try to get rid of my port and restore my app and we can actually see that we have an error there that my port was required and it's simpler to see what was the issue right away we can use something like that and actually let's throw the error too so right away we'll see what was the issue or we can actually sell through the error we can do console.log error and what else we can use um npm console let me look for that one i believe we can print the stack trace or something like that oh we send the error inside right so we can actually send the error through here so we can have the stack trace a little more easy to read so instead of doing throwing it over here we just call all this new error message right here right and that will allow us to have instead of having all these elements that probably is a little bit different to understand a little more easy to see through here control valid error port is required right the port was not there and you can see the stack trade will actually happen right and it happened in my utils configuration line 21st when i actually did get trigger so i can actually do the stack trace and do everything that is supposed to be right but let me return my port and let's get back to that so we have two different elements that are working the way it's supposed to be the logger and the configuration by itself and it's actually really cool configuration what we did so let me just add everything and edit the logger remember that what we're doing right now we just making our application production ready that's it nothing else so i was mentioning before that the use of middlewares right mirror words are elements that will be like like all the requests will pass through that when i actually use the use element and it will do it in a specific and how can i say it order right so there are several middlewares that we can use that will help us in the replication and the logger is one of the main ones so we actually have the lower one right there and we can do something called let's do this one for example comment helmet what it does is an express middleware that will add some um security headers right it's not it doesn't mean that our application is going to be secure right away just to use it just apply best practices through the header like content security policy dns prefetch control expect ct framework that will add network stuff to draw calls the way to use it is we just need to install it import it and use it exactly the same that we use for the for the rest right and then we close this and let me show you what i'm talking about so whenever we make a call right we go to the headers we can see different elements over here for example we can see the power by by the follower applications tell us who who is making the request right and this is um how can i say it this could alert possible attackers used to know what type of servers do we have so they will say okay they're using express let me look for expensive number ability and let me try to exploit that so what best practice is actually to hide these headers and other ones that we could have over here [Music] and we can disable it manually but helmet is a really good starting point to do that so we just need to install helmet right let me do if we have brought that again and for that it doesn't make sense to create a different file that uses right here let's do import helmet from helmet right and we can actually use applications use helmet that's it with that call we can actually make another one remember we have six elements in the header by default and when we send it now we have 15. in those 15 we have for example frame option same origin expected a 0 no sniffing like arrow x protection this basic information and the x power by is not there anymore okay so you just given some more security standard baseline headed by itself and you use working wrap so it's better to to hide it like that another meeting word that is really famous that we can actually use is called course course is to prevent the cross origin that means that not everybody could actually handle um or no everybody no every application can use or or api so to call we can actually specify the region and say you know what the api came for this particular place proceed right that's pretty much what we do in there so in order to make it to work and we can actually send something like this is let's just install it npm install course for that one i will say we need to call origin and let's make my origin will be in this case my localhost oops 8080 because my view gs app will be in this particular case so i will use my origin like that and um because i'm adding a new element i can use over here as my port i will do origin origin will be a joy dot url what should be a string require but actually i can use url let me just verify that is no url the element should be your eye i believe let me look um let's see the types or strings there's one called we don't have url but we have uri and you arrive what it does valid in uri itself we can add different schemas a subject or jit http https okay so we can see the standard i don't know if we have time for that but yeah we just follow it a traditional url and we can have the schema to be um different i can do [Music] yeah so let's actually this one to be string dot uri require right and we can actually export it origin going to be my env origin right so having that i can do npm run that is working fine if my url is not valid something like this for example let's see oh that's a valid one let's try that one yeah origin must be a valid uri so localhost i believe that one is a valid reality it's not port 8080 let's save it that one is a valid one so we can use like that or we can use http and that one is a valid one too so with that we able to have validation to your uri so now that we have the uri we can actually import that course already let me go to my index and we just need to import course from course and we can use application use course and and it was the origin is going to configure that already and that's it that will allow me to use my origin implementing my configuration is the only application web application something really important that http requests to a client to start validation like an http application by itself but in the other case will be only the app that we actually mentioned that should be working in that okay so let me add everything that added course for application now it's getting bigger you get a little more boost more i will say production ready that's um the the way that it's supposed to be right now um something extras that i want to add is what should be the next thing imported express we have the logger course um helmet yeah let's do our handling right let's actually use the not found so right now here when something doesn't exist we have this error i don't want it to have that type type of response i want to have a barrel response that should be implemented for that less creating neural tills or a better error handling so let's go to reduce tills new files and we call this errors the javascript and the first thing i need to do i need to import my logger from the logger right and [Music] i need now so far we have been using already constructed middleware we are going to use our new one right and that new url should be really really simple and let's zoom [Music] so we need to call it we need to create um an error handler and let's actually do two we need to have our error 100 that is going to be generic and then we need to create a new one and that should be just the 404 so my network handler will get the error element right the request the response and the next element what it mean is we set an error it will go right away over here but it was under request or response we can proceed and next should be just whenever we need to proceed to go to the particular status right so for this we have our handler and we can actually i don't need to have that one that you can see there so i need to verify my status code if i have an error and my status code is 200 i need to change that to a server error so i need to do cons code room to equal i need to check my response if it's 200 i need to change it to 500 at that mean server error it's not 200 i proceed with the same one what happens from errors when you have a really gracefully handling you have clever response without data for example but we are not telling the user that something went wrong in there in this case we're just making sure that your status code is going to be error handling when you just try to respond normally right so we do that and then we can actually do our logger dot log dot error and [Music] let's send a message for the message will be for error message and our stack trace will be our error stack right so we're just making this error to be available in the console remember the logger goes to the console itself and he's complaining wait is complaining oh there you go so this is just to make sure that it's going to be printed in the console or on the logs for the application itself but not send it to the client yet right so what we need to do is we i need to make sure that my status code is going to be the stylus that i already handle over here my message will be my error message and my stack will be my errors tag right and instead of error actually call this error probably should be a little bit better and let's do something like this there and i can do export default error handler right you can do something like that is complaining that next one is declaring the use we can keep a layer but this is actually the order so we have element that we are not going to be used uh good practice is to have like a underscore but we cannot remove it because it's in a particular order in this case i believe the next can be removed but let's just keep it the way it's supposed to be so this is going to be my error handler but now let's actually do the one for the can um say they're not found unless actually i have right here so they're not found is going to be another mirror so i have two mirrors the node phone will use the arrow handler i'm saying i have a request response and next so the not found will be exactly an error i will draw a new error right and actually the way that we should be able to do it we can actually change this a little bit uh how we call the error on the configuration new error we use the name with the error message yeah so let's call this new error now let's call the error dot message just to have that arrow right there and the not found should be exported too yeah beautiful so here we know that this will throw a stack and my logger will handle the stack that is supposed to be but for the user we just send the status code and the message on the stack itself this will cache everything that is ended and it will catch us as a 404 by default and we'll provide then an error that error is going to go and use this particular handler next that means they go to the next middleware this is going to be the next middleware but this one has also used next that means that the request will stop right here we can have this one like that we send the status and then the json response or we can actually use response that one and then response json both methods are valid whatever is easier for you well i like to pipe it up so probably gonna separate this a little bit to readability yeah i like software handler so that means we should be able now to go to a main order or index and we should be able to import the errors from [Music] for our application itself so let's zoom import and error from utilers um after we have and then those servers should be pretty much at the end of the application so before we actually use the app it does actually with the listing element to application.use i will use my errors dot not found first and then my application.use my error.error handler right that mean that will cut the way that it works with the middleware this is actually a middleware to a specific path right so the way is going to go through this order and when nothing gets fulfilled it will send the right way to my knot sound really similar while we did with video to catch evert at the end and the other handed whenever we draw a new error or we do a next error it go right away to the last element and this should be always the last element in our app so with that if i make a call to here it's working fine but it's on something that doesn't exist like x and ascended we have get x we have an issue right and we have the error the way it's supposed to not found define it etc etc right um i didn't use the logger the way that i was thinking that was using it so probably [Music] probably can do something like this so it respond the status code but it didn't respond with this error here the way there is supposed to be at the error so let me verify my status code is 404 so that works if you send me this it should not be sending this so something i'm doing wrong here let me check what are actually doing wrong that are not supposed to be like this [Music] and this one is not working either it actually sends me html by default and it's supposed to be sending me json file so that mean is not getting my mini work the way that it's supposed to be so let me verify that okay i found my issue remember that next was not being used and we remove it right so that was not allowing to the next element to work properly so this was the one sending the error and not it was not sending it properly so now i can actually send it i can see my message not found with my path my stack trace complete over here and a nice stack trace on my load over here right and it's actually responding file the way that it's supposed to the last um last thing that i would like to do is in my error handler i want to use i want to see my my note emv because what is happening whenever we send the error stack to the user that's a security vulnerability and that should happen only in development that means that we need to verify that we are on production so the way to do it and the fastest way will be through the process dot enb dot node dot emb right we know it like that and we can send something like that um probably not that one i don't know why you gave me the pancake i don't like the pumpkin let's do the poop emoji there you go so what i'm saying is the stack will be a probe when i'm in production or the error stack where i'm known production that mean on development this mean if i make a call i get everything but if i change this to production right and then restart the server in order to pull up the embed and i make the call again i don't send this error stack anymore because it just got protected but as you can see it still show up in my logger on the server side so we are not sending to the user the error but we are sending the problem to the application itself right so let's just get rid of this production let's get it back to development let's start the server because we're in development right now and we need to see that error stack and the one last thing that we need to do is or eslin wanted we have the claret no to have that so in order to quick fix is to probably we can prefix it does that work now a quick fix should be disable the no use bar for this line so with that we'll get rid of that error and the application is working how it's supposed to be right we have the arrow there and we have the hello there in the root pad right so i believe we have the hardening pretty much done let's add error handler at it right and the last one that i want to do what i want to change here and i believe we have pretty much almost everything is to handle the root of the router a little bit better right we should not get the route in the remain in the gs is not the best practice so the best practice is to have routes saved in a different file and that one is going to be can i say that one it should be the one that is going to be created or generated right so for now we're just going to get rid of this and put it in a file that can be duplicated the way it is supposed to be right so we want to create a new folder inside source called routes and in the routes we're going to create a new file called index.javascript that will be the entry point that will get all the routes imported and we're going to get one called new file the different route so this is going to be the root i mean the principal one that we're going to be using so in order to create that in order to enable it in a route and this is premo the forward slash what we need to do we need to import something from express right and from that express we actually need to import all router in order to create a specific router route the way there is supposed to be we need to import or longer too for more longer and available right there i don't know where it's at we need to get all level back and then retails logger there you go and we and we initialize a router be a new router instance right now that we initially say that router instance here um we just importing this we can actually go back to or index javascript we can get everything from that the root and put it right here the only difference that instead of doing our application will be our router and the reason that we import to the logger is because we're using the logo right here that's why and we need to export export default router itself so this is how we can and what is the work that i i want to say separate the logic and keep as a specific file we just with the route itself that need to be created now the idea here is we have several files for example we could have the api endpoint and go on and go on and all those endpoints at the end and we made i will actually create that in the next video it's going to get imported in our routes index or route index will be the one that will wrap all everything in the route and export them directly so here we just need to repeat the router from express right and we need to import root or root route from here right there [Music] and of course we need to select the router and the same way that we use it for the app we do to route need to use the root one and that's it now we can actually specify what's going to be the flat and we say it's going to be for the main paddle for the api path or whatever we wanted but if we don't specify anything it's going to go right there and we just need to export our router itself so later when we have the api endpoint we have import api from i know this doesn't exist now but from api for example and then we can actually use something like [Music] i forget how to clone it i don't remember anymore okay turn router.juice api in the api endpoint use apis and go and go we actually create the different and router elements for the different endpoints and we can separate those endpoint different routes in different files so we have a better um and i forget the name uh scaffolding of the application itself right but right now we don't have the api yet so we're just using the route the root route right and that means that we need to import that one here as a middleware and the way to use it i will say after all the tools i will do import router from route and because we have an index javascript we will actually pull up that one right away and before our error handling will say our application need to use all router and actually remove the imported object extract there you go and that's it that means that our main index javascript should not change anymore and the rest of the logic should happen in the different areas so you just make a call just to verify it is working will still become able to pull that and we should be able to pull the error stack right so yeah our application is working the way it's supposed to and we're able to scaffold a little bit better what it's supposed to be right i will stop the video now i believe this should be more than enough to have a real world let me edit the router and in the next video we actually we're going to be doing user do applications or to do api handler through node.js so i hope that you liked it any question or any doubt don't hesitate to reach me happy coding everybody

Channel: Learning with Rodo

Views: 43

Keywords:

Id: 8RaZ8AEPXGE

Length: 66min 4sec (3964 seconds)

Published: Fri Nov 12 2021