Simple Web HTTP Proxy with Plugins as Middleware - Node.js

hello everyone in this video we will learn how to build a simple web HTTP proxy the implementation is going to be in node.js but along with the proxy we will also learn how to perform actions on the intercepted request and modify it according to our needs well before that what exactly is a proxy this is just a double let's call it a gateway for any request that goes out by our computer to the external world and then the responses again pass very proxy which ends up at your computer simple right let's see what we are going to build now as I said it's a simple implementation in nodejs it will have the ability to block resources let's say images or CSS and again and another middleware would be to intercept and modify data source Kure let's have a look at the end results first so for the purpose of demonstration I have built a site called X proxy and as you can see I have their FEMA just loaded in there now let's try to route all the requests where the proxy refreshing and as you can see there are a few assets of jpg and PNG which could talk and even on the website you can see the alternative text to that image so basically this shows that somehow I was able to intercept the request and rocket let's have a look at another example now up and running which discretes you depending on the language that you specified so for the time being is just as two languages if you provide English in the post request you get the greetings as hello and if you provide Spanish you get it Isola let's try to do a post request to it so there I am doing a post request and I'm sending the language English there's no blocks in between for the time being and as you can see the language received at this over and goes English and thus the greetings was hello now let's say I have the proxy in between and and then this as well I am sending the languages English but let's see what happens I get the greetings as follow and here in the server side as well you can see the language received a Spanish so this shows that I was able to change the data being passed in the post requests as well in the proxy sounds cool right let's jump to the implementation now acquired to model sister de penas which we'll be using in this project and has just noted on these steps we will be following intercepting the request parsing the version of the request out of it this is something or the discussed later making the actual external requests and then sending the response back from the external requests of the claim so here I have set up a simple HTTP server which is listening one four four nine nine eight so let's do the initial thing voices passing so for that let's call it request to full further let's say where I will parsing the request which is to be made yeah so this will get the URL and parse it in different parts now you have to bring anything because that there will be making the externals on its color options object put it first get the say the method you can get it that we can get that from the client request object the headers which contains a matter it out they request me then meaning the hostname which we will get from the requester for check that we just created HD port just people and if the borders not specified let's say say that the default port of 80 which is used for communication and then if the yeah the parrot or let's say all the credit balance or attached to the actual request so that will be from request aful so we are sort of relativity or a producer and we are going to do something next let's make another function let's call it x EK would request pass the option of the time because kind response and let's start will be making using used to be the model itself if i say the options and I will get the response here in my car back now the one thing to note here is that just initiating the request doesn't ended we need to notify or exam request that the client requests made here has completed so they'll be creating event where I will capture the end event and if the client request has ended I will notify make sure request that yes the client has completed and if the client is sending some data let's say my post request and I'll have to forward it as it is yeah so now after getting the response here we need to send it to the light so for doing this first will I have to write the headers for the kind as to what exactly we received in the response I need this data scrolled and the headers but that doesn't hide it right we need to map the data so whatever we are receiving from the external source you have to map it to the client response similarly when the external response we will n declined requests as well that's it oops a mystic causing of Lisieux requests there ever will pass the options to climb that Cliff the grand response yeah everything seems good enough let's try running it you know proxy started on the phone a minute right now I haven't set it up in my proxy settings as you can see right here browser isn't it let's try reloading it you can see the image is getting loaded now let's save the proxy and as we have added logging there just take a load oh so we don't really add the love in there that's a key logging hazard Xfinity first let's call the hostname and port passed then let's run it again as you can see all the requests but actually captured over the first request I mean let's proxy side and then all the assets which were faced by their quest hooray now let's try a blocking specific assets so for that we will decide that here so let's create a folder of all as stunning [Music] Jack assets let's say which will be creating two functions here called image X's will be passing the path and it close it down a boolean value so I got it five matches let's say the image should be set out PNG jpg it's blob these two fish that shouldn't be now yeah yeah and now let's create a folder called murder there and the same structure for those we call it as without resources tall chairs okay in this not resources this will be receiving the let's say the options object and asset methods to check for Lexi so we will be going by each asset method and recording it but yeah so what the sum function will do is that will check whether either of the methods like if any one of the methods return true then the value or the boolean value of the statement will be true so here we're checking whether the path contains PNG or jpg or not so let's explore this [Applause] they will be required bottle let's say yes and then the next would be of resources from the middle so let's do something yeah so we will call the hello resources requesting past eruptions object and we'll pass the method which will check forward as it and if it returns true that means we're supposed to block the request and we will just empty time and interest here itself else we will proceed with the execution of the actual request here yes you can move it into a function as well yes so there you go let's try running it yeah as you can see the images codeblock only the PNG jpg the specific images of other extension and let's see in the dogs as well we can see that only a search which were blogged that is the PNG jpg PNG jpg now let's try something else let's try I'm talking but how about you try talking the CSS assets as well then let me know in the comments later so now let's move on to the second example that I showed where I will be able to manipulate they requested that I just mean so I have this server up and running which will just return the greeting depend on depending on the language selected so let's keep it aside let's try going away at once and as you can see I sent the language English and I go decree it into English now let's say I want to intercept the data here so why do you think they'll be doing this so this is the place the data being sent from the client request so let's do one thing that's a if condition here we'll just pass the data from it's the junkies and a buffer formats we have to convert it to string first and then faster than the Jason form because we are sending a jason here let's say English may be modified junkets and stringify that we are sending that's a language spanish but okay before that we'll have to change it into buffers form first yeah there you go so basically if the chunk contains language English we change it to them they in language Spanish let's try again and let's try running it Riley proxy now so this is the request and I'll add a proxy food and tell you though I got the ratings brat in Cola and there was this post request made on ratings which was allowed so here I was able to manipulate the request so that's it for the examples and implementations a github repository of in proxy where I've updated it with the latest code and also the procedure how to run it well I'm open for any sort of contributions feel free to open any peers and regarding the features well obviously this doesn't idea right you can add caching for the request which goes by your proxy or you can add any sort of authentication it doesn't end there so yeah enjoy learning Thanks

Channel: Rohan Chougule

Views: 4,287

Rating: 4.7922077 out of 5

Keywords: Node.js, Proxy, Middleware, Plugins, HTTP

Id: JkY0ANDx1dU

Length: 19min 51sec (1191 seconds)

Published: Sun Mar 22 2020