PG - Fun With WebSockets Using Socket Puppet - Mister Glass

all right good to go all right hello everybody uh I'm Silman and this is fun with webs using so um I'm y also know as Mr glass uh I work as a web developer please don't hate me uh also freelance hacker and large geek uh I work at a company doing mostly PHP back in De New York um so web stockers were created to solve a problem and that being Dynamic web apps there's a lot of things that need kind of realtime communication uh I am is the biggest example in G Chad live logs you know gaging all places covering Apple launches they need live they want to push out as fast as possible uh

collaborative apps you know docs or whatever all these things need very fast Real Time Communication so that everything stays in safe um so up until recently up until h m 5 people everybody used HX which kind of sucks uh it requires you basically make an HTP request uh and send it off to the server server sends a response uh and that works great for just pulling information but when you want real time you have to pull constantly and do this all um there HP requests in the browser very annoying to work with in general unless she's a library um they have a lot of overhead if you have to have a full HTTP packet um and they're Laten because you're

polling so you're sending out a message every XC however much you want to have them pinging you um and instead of having real Time Communication they're basically pulling every half seconds uh and so there's a lot of latency built into that um uh about 10 years ago maybe 15 I don't know somebody came along with this idea of long polling which is how Gchat actually works uh so instead of your standard send a request get a response immediately that might say no you don't have a message long pulling works by a special server side software that doesn't send a response right away so they'll delay for whatever the tgl is probably about 5 Seconds usually um and

if you get a response in the meantime if they get a message for you in the middle of that delay they'll send right away oh you got an IM otherwise at the end of the response time they'll send an okay back and you'll pull again so instead of having to const it pull every second you can pull every 5 seconds and the server can send a message when it has one but they're very tricky to implement uh the special server sideof software a couple different implementations um terrible hack that rides on you know not sending response back right away which is always expected uh and still has some latency if you've ever had Gchat kind of like sit there

for a minute Facebook Chat is terrible uses this uh and has all the HTTP overhead as well so you know don't really gain much over Ajax it's faster than Ajax but it's not a great solution um this is a comparison chart of for the overhead between between websockets and um Ajax uh this is just straight up they send small packets like a p or something um and they had 10,000 I think it was 10,000 cases and the giant blue bar is if you use the standard Ajax it's full HP request and that little orange bar is the amount of bits you need if you use a wet socket to the same message so there's a huge

overhead game when you use websockets uh and they kind of had to step up their testing to make it actually look like something real because you can't even see the size of the bars so websockets are awesome uh part of HTML 5 they are not ratified yet there's a working draft um been stable for a little while uh very simple to use I don't know if any of youve actually done in browser a request native um but they're annoying we have to have like every browser does it differently and there all sorts of hand that you need to do uh websocket you just declare a websocket so you say our websocket equals new websocket give

your url um and then you can just send a message just like to send uh bu dead simple to use um not very common yet uh I was really hoping when I decided to do this that I would be able to find a lot more this is all given from you um but not many companies that are real actually use it yet uh you'll see hackathon stuff but like Google none of those places use it uh it does have as of the last time I checked uh about 70% of clients out in the wild are using it uh all the modern clients have it but just 70% users support it so you will be able to it's

it's up there it's ready and companies are just about starting to use it so Story Time about 5 months ago now uh I lost my job and while I was going around interviewing in the startup scene in New York uh I was I heard about websockets and a lot of people were interested in them and I decided to play around with it I made a stupid browser based game um and I did Real Time stuff with it and it was fun and then my game broke and I tried to debug it and there was nothing to debug it I couldn't see the traffic uh since I found a couple things that let you see the traffic but I basically

had no way to debug my code uh in terms of seeing the actual traffic being passed and that made me think well clearly I need to make a tool so I make socket all problems computer science can be solved by another level of indirection uh it's a quote from David wheeler he had the first PhD computer science um and it pretty much holds true so what I did is I added aay layer of IND Direction inside the browser uh it's socket puppet is a Chrome extension and it overrides the native websocket API in Chrome um just kind of sits on top and we'll get to how that works in a bit uh passes is to get information into

Dev tools uh so you can use it control it Etc uh and I have features for logging sending messages tampering with stuff won't get to that so this is a diary made May recognized format uh kind of explains how it works uh your typical web browser on the left is the web page talks to webset API goes and talks to the service and then if you have socket puppet this is just dead simple you can web page talks socket puppet instead of instead of websocket API and you can do every one there then you go over to the to the websocket API which actually sends it so I'm still using Chrome's websocket API I just sit in the

