Using Chrome Developer Tools to hack your way into concerts

Chrome Developer Tools is magical. It lets you record network traffic, step through code, modify the DOM, and more! To learn when we would use each of these features, I'll walk you through my adventures trying to trick Taylor Swift’s website into giving me concert tickets. Instead of reading through all of the JS files in her site and scrolling through hundreds of useless network activity logs, I learned how to use XHR breakpoints, filter network activity by type and domain, and recreate requests with CURL. I'll show you all of these tools and a few other tricks, and by the end of this talk, you will know how to reverse engineer any website and manipulate it to do your bidding.

Transcript

1. Amy Nguyen @amyngyn JSConf AU 2018 Using Chrome Developer Tools to hack your way into concerts
2. Amy Nguyen @amyngyn JSConf AU 2018 Using Chrome Developer Tools to hack your way into concerts please don't actually use this information
3. Amy Nguyen @amyngyn JSConf AU 2018 The Setup • Swifties is selling tickets to Taylor Swift's concert! • The users who watch her music video the most will be first in line to buy tickets. • How can we convince Swifties that we have watched the music video more times than we have? • (Based on a true story!)
4. Amy Nguyen @amyngyn JSConf AU 2018 Please raise your hand if you or someone near you can't read the screen! We can increase the font size!
5. Amy Nguyen @amyngyn JSConf AU 2018
6. Amy Nguyen @amyngyn JSConf AU 2018 Can we watch the video faster? • Check out the YouTube IFrame Player API! • Open the Console tab and enter this code: var data = { event: 'command', func: 'setPlaybackRate', args: [2, true] }; var message = JSON.stringify(data); $("#player")[0].contentWindow.postMessage(message, '*');
7. Amy Nguyen @amyngyn JSConf AU 2018 Can we figure out how the site is communicating with the server? • Open the Network tab! • Filter by domain and by XHR domain:127.0.0.1 • Check out the Initiator column for a stacktrace • Look at both the response and the request data
8. Amy Nguyen @amyngyn JSConf AU 2018
9. Amy Nguyen @amyngyn JSConf AU 2018
10. Amy Nguyen @amyngyn JSConf AU 2018
11. Amy Nguyen @amyngyn JSConf AU 2018 Can we repeat requests to the server? • Select "Replay XHR" from the menu to repeat the exact same request!
12. Amy Nguyen @amyngyn JSConf AU 2018 Can we make our own requests to the server? • Copy the request as a cURL command and try changing it!
13. Amy Nguyen @amyngyn JSConf AU 2018 Can we send a valid request to the server? • There's something we're missing. • Where is that ID coming from? • To the Sources tab for debugging!
14. Amy Nguyen @amyngyn JSConf AU 2018 Can we put this all together? • Why can't we get a successful response? • Let's step back and look at the whole timeline of what happens in the lifecycle of our video viewing.
15. Amy Nguyen @amyngyn JSConf AU 2018 Can we automate our solution? 1. Get a unique ID from the Swifties server. 2. Send a request to the start endpoint. 3. Send a request to the count endpoint. 4. Repeat!
16. Amy Nguyen @amyngyn JSConf AU 2018 Can we prevent us from happening? • CAPTCHAs • Randomize the DOM • Input validation and detection • Shadow banning
17. Amy Nguyen @amyngyn JSConf AU 2018 What happened in the end? • I didn't get shadow banned! • I got a high priority position in the sale. • I forgot that I'd have to pay money at some point. • I got offered an internship at TicketMaster?????? • I got to give this talk!
18. Amy Nguyen @amyngyn JSConf AU 2018 It's all about asking questions and being curious. • Can we watch the video faster? • Can we figure out how the site is communicating with the server? • Can we repeat requests to the server? • Can we make our own requests to the server? • Can we send a valid request to the server? • Can we put this all together? • Can we automate our solution? • Can we prevent us from happening?
19. Amy Nguyen @amyngyn JSConf AU 2018 It's all about asking questions and being curious. • Can we watch the video faster? Execute code in the console • Can we figure out how the site is communicating with the server? Filtering out information and debugging intentionally • Can we repeat requests to the server? Replay XHR • Can we make our own requests to the server? Copy as cURL • Can we send a valid request to the server? Request parameters • Can we put this all together? Perseverance! • Can we automate our solution? Scripting • Can we prevent us from happening? Keep asking questions!
20. Amy Nguyen @amyngyn JSConf AU 2018 Thanks! • Homepage: amynguyen.net • Twitter: @amyngyn • Slides: speakerdeck.com/amyngyn • Code: github.com/amyngyn/swifties • Blog post: here (or at medium.com/@amyngyn) • Stripe is hiring: stripe.com/jobs