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
2. builderscon tokyo 2018 エイミー・グェン @amyngyn 説明 • テイラースウィフトのファンサイトは コンサートのチケットを売っている。 • PVを最も見る人はまずコンサートチケットを 買うができます。 • 私たちは最高のファンですとファンサイトに思わせます。 • これは本当の物語！
3. builderscon tokyo 2018 エイミー・グェン @amyngyn
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, '*');
5. builderscon tokyo 2018 エイミー・グェン @amyngyn
6. builderscon tokyo 2018 エイミー・グェン @amyngyn
7. builderscon tokyo 2018 エイミー・グェン @amyngyn
8. builderscon tokyo 2018 エイミー・グェン @amyngyn Replay XHR
9. builderscon tokyo 2018 エイミー・グェン @amyngyn Copy as cURL
10. builderscon tokyo 2018 エイミー・グェン @amyngyn 1. Server から ID を取得する 2. /start に HTTP request を 送って。 3. /count に HTTP request を 送って。 4. 繰り返す！ 答え
11. builderscon tokyo 2018 エイミー・グェン @amyngyn Can we protect our websites?
12. builderscon tokyo 2018 エイミー・グェン @amyngyn Can we protect our websites? CAPTCHA
13. builderscon tokyo 2018 エイミー・グェン @amyngyn Can we protect our websites? Randomized DOM
14. builderscon tokyo 2018 エイミー・グェン @amyngyn Can we protect our websites? Validation
15. builderscon tokyo 2018 エイミー・グェン @amyngyn Can we protect our websites? Shadow banning
16. builderscon tokyo 2018 エイミー・グェン @amyngyn エンディング • shadow ban されませんでした。 • 計画通り！ • 。。。けど高すぎ。 • インターンシップを申し出た？
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
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