middle so here's how you can do this for yourself if you want to override a different API um this is very basic um but you need if you have an extension there's something called content scripts they run at the initial of the page um but your sandbox you're in a different Dom than the page so if you try to if you have arbitrary JavaScript running it won't actually run in the P's environment but you can inject code so what you do is you open and you grab your script you you know which just uh you create the element the JavaScript element just the thing for the Dom you pipe your uh actual JS that you want it

to be in there into that element source and then you uh append it into the head of the document uh there is a tiny little race condition at the start of when the page hits uh if they have a a a raw jscript scrip Block in the top it may or may not happen first uh but standard for web development is to have it at the bottom all JavaScript happen at the bottom and after full do loads so I've never seen it actually uh affect anything in a real site so you can put whatever you want to a page with this um you can do whatever you want so if you want you can override

the alert function and get rid of some alert messages this is again very simple simple code but a great example of what this does uh and yeah you just alert equals function alert message so you're declaring a new function and just overriding the standard alert function and instead of alert popping up box L it'll just log into your console so when you override one of these apis you need to be careful you need to override the entire interface CU all these websites they use all the elements of the API and web stop API has a lot of stuff in it so I read a lot of docs Fe has a lot of dots then I found

out that chrome doesn't use the working draft so I went back and read more bigger docks um I found out that you need constants for websocket API but you can't do constants in JavaScript so you have to F them there's a lot of little things like that that you have to kind of get around um but now I own all the SES so I can log all the data I can listen for events I I can do whatever I want so I don't know if anyone want see me ride alert I think you guys all know how to do that um but you all can use socket puppet it's available now socket puppet. glass.org U very dead simple to use uh

open up Dev tools um click on the socer puet tab that will kind of insert everything set everything up go to your web page uh and then you can view transmission log so you can see the data being sent back and forth s trans logs send arbitr messages and I'm going to try to demo this if we have Internet let us see so here I have websocket dorg lovely Echo test uh which is fabulous you send in a message it sends a response so you can see I now inep cuz I installed socket puppet have this uh socket puppet uh tab I can refresh and that will make sure sometimes it should connect but just in

case I like to refresh um it can actually tell to use a secure socket because it doesn't matter to socket puppet so we're going to use as a cell uh we're going to connect uh so you can see it log we have a new websocket open uh the echo test sends this lovely little message rocket with HML 5 socket and just ping back that whatever you sent it um so I can go in using socket puppet send an arbitrary message like hello um and you can see in the response the JavaScript code that box on the right is uh all populated by the JavaScript code in the page so it saw when I clicked the send button and sent

that message but when I sent from socket puppet that happened outside the browser knowing so it received the hello response and CHS it there but doesn't know I sent it she can send an arbitrary message uh if you did a bunch of stuff a lot of this is a dead simpol a lot of real time applications will have a lot of data coming in and you probably want to save it and look at in the thing so you can click the button gives you a text file nice and easy there's a clear button that just clears out that log um that's very basic setup but that was that let me fix my site uh and that

is 90% what you need um

no I put

another there we go okay so Advanced usage you can actually add in a Rex statement and it will fill it out and replace it with whatever you want uh you can do that live so you can kind of replace stuff ongoing um oh and I forgot to show you another feature so I'll demo over that now so back here I actually forgot to show you guys um you can actually have it in pop up in alert disrupt every message sent from the browser so you can go in and send and it'll just ask you what you want to go you can hit enter it'll send the send message you can change it so hacked whatever um it's very annoying

because every time it sends a message it'll pop up um so again if you have a real time chat app that might get really annoying fast um but pretty cool uh then for the uh filters so you can go in here and I know they always say rock locational websocket so I'm going to copy that and say I want to switch that so I want to every time it says that say hack it with puppet cool and now there's Lo see there it's listed cool um every time I send the message you can see in the log page ask to send rock with H5 socket web socket but we send hacket with socket butet so we automatically

filtered that out and replac it so if you have a web page and you want to just automatically change something on fly you can do that uh it fully supports Rex just there's CHP uh re placement so oh great may not be able to do full screen anymore fine so um you can if you want to if you know JavaScript you can Fork this this is up on GitHub you can get the source you can install an unpack extension there's guides on the website it's it's very easy to do and if you edit Dev tool T.J you can add in your own logic do whatever you want um please share if you had something cool uh that's generalized

