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
   

   View Slide

2. @amyngyn Nike Tech Talks
   

   View Slide

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!)
   

   View Slide

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!
   

   View Slide

5. @amyngyn Nike Tech Talks
   

   View Slide

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, '*');
   

   View Slide

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
   

   View Slide

8. @amyngyn Nike Tech Talks
   

   View Slide

9. @amyngyn Nike Tech Talks
   

   View Slide

10. @amyngyn Nike Tech Talks
    

    View Slide

11. @amyngyn Nike Tech Talks
    Can we repeat requests to the server?
    ● Select "Replay XHR" from the menu to repeat the exact
    same request!
    

    View Slide

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!
    

    View Slide

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!
    

    View Slide

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.
    

    View Slide

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!
    

    View Slide

16. @amyngyn Nike Tech Talks
    Can we prevent this from happening at Nike?
    ● CAPTCHAs
    

    View Slide

17. @amyngyn Nike Tech Talks
    Can we prevent this from happening at Nike?
    ● CAPTCHAs
    ● Randomize the DOM
    

    View Slide

18. @amyngyn Nike Tech Talks
    Can we prevent this from happening at Nike?
    ● CAPTCHAs
    ● Randomize the DOM
    ● Add fake submit buttons
    

    View Slide

19. @amyngyn Nike Tech Talks
    Can we prevent this from happening at Nike?
    ● CAPTCHAs
    ● Randomize the DOM
    ● Add fake submit buttons
    ● Shadow banning
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

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?
    

    View Slide

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!
    

    View Slide

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
    

    View Slide