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
   

   View Slide

2. Amy Nguyen @amyngyn JSConf AU 2018
   Using Chrome Developer Tools
   to hack your way into concerts
   please don't actually use this information
   

   View Slide

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

   View Slide

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!
   

   View Slide

5. Amy Nguyen @amyngyn JSConf AU 2018
   

   View Slide

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

   View Slide

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
   

   View Slide

8. Amy Nguyen @amyngyn JSConf AU 2018
   

   View Slide

9. Amy Nguyen @amyngyn JSConf AU 2018
   

   View Slide

10. Amy Nguyen @amyngyn JSConf AU 2018
    

    View Slide

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!
    

    View Slide

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!
    

    View Slide

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!
    

    View Slide

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.
    

    View Slide

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!
    

    View Slide

16. Amy Nguyen @amyngyn JSConf AU 2018
    Can we prevent us from happening?
    ● CAPTCHAs
    ● Randomize the DOM
    ● Input validation and detection
    ● Shadow banning
    

    View Slide

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!
    

    View Slide

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?
    

    View Slide

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!
    

    View Slide

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
    

    View Slide