uh my boss at work actually wants to Fork it and make specific to different websites he uses versions so you know you can make a version just for such and such game that will just hack the game and make you you know infinite life or something um and you can do that it's very easy to do it's there you know they're a functions for every time you reive a message every time you send a message Etc and you can you can pretty much play with everything in there so we're up to while running early uh we're up to the big demo uh which may or may not work so let's try this open up Dev

tools not okay I need a volunteer with a phone who has a phone with a barcod scanner anybody have AOG phone with barcod scanner but we're not using you're not using it you got it and you scan the car so this is a game called duck shoot this is a Chrome web experiment um what it does is when you scan the QR code it connects your phone get out my phone um it connects to your phone and you use the phone to control the game and you and they will have the game displayed on the on the screen and you use your phone to control the game um Chrome they like to do these with

chrome to show all the cool hl5 stuff so it uses sockets it uses canvas it uses a bunch of other things here take my um so yeah it's going to ask you to enter in a name just put whatever um so when the phone connects we should get a message back that it picked up a phone and that we'll see it in the LA and we'll see the game going is it not connecting is the oh there it goes [Music] it's craing along what's it show it's it's probably oh there loading cool all right so you can see says QR code scanned and it's actually going to we like this in the game uh for her to

enter a name I want new name for the leaderboard um so uh go ahead and just flick up on the screen that's how you shoot things cool you hit it up good job so you can see that you have the score going through in there we're receiving messages with the logic of what the swipe Direction and stuff is um and we are responding with whether they hit or not what the score is um and I saw this when I was looking through and I went P should be easy to ha so you can go in and you can add in just a reject replacement score equal plus so I'm just going to replace any number after score

with [Music] score 99999 and now again the game's almost over so you can see that she hit something and it just always sends out score 999 and it says game over your score is 9999 so uh we can change the score unfortunately if I scroll down on the page you'll see um I tested this like a month month half ago and I didn't look at the leaderboard before I tested it I entered in a really big number and I've never seen the leader board program so I don't know if I broke it I don't know if the Hat actually works um but I know I sent them a different score so yeah that's the best I got uh I really tried

to find cooler demos unfortunately not many people are using it uh you'll actually find a lot of cool like hl5 web demo Loc sockets and when you start using socket puppet you'll see that most of them are faking um a lot of the libraries out there will just uh they'll fall back and the older libraries so they're buil to fall back if you don't have the websocket and the older versions will just always fall back for some reason so you see a lot of the early demos will just fall back um there's one web D actually has a promotional page where they try to sell you it and they oh somebody SC a QR code

um so they have a promotional page and they will um they have aocial page and it's like all this and it has like a bunch of stuff popping up there's a stop ticker there's a this there's a that a bunch of headlines and stuff and I looked at the websocket information they're like this is all websockets web soet is beautiful it sends one letter over a websocket and does an Ajax request and then all the data is faked and it's also static data doesn't change so uh there's a lot of stuff like that ah we lost our connection so you'll see a lot of stuff like that the biggest example of somebody actually using it that I've

seen is stack overflow stack Overflow does the uh the little popups that say you have a new answer those are I think done over it but they just send a like yes or no pin out U but they they have a websocket running again you can see it there's not it's like a letter going over so nothing too cool to look at U so that's the big demo um just not going to work is it going to work awesome so some ideas for the future um when you browse around it's kind of invisible when there's a web socket as opposed to Ajax so I really kind of have want to have some popup or something

that shows that youve connected to a websocket uh I Ted around with having a big button at the top that would blow when there was a web soet ET live but what I found is that you can't open Dev tools uh from any button you need you need to initiate it user has to initiate it you can't have a button that doesn't can of anything so that got scrapped and I'm not sure how to do it um I kind of want to add fuzzing so you can kind of just open up have a website connection hit a button and sends a bunch of R and stuff but I've never done fuzzing before so maybe somebody else can add that um

unfortunately right now there are a couple limitations uh I did not Cod it to accommodate multiple sockets one web page um I just didn't think about it at first uh it's going to take a little bit of architectural change to uh handle that um it's mostly due to how the Chrome sandboxing Works I a get into this but everything in Chrome and sandbox and you actually can't talk to the page from the uh Dev tools panel um so what you need to do is have the page talk to a back to a Content script and so the page is only allowed to talk to content script and then the content script is allowed to talk to a

