Expose Local WebSocket, HTTP and HTTPS WebServers to the Public Internet with Ngrok

what is going on guys my name is Hussein and in this video I want to show you how can you expose your local web server your local WebSocket server your local chat application your local TCP server your local tea HTTP server to the public internet so you can get a publicly available URL into the internet and send it to anybody and they can access your local resources and then we talked about how this is done this is the concept of reverse tunneling or idea of SSH tunneling check out these videos if you want to learn the tech behind it but today I'm gonna use this service called them in rock I think I pronounced it right that allows you to do that and I'm gonna talk about the pros and cons about this technology because it's not perfect but it does the job so how about we jump into it so guys you're gonna start seeing some chapters here on YouTube where you can jump into the interesting part of the video I'm gonna show how can we do expose HTTP traffic using grok I'm gonna use the same thing with with HTTP traffic which is there's a little bit of a question mark there we're gonna talk about that I'm gonna show you how you can expose your WebSocket application which is a pure TCP I'm gonna use pure TCP to forward that traffic and finally I'm gonna show you how to do the HTTP pure HTTPS as TLS pass through right so how I would jump into it guys so let's see I have I think a application here let's go to JavaScript JavaScript playground I think I have a static page yep I'm gonna just want a nice server here on port 8080 right so I'm using HTTP - server you can just literally do MPM p.m. installed - gee HTTP - server when you have a web server like right there so now I have a very nice web server it's running locally obviously so nobody can technically access it except me so if I do localhost 8080 that's my application it's just Michael Scott and I use this to demonstrate HTTP - like how fastest to be - compared to HTTP one just like breaking in old images very nice how can I expose this to the Internet I want to give you a URL to test this application the first one good thing you need to do is installing grogg and it's it's really simple you don't have to sign up yet for to do whatever we gonna do yet so you can just immediately just download this thing alright so I'm gonna go ahead and download it now I'm gonna go ahead and just go ahead and download and extract it so I extracted it now this is the file that's in my downloads right so the next thing open a new terminal right we have a new terminal and we can all just go to the Downloads folder and there is a my Ingram and he's ready to do you just execute in Brooke and then we want to expose the HTTP traffic and then you specify the protocol which is the HTTP driving in this case and then you specify the port which is 8080 and then just like that they will establish a remote port forwarding uses SSH and so you connect to the server to their server and then they're gonna give you a bunch of URLs they're forwarding this is your URL for HTTP I don't know why it's cut off here but this is the HTTP this is HTTP so when you take that when you take that URL now and paste it this is a publicly addressable DNS query that it points to their public IP address which points to our application on their site which which reverse tunnel it to my server because well this is how it works and that's my application right there it's a little bit slower and that makes sense and they're the same thing actually running on HTTP but here's how works guys you gotta be careful this this is this certificate is served by Ingram himself so they even if it's HTTP traffic they actually can look at your data right no matter what you do they are looking at your data so yeah it's encrypted between whoever consume that and Ingram but between in Brooke temporarily decreed that traffic so I can send it to your application that tunnel is encrypted but for a very free for a period of time it's not encrypted in their server and they can look at your data so just just be aware of that but if you're probably you are aware of that you you don't want to expose your application like that yeah to the public in turn is just for testing obviously right so yeah HTTP that's that's very simple that's how you do it all right you see if I want to show you in a simple application I can just do it this way right all right so that's the thing that's the thing about HTTP how about we do WebSocket let's kill this application now and I am going to go to my web socket demo I think I have a WebSocket demo guys I made videos about all that stuff guys go check them out the WebSocket videos there and just check it out but Wow all I'm gonna do is just basically run this sort of server again it's port 8080 buzz now it's WebSocket right well WebSocket is very simple all I have to do is clear declare a variable write equal new WebSocket I'm just testing the WebSocket locally first 8080 and then I do on message this WebSocket application is just pinging back whatever I send to the server so if I send the server hello it's gonna the server will always play back hey I got your message hello that's that's that that's the only thing this server does it's a very simple WebSocket server it's just a pink way right almost like a request response so it's not really but gives you the idea is just a WebSocket application so how do I expose this thing to the public internet so people can chat with each other for example I also build the chatting application for your interesting guys so to do that we do Inc Rock TCP 8080 right that's the only difference because I want to expose it at the TCP layer right this way you tell in Gragas hey just forward all the packets as blindly as possible you can do the same thing with HTTP by the way it's just move forward the packets blindly will try not to look at it right and yeah even if you have a TLS it's gonna establish TLS with us it's gonna pass through the TLS all the way to your server so if I gotta run now I'm gonna get an error and that's because they say hey you can on TCP TCP can you require to be signed up and you require an authentication so you need to add like auth token here right and this off token and use provided often so where can we give this all token prom right very simple you can literally go to this it tells you where to go to to get it I already signed up so I'm gonna you don't have to show that thing that's my token I'm gonna copy that token and all you have to do is run the same command - the same command however do - - off token and then literally paste your token right I'm gonna delete that talking obviously at the moment I close that's it now we have a WebSocket server exposed through this URL now this is the address right I'm not care about the TCP obviously this is the management thing where they keep track of what you dad do is do and all that stuff and here's the the Twitter of the person who built this thing go pay him some respect and thanks for his service that's a great tool that he built for us right I'm obviously in a free plan obviously if you want like custom domains and another thing that you can't pay them to but yeah so let's do it now I'm gonna do WebSockets stuff but here's what I do let W us equal a new WebSocket but this time WS let's zoom in so you can see guys paste that's a URL boom the value do it on message equal console dot log just just so that if we receive a message from the server automatically call this function just consul the code which is just prints this stuff I'm gonna send the server yay I'm public babe and that's it it works if I give you this URL it will immediately work obviously it's gonna I'm gonna shut it down immediately after that this video but yeah works so yeah it absolutely works guys alright so that's uh that's what I walk it right exposed to the public how about we expose an HTTP that is locally and that's the dangerous stuff that I don't believe there is a way to do it within grow like we're gonna try kill this application and let's go to node HTTP - I believe this is an initiative and it's a 443 TLS server running local with a self signed certificate that's all what we need so we'll do a node index dot JSP on port 443 so if I do so I'm gonna do is actually be localhost let's hinder and then obviously we can I get this error that's okay because that's a self signed certificate except and there's application just returns adjacent it's very simple stuff so and here's we're gonna do within grok I am going to tell ingrowth to expose HTTP traffic to this about we do that as a in Brooke exposed HTTP traffic there's no HTTP I think on port 443 and when I do that it's gonna say oh sorry if you're gonna do 443 we don't allow it unless you're authenticated right but if it's it's a secure traffic they don't allow it right so same thing both token punched and here is we have HTTP traffic we have HTTP traffic let's see how it looks like obviously it should say that it is insecure but guess what first of all it doesn't work I'm gonna explain why all right what what this does is it it in slip it tries to serve HTTP traffic to to the client by terminating the connection right so they are trying to be a man in the middle right and and as far as I know there is no way to around it and Alyssa I'm gonna show one way around it but here's the thing my application is actually h2 and they don't even support that so and since they don't support HTTP 2 on the backend as a client from ingrowth to my application that kind of just dies immediately so now here's one trick you can do you can tell Angra - sure don't try to terminate my traffic or TLS just pass in anything that the client that the original client sends to you to me as TCP traffic this way they cannot even know what's going on they don't even know this is a secure server now this is technically all the way passing to you that but here's the problem it's gonna talk about that now if I do that obviously I have to do HTTPS it works see what happened it actually works and I was served my self signed certificate all the way from my node.js application all the way to the client this is what we want this is insecure and that's okay and that's what we certainly this is what we write localhost that's exactly the certificate I actually built but here's the problem if I if I accept it it's gonna work right that's the public application however that's the only thing you can do if you really want to host an application you might get away right away with it with secure connection and with an actual domain with a legit let's encrypt certificate you might get away with it but the problem is the host will start sending this guy in a state right it's gonna say to the TC Peters in Grogg which this host and probably this is ni the set of our name indication in the client hello doesn't exist in your no js' and that actually might fail right but I'm not sure I didn't try that out but that's just kind of four different flavors of what you can do with in Brook and how you can expose your public application alright guys so that was like a quick video showing you how to expose these kind of stuff to the public Internet so you can test to their plication alright so if you want to test the application you can just easily spin up a link rock and yeah I understand this might not work for everybody but it's kind of give you the idea of what you can do with this service right like this video if you like it subscribe for more cool ash stuff like that I'm gonna see you in the next one you guys stay awesome good bye

Channel: Hussein Nasser

Views: 27,488

Keywords: hussein nasser, expose http, expose https local server, ngrok

Id: pR2qNnVIuKE

Length: 13min 20sec (800 seconds)

Published: Thu Jul 09 2020