Using Chrome Developer Tools to get what you want (Nike Tech Talks)

Chrome Developer Tools is magical. It lets you record network traffic, step through code, modify the DOM, and more! To learn how to 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. @amyngyn Nike Tech Talks Using Chrome Developer Tools to get what you want Amy Nguyen Infrastructure Engineer, Stripe July 12, 2018 please don't actually use this information
2. @amyngyn Nike Tech Talks
3. @amyngyn Nike Tech Talks 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. @amyngyn Nike Tech Talks Please raise your hand if you or someone near you can't read the screen! We can increase the font size!
5. @amyngyn Nike Tech Talks
6. @amyngyn Nike Tech Talks 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. @amyngyn Nike Tech Talks Can we figure out how the site is communicating with the server? • Open the Network tab! • Filter by domain and by XHR ◦ domain:localhost • Check out the Initiator column for a stacktrace • Look at both the response and the request data
8. @amyngyn Nike Tech Talks
9. @amyngyn Nike Tech Talks
10. @amyngyn Nike Tech Talks
11. @amyngyn Nike Tech Talks Can we repeat requests to the server? • Select "Replay XHR" from the menu to repeat the exact same request!
12. @amyngyn Nike Tech Talks Can we make our own requests to the server? • Copy the request as a cURL command and try changing it!
13. @amyngyn Nike Tech Talks 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. @amyngyn Nike Tech Talks 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. @amyngyn Nike Tech Talks 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. @amyngyn Nike Tech Talks Can we prevent this from happening at Nike? • CAPTCHAs
17. @amyngyn Nike Tech Talks Can we prevent this from happening at Nike? • CAPTCHAs • Randomize the DOM
18. @amyngyn Nike Tech Talks Can we prevent this from happening at Nike? • CAPTCHAs • Randomize the DOM • Add fake submit buttons
19. @amyngyn Nike Tech Talks Can we prevent this from happening at Nike? • CAPTCHAs • Randomize the DOM • Add fake submit buttons • Shadow banning
20. @amyngyn Nike Tech Talks Can we prevent this from happening at Nike? • CAPTCHAs • Randomize the DOM • Add fake submit buttons • Shadow banning • Validate input
21. @amyngyn Nike Tech Talks • I forgot I'd have to pay money at some point. • I got offered an internship at TicketMaster?????? • I got to give this talk! What happened in the end? • I didn't get shadow banned! • I got a high priority position in the sale.
22. @amyngyn Nike Tech Talks 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 this from happening?
23. @amyngyn Nike Tech Talks 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!
24. @amyngyn Nike Tech Talks 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