background page which is all across all your tabs and then the background page is allowed to talk to Dev tools you none of those are allowed to talk to each other except for that chain so if you look at the code you'll see a lot of message passing back and forth um and so I have to kind of keep track and I keep track of the tab but I did not think to keep track of which socket was messages for as well um also if there's an if frame in the page uh I'm just injecting into the Dom of the web page that loads so if the if frame loads it's a different Dom so I can't really get that

uh I'm thinking about ways to inject into an frame but I haven't done anything yet um and the filter is very very basic uh I threw it together about two and a half 3 weeks ago so um I want to make it better not sure how but it's there um so yeah that's some of my ideas for the future I'd love to hear more I'd love to see people um yes oh go ahead I'm just waiting basically um I'd love to see people Fork it and and put in stuff uh it's very basic JavaScript um you should be able to so you can grab it please please please contribute uh even if it's just opening up an issue if you

have a problem on the web page um I have students aroundand and stuff my my co-workers have been playing with this all week and they've sent me a couple websites that don't work usually it's multiple websites on page uh thanks greets to my wife brother spam weasel Shephard betamax and everybody thanks so much for running this thing um and questions okay um can you manipulate headers with it headers communicate back with um no I'm I'm not even sure that there are headers in the websocket protocol I I haven't actually looked at the actual lowle protocol CU I was dealing with just the uh the interface in the browser everything I do is in the browser so it but is there any caveats

on what servers are required to support this like server version or no I mean you need so websocket is a new protocol it is not related it's not really related to httv um and you just need there's a lot of server software out there to support it there's pretty much in every language there's a websocket thing gra JavaScript node.js very popular JavaScript uh for connecting to websockets there's PHP versions I've seen polyon versions I think I've seen Ruby versions um and it's it's pretty simple to set up but I'm not even sure there are headers with each message there's you know a whole there's a there's something in the initial setup but everything I researched everything I

did was about inside the browser so the API and and mucking with that and and it's different most of the stuff I've seen a cons and all the tools uh and you you get to interact with it very differently than you do with a lot of the other stuff um and just by its nature of being in the browser I get by SSH and things like that so did you um um you said with your chain are you able to interact so you're not able to interact directly with the web page that it's embedded in can you pull any resources like credentials or other stuff related to a session on that site um so just in general in Chrome

extensions that's a limitation um if you wanted to and I know there are viruses that do this there are pieces of M that will install extension um actually that's why about a year ago I think Google added a feature in Chrome where if session is installed from outside of chrome is off by default and you get a little popup saying something was installed and you should look and see if it's a virus so um you can you can as I showed you can inject it to the Dom of the page and when you inject to the Dom of the page you can definitely if there's a password field in there and you can grab the content of that

password field there are plenty of viruses that do that uh and then passing it back is not incredbly hard that there's an API in for just passing to another area of the Dom you know they sandbox do so that API let you pass to a different area of the D but you're only allowed from one area to access a certain little area um so you're only allowed to talk to the content script from the web page and you're only allowed to talk to the background page from the content script dep things like that um the limitation in message passing is it needs to be I think it gets uh Parts this Json you cannot set

an actual real JavaScript object it needs to be able to be serialized uh can you push down updates to your regular bression uh filters from the page that you're uh connecting or from the websocket interface um you're saying from me oh we it's parted to your plugin can you P an updates like if you want to have something update as it's running can you update the filters so if you wanted to change the filters while Runing unfortunately I did not that like I said that's like the last thing I made kind of janky inter does it seem reasonable too you could impl something like that adding another socket to it that would pull for Reds from a third party or a third party

site once that person are connected what websocket is they're using I don't know about a third party site maybe you could certainly do that that seems like a lot you could you could if you were malicious you could kind of have it check and see what you wanted to do in in server and get data um I do want to add stuff so you can modify these reject statements I just haven't got around to it yet uh any other questions any

um so Firebug I'm not familiar with Firebug I'm a bit familiar with Firefox extensions itself uh those are all written I think in C or I looked into Firefox initially because I actually use Firefox mostly for my web death so Firefox you can't code in JS you have to code in C and uh while I have done that in the past I decided it was Anno to do um this was Far easier to do in Chrome so you could certainly do the same thing but the code is not at all compa uh any other questions okay I guess thank you [Applause]