Using Chrome Developer Tools to hack your way into concerts (builderscon tokyo)

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. builderscon tokyo 2018
   エイミー・グェン @amyngyn
   Chromeデベロッパー
   ツールのハック
   Using Chrome Developer Tools to
   hack your way into concerts
   

   View Slide

2. builderscon tokyo 2018
   エイミー・グェン @amyngyn
   説明
   ● テイラースウィフトのファンサイトは
   コンサートのチケットを売っている。
   ● PVを最も見る人はまずコンサートチケットを
   買うができます。
   ● 私たちは最高のファンですとファンサイトに思わせます。
   ● これは本当の物語！
   

   View Slide

3. builderscon tokyo 2018
   エイミー・グェン @amyngyn
   

   View Slide

4. builderscon tokyo 2018
   エイミー・グェン @amyngyn
   もっと早く見るができますか?
   ● YouTube IFrame Player API
   ● Consoleを開けて：
   var data = {
   event: 'command',
   func: 'setPlaybackRate',
   args: [2, true]
   };
   var message = JSON.stringify(data);
   $("#player")[0].contentWindow.postMessage(message, '*');
   

   View Slide

5. builderscon tokyo 2018
   エイミー・グェン @amyngyn
   

   View Slide

6. builderscon tokyo 2018
   エイミー・グェン @amyngyn
   

   View Slide

7. builderscon tokyo 2018
   エイミー・グェン @amyngyn
   

   View Slide

8. builderscon tokyo 2018
   エイミー・グェン @amyngyn
   Replay XHR
   

   View Slide

9. builderscon tokyo 2018
   エイミー・グェン @amyngyn
   Copy as cURL
   

   View Slide

10. builderscon tokyo 2018
    エイミー・グェン @amyngyn
    1. Server から ID を取得する
    2. /start に HTTP request を 送って。
    3. /count に HTTP request を 送って。
    4. 繰り返す！
    答え
    

    View Slide

11. builderscon tokyo 2018
    エイミー・グェン @amyngyn
    Can we protect our websites?
    

    View Slide

12. builderscon tokyo 2018
    エイミー・グェン @amyngyn
    Can we protect our websites? CAPTCHA
    

    View Slide

13. builderscon tokyo 2018
    エイミー・グェン @amyngyn
    Can we protect our websites? Randomized DOM
    

    View Slide

14. builderscon tokyo 2018
    エイミー・グェン @amyngyn
    Can we protect our websites? Validation
    

    View Slide

15. builderscon tokyo 2018
    エイミー・グェン @amyngyn
    Can we protect our websites? Shadow banning
    

    View Slide

16. builderscon tokyo 2018
    エイミー・グェン @amyngyn
    エンディング
    ● shadow ban されませんでした。
    ● 計画通り！
    ● 。。。けど高すぎ。
    ● インターンシップを申し出た？
    

    View Slide

17. builderscon tokyo 2018
    エイミー・グェン @amyngyn
    結論
    ● Tools
    ○ Execute code in the console
    ○ Filter network requests by type
    ○ Replay XHR requests
    ○ Copy requests as cURL
    ● Mentality
    ○ Perseverance
    ○ Curiosity
    ○ Resourcefulness
    

    View Slide

18. builderscon tokyo 2018
    エイミー・グェン @amyngyn
    ありがとうございます！
    ● ホームページ： amynguyen.net
    ● ツイッター： @amyngyn
    ● Slides: speakerdeck.com/amyngyn
    ● Code: github.com/amyngyn/swifties
    ● 英語ブログポスト： medium.com/@amyngyn
    ● Stripe Japan: stripe.com/jobs#location=tokyo
    

    View Slide