Amy Nguyen - Using Chrome Developer Tools to hack your way into concerts

[Applause] all right hi everyone I'm so excited to be starting off to guess Coffey you by talking to you about how to use Chrome developer tools to hack your way into concerts now these subtitles talk is please don't actually use this information I'm not here to tell you to do anything that's literally illegal or to break any user agreements we're here for the education and so do as I say and not as I am still saying so I'm gonna tell you about a story this all really did happen to me last year I was really excited about Taylor Swift I wanted to get in tickets to a concert and I learned so much about web development on the way to doing that I built us a small web app for the purpose of this talk and I will be recreating the kinds of interactions that I saw when I was investigating her web site so we have this website website called Swifty's it's selling tickets to Taylor sauce concert and they want to give tickets to the the most dedicated fans of Taylor Swift and they're measuring your dedication by how many times you've watched her music video so the more you watched her music video the more you will have priority in line at the end no seriously so we want to convince Swifties that we've watched the music video more times than we really have you know it's like four minutes long it's awesome awesome not look what you made me do is not like the greatest music video to be honest like I'm sorry but I really thought Taylor stuff isn't watching so so space on with your story this is the what we're gonna be doing for the next 30 minutes IRA I wrote this slide before I realized that I actually cannot see you all very much but we will be using the browser a lot in this talk I've tried to make the font as big as possible if you can't see please like do just call out I don't want to want you to miss the content just because you can't see we can make the font bigger if someone near you is straining in they're too shy you know just call it for them I will not be mad so we've got Swifties here it's a very pared down web site I also realized that Taylor Swift is a lot more cool than I am so I swapped out the music video for a timer so that you could all taste it's gonna talk but you know it will work even if you replace it with a four-minute video and I suppose it says one view it should say zero views that's fine starting the lifetime off great so we can play a video oh my god that's like the biggest hurdle here so you know we got this video we watched the whole thing this is the only time I'm gonna watch the whole video and I couldn't think of any funny jokes to tell during this time but eventually I'll end and I can stop being awkward yeah so we have two two views now and so we just wanted to get that number as big as possible so the first thing I started thinking when I was debugging this website was like how do I just make this video faster I know that I can come over here and click on speed and click it - - and that will make the video faster but what if I want to do that programmatically so every time I watch the video the video comes out faster and through a little bit of research I found out that there's the YouTube iframe player API which is pretty great it turns out you can send a ton of different pieces of information to you to a video that's embedded during YouTube and the point here is that you can you can send code you can examine things dirty elements tab and so that now we're actually gonna get to the chrome parts so in case you didn't know it turns out this is called a kebab menu that's what I learned three recently or making it like a skewer menu or meatball menu I'm not sure so you can find more tools developer tools I usually hit command option I but that's where you would find it and you can paste in this code that I found on Stack Overflow no seriously I it's a JSON it's it's a command it sets the playback rate so to you send the message you post it to the iframe player and I know you're all probably thinking like yeah I've done this before it's fine you come over here you paste in your code and you play this video actually let's refresh this page because it's already played and now suddenly this video he say hope you can tell that's like moving faster than one second at a time one thing that's important to note here is that you can see that this is actually searching for a element that has the idea of player and if you want to make sure that was working you could come over here and see indeed that there's an iframe here with the idea of player one thing that I really love doing is if you hit command shift C I realize you can't see my hands but hit command C and you can highlight over any of these elements and then select it from there so that's really cool you know you can make videos play faster if you do this with torsos video she sounds like a chipmunk but that's not good enough we you know we want to come and say where that we're watching at hundreds of times and so we don't want to paste that code and every time and so can we figure out how the site is communicating with the server in this case I was like being so e and like going hahaha I can like go over to this tree and like maybe I can edit this text I can like go here and go like yes I've watched it like a bajillion times I'm great but you know you refresh the page of course you know what the views are not there and so there must be some sort communication that's happening and that's what the network tab is for you can even come over here and you can actually watch everything that's happening so if we refresh this page start over you can see a ton of different things happening watching all these scripts go through the videos happening and so you might meet you thinking like this is really complicated but it turns out that you can you actually filter by domain you know that Swifty's is probably not sending a request to youtube.com in order to track of you and so you can actually type here domain in this case we can see actually I'm not sure if you can see it but the domain is my local host 127 0.0 0.0 0.1 and so that actually filters out and takes away all that YouTube off that double-click and all that other stuff next we know that there's some animations apparently going on and some like left pad so we know that we've we don't really care about all of this stuff so we've got some we know that we have xhr here and what swing is that I someone asked me what does xhr mean I could say oh let's answer XML HTTP requests and if they ask me anything else I'd be like Ajax I don't know and that's I feel like I've gone pretty far in life with just that knowledge so anyway you you can click here for xhr and that that's really great because now you can filter out all this chaos you can ignore it if you want to look at the CSS you can actually filter out your network requests so we went down to two network requests from out of like let's say 49 requests so that's one really easy way to like filter out and like drill down to like the information that's really relevant here and so now we can see that there actually is a count request that's happening so I mean we can investigate that so from here we can click on this we can read through like what's happening there's some request headers our user agent string and there's this interesting ID here that's like looks with randomly generated so maybe we care about that you kind of store all this information away in case it comes up in the future and then we can see that the response from the server is that there's a true successful response I'm surprised I haven't been checking in to see if people are seeing the screen so I'll keep moving all right so we open the network tab we filtered oh and also I'm glad I have the slides because there reminds me of all the great things I want to talk about so we come here to the initiator column and this is really cool I may have just found out about this yesterday so that's really great you can go here and see what stacktrace led to this count endpoint happening so if I go here I can see if there's some sort of VM stuffed I heard that's the next talks that's I'm excited for the next one we can learn what's going on here but we can pretend that that doesn't exist for now there is record view and update view count if I click here I can see a bunch of stuff going on I can also see that there is some code here it's like checking for a current time versus the duration of the video so I can see maybe like 60% of the waitress video is when we record that the user has viewed the video so that's kind of interesting we can like even test out that assumption let's refresh this page and I skip all the way to the end I've met five views and now I'm at six years so I've already like learned a little bit just by checking out the code inside of here and so we looked at the response and request data and I was really afraid that none of this would work so I took a ton of screenshots in case I had to like go back to the slides that's everything we just saw so now we've seen that there's a count request and maybe if we send that count request over and over again we might be able to get some more of these views so you come back over here let's play this video and there's the count endpoint one thing is really great you can do is click here or play xhr and that will just redo this request again so now you can see that there is no initiator column because I initiated it from the menu and you can see that the ID here is the same ID as before this is the original request and this is the new request but that the success is false and so server's telling us that's not going to count this as a few we can test this if i refresh this page let's try replaying it a bunch of times I should see mmm like 10 views but when i refresh the page I only get seven so only the first request went through so that's kind of mysterious I'm not sure what's going on here and so the next question might be like well but you know there's that unique ID what does that mean like does it have to be something different every single time and that's where a curl comes in curl is a command-line tool that lets you make get request and post across through HTTP and all the other methods one thing that I hate about Carl is that I never ever get the syntax right there's all those headers there's the new lines and all that and it's just confusing so one thing that's very great that you can do here is I found out this you can copy this exact request as a curl command and then you don't have to do all that formatting yourself so let's do some curl and now like I can see I have all these headers I have my data if I go here and I say something like hello J's conf that's a unique ID maybe it hasn't been sent yet maybe I'll work and so if I paste this in no it doesn't work it's still false it was worth a shot though I remember I had practiced this talk recently and someone was like what if he just changed the ID and so I wanted to confirm that the ID does matter so we know there's something going on here we want to get that ID but we don't know where it is so we want to send a valid request so let's debug this we know we can find the code from here but what if we want to get to the code before it actually runs before that that Ajax request happens so I can come over to sources I was supposed to have that open and one thing that's really great is you can set your regular breakpoints just in at lines of code but you can actually break on on Ajax requests before they happen you can break any time a request happens and it turns out YouTube is constantly making xhr requests and so it's actually not that useful so delete that one but we can break anytime the count happens and I will say any time an ER L contains the word count will just stop so let's refresh the page and there is we no doubt now that we're in this weird VM code that we can ignore let's make this a little bit bigger and when we look through the stack trace we can be careful and say okay well there's the record view but you know if you're updating the view count but there's an ID eater and so we can see if there's a variable somewhere we know it's like somewhere in our scope if I can see the scope oh it's on the right thank you thanks to Chrome so to scope is somewhere in here for the ID it's a global variable indeed and at this point I may have just command F for the word ID and realize I was at the top of this file which is pretty interesting let's see I'm trying to make this a bit bigger for you so if i refresh this page a bunch of times I can see that this ID keeps changing and so like what you can do is you can come over here to network click on counters you can see it indeed this response is coming through every time every time I load the page I get a new counter and so at that point you know you know that you can you can definitely download this file and parse out that ID using a regular expression which I will gloss over for now so this ID here what happens if I copy it if I steal it and I put it inside my curl request maybe I am done which maybe I'm done now is the I kind of overall theme of this talk so I put that new idea and I paste it and I'm like it's gonna happen it's gonna happen it's not gonna happen it's just like so disappointing like soul-crushing but now I know at least that there's an ID that I can get but there's something we're missing clearly and at this point I will say this whole thing I know I'm like squeezing into like 30 minutes but it actually did take me a couple of days like I got really frustrated I'd put it away I'd talked to some friends perk up and I just keep coming back to it and eventually after trying so many different things I realized that there was something going on with this with a start endpoint and then I'm pretty much oops let's restart this I realize that is false so I noticed that there was a start in fine I was giving the same like style of response as the count end point and I also noticed that that break point is here so let's press play so we're back in here and I noticed that the start end point has an ID in it and so it must be it must be connecting it back to the count somehow and so honestly I don't have a good like intuition for how this happened but I just decided that maybe I should try running the start command and then I should try running the count command I did try like a dozen other things but I will give you the answer because we're only here for half an hour so I have this this curl command I'm gonna paste out my this is the start end point you can see it right here and I'm gonna try refreshing this page so I can get a new fresh ID I can go over to sources here it is and I'm gonna paste it right here and also right here so I've got this start and you know okay so that one was true that's good what if I come over here and try the counts and it's true [Music] [Applause] [Music] so I realized that that the climax is just kind of like you try a lot of things you debug a lot you read through all of the code that you can find that isn't minified and you eventually figure out what's going on with the site and then the next question is you know can we automate the solution we know that we got a unique ID we send a request to start endpoint we send a request to the account endpoint and if we repeat this hopefully we should be able to get more and more views I'm gonna do that thing that Martha Stewart does where you know she has her like oven where she makes her turkey and then she puts it in and she walks to her second oven and suddenly there's another turkey and I've never had two ovens in my life sometimes I've had like one I've had like zero ovens before but I have this great thing called turkey pie so we're gonna send a request you're just using the Python request endpoint we have this regular expression that just literally searches for a string VAR ID equals such-and-such thing and we're going to get the counters endpoint and we're going to then post to the start endpoint with the token that we parsed out then we're going to post to the count endpoint and hopefully you will see a bunch of successes so come on yes okay so we did we just manually or automatically did all the things that we were manually doing with curl if I come back over to the browser and refresh this page now I have a hundred views so I can like run this again and again I'm so glad I'm on the local host because that would not have worked over the Internet so how'd it's a conference Wi-Fi so now I have like 200 views I can keep running that again I can even change the target thousand but you get the idea now I I've actually proven that I am the greatest Taylor Swift fan I have more of you say anyone I have more views than it's like physically possible to watch in one day so that's all great so the last question you might be asking is how do we prevent this from happening you know we're all web developers here we know that we we don't want people like us to be playing with our sites and so the first like I think most easy thing to do is like run a CAPTCHA like every time you watch a video or every time you submit a form like say you want to stop someone from automatically buying your stuff you can make them fill out a CAPTCHA one thing that is a problem in this case is that you don't want to make users for Kaptchuk every time they play a music video now how people really annoying you'd lose all of your real fans um so you know there's pros and cons so you want to be thoughtful but when you would use a CAPTCHA another thing you could do is randomize the Dom I thought this was a really clever idea you could you know we had we all of this just hinged on the idea that we could get the ID out of the out of the files that we were downloading and I was always in the same place I was always far our ID equals string if you changed out the variable names or randomize them or you even like dynamically generate those ideas maybe I concatenate strings together all of that would stop someone from just a regular expression expression in out the IDS a really tricky idea that Mahmut co-workers gave me was that if you're let's say you're you have a forum where people are buying something rare like a special t-shirt or something you could have a hidden buy button inside of the Dom that isn't showing to a user so that it and you can randomize which bun comes first so that if someone's trying to traverse the Dom in order to find the button then they would sometimes hit the wrong button and that's how you'd know if they were bahding or scripting I think the easiest or the simplest thing you can do actually is not to stop BOTS from accessing your website but just let them in and validate what kinds of behavior is seeing and not a Melbourne is really really familiar with this because I learned that there it takes about 10 hours to drive from Melbourne to Sydney but if you speed there you can get there in six hours and how's that go why not just do it just just speed through for six hours and my friend says that told me that they'll take a picture of you at one point during this long drive and then at the end they'll take another picture of you and they'll compare those timestamps and say there's no way you could have made it there in the right time and so there that's how to catch you for speeding so you can do the same thing there was no way I could have watched 200 let this video 200 times in so many it's and so if you detect that you can just flag the accounts that are doing bad things one thing that's really important to do with this is to not alert the person who you believe is botting you can just keep sending them success equals true you can just keep telling them that they're doing great if they're scraping your website you can start sending them like vaguely true but also not real data and you know the benefit is that you're you're not tipping them off you're letting them keep thinking that their solution is working and at the end you don't have to sell in tickets and so those are just some like starting points for how you figure out how to stop you from doing this if you can make it so that someone can't just keep sending posts and gets in order to get to your website that's probably enough to deter the most the I guess most anyone but the most dedicated fans so why haven't any in with me well I didn't get saddle band I actually was really afraid of that I thought like I find all this work and on the day of I thought I would just like get an email saying you don't get tickets but they didn't somehow they didn't realize that I was watching this video way more times than I could have I did get a high priority position in the sale the sad part is these tickets cost money it costs like fifteen hundred dollars to say at the front at the concert and I was like not like at all prepared to do that so I went to work I spent all these hours doing this and then realized that I didn't want those tickets after all but I did get like the cheaper tickets like you know kind of in the back oh maybe I'll see her like from far away like bring my binoculars I got over a job so that was great it's really great it was an internship and I kind of want to be like what makes you think I don't have a job man is it the Taylor Swift I don't know maybe I maybe I just like project I have too much time on my hands and I got to give this talk so that's really great I'm really glad I got to come to Australia and talk to you all about chrome developer tools so just to sum up we asked a ton of questions during this talk we are thinking about like can we watch the video faster how how are we communicating what's going on with the network tab how do we do this again how do we make it repeatable how do we find these tokens we were doing a lot of debugging and we wrote some scripts and so that's a lot of really big questions IRA's that's like kind of hard to remember but I think the thing that you can walk away from this with is like first of all you got all this like concrete skills you know hopefully you've learned something or at least one thing about chrome developer tools that you didn't know but the more important thing is you know there's a spirit of debugging where you're filtering out the information that doesn't matter you're you're figuring out which path to go down and you're also persevering like even if it takes our history you know it's okay you can try things over and over again and you can keep asking questions and so I want to say here is going to be curious if you--if you want something to happen and it's happening in the browser you have the tools and those Stack Overflow to make it happen yeah so thank you here's all of the information [Applause] you

Channel: CSSConf Australia

Views: 19,323

Rating: 4.9144893 out of 5

Keywords:

Id: tXssxJgIHbs

Length: 24min 22sec (1462 seconds)

Published: Tue Apr 10 2018