あなたが私にしたことを見て、Chrome

Chrome開発者ツールを使用して、テイラースウィフトの次のコンサートのチケットを取得する方法

彼女の今後のコンサートのために、テイラー・スウィフトはTicketmasterと提携して、正当なファンだけがチケットを購入できるようにしました。私はチケットを手に入れるために誠実な仕事をする真のファンだと言いたいのですが…私はコンピューターを持った女性でもあり、チャレンジが好きです。

結局、Chrome開発者ツールを探索するのがとても楽しくなり、学んだことを共有したいと思いました。この投稿で取り上げる内容は次のとおりです。

  • [コンソール]タブからコードを送信する方法
  • [ネットワーク]タブを使用して関連するアクティビティを見つける方法
  • XHRブレークポイント
  • これをまとめて、偽のユーザーアクティビティを作成する

…準備はいいですか? (バックグラウンド)

行の途中、ソースで
ブレークポイントを設定することを知っています
だから時間をかける
準備はいい?

開始する前に、Taylor Swiftのサイトへのアクセスを自動化することは、彼女の利用規約に違反していることをお知らせします。自宅でこれを試してみると、彼女のコンサートに参加する機会を失うかもしれません。

Ticketmasterのシステムでは、チケットを増やすには、tickets.taylorswift.comにログオンし、アクティビティに参加する必要があります。ブーストが多いほど、チケットを購入する機会が得られる可能性が高くなります。活動には、アルバムと商品の購入、ソーシャルメディアへの投稿、彼女のビデオの視聴が含まれます。

Taylor SwiftのTicketmaster Verified Fanポータル

もちろん、大量のお金を費やしたり、テイラースウィフトにソーシャルメディアアカウントへのアクセスを許可したりする必要はありません。各ビデオを最大20回表示できます。私たちの目標は、テイラー・スウィフト/チケットマスターのサーバーに、「Look What You Made Me Do」というホットな混乱を実際に経験することなく、彼女のミュージックビデオを「見る」ことを納得させるスクリプトを書くことです。

なぜなら、彼女のコンサートに参加するためにテイラー・スウィフトの音楽を聞かないように努力したことはまったく理にかなっているからですよね?

すべてが変更されました(要素とコンソール)

「私が知っているのはChromeを開いただけだから
そして、あなたのコードは帰ってくるように見えます
私が書いたのはjQueryだけで、すべてが変更されました

このサイトで遊んでいたときの最初の考えの1つは、「彼女のビデオを2倍高速化して、これをもっと早く実現できるようにしたい」というものでした。修正速度は、youtube.comのビデオ設定の機能です。ただし、埋め込み動画には表示されません。

速度オプション付きのyoutube.comのビデオ

幸いなことに、「youtube embedded video change speed」を検索すると、私がやりたいことを正確に記述したStackOverflowの投稿が見つかりました。 StackOverflowレスポンスのコードは、jQueryを使用して動画のIFrameを選択し、YoutubeのAPIを使用して速度を設定するためにメッセージをPOSTします。

var playingRate = 2;
var data = {
  イベント:「コマンド」、
  func: 'setPlaybackRate'、
  args:[playbackRate、true]
};
var message = JSON.stringify(data);
$( '#iframe1')[0] .contentWindow.postMessage(message、 '*');
エラーメッセージを使用して、tickets.taylorswift.com内に貼り付けられたJavaScript

上記のスクリーンショットに示すように、エラーが発生します。このエラーは、おそらく彼女がIFrameのIDとして#iframe1を使用していないためです。これで、Elementsタブを使用して、Youtube IFrameのIDを見つけることができます。以前に[要素]タブを使用したことがない場合に、IDを見つける方法は次のとおりです。

  • Command / ctrl + fで「iframe」を検索します。サイトには複数のIFrameがあるので、ビデオが含まれているIFrameを把握するには、少し読んでください。ソースとしてyoutube.comにリンクするものです。
埋め込みyoutubeビデオのiframe
  • command / ctrl + shift + cを使用して「Inspect Element Mode」に入り、Youtubeビデオをクリックすることもできます。頻繁にこのホットキーを使用して、興味のあるものを直接クリックします。
  • 一般に、要素を右クリックして「検査」を選択できますが、これはYouTube動画では機能しません。ただし、サイトの他の要素で試してみてください!

何をするにしても、Youtube IFrameのIDは実際には#frameであり、StackOverflowコードを変更してそれを反映することができます。ミュージックビデオの再生ボタンを押して、テイラースウィフトをシマリスの形で聴きます。 2倍の速さでブーストを取得できるようになりましたが、クリックや入力は以前よりはるかに多くなりました。

これはそれほど進歩しているようには見えませんが、別のサイト内で独自のコードを実行する方法や要素をナビゲートする方法の例としてそれを含めたかったのです。これが私が開発者ツールを定期的に開く主な理由です。以前にツールを使用したことがない場合は、学ぶ価値があります。

どのように女の子を得るか(ネットワーク活動を調べる)

そして、あなたは言う、あなたのエンドポイントをより良くしたり、より良くしたい
私は永遠に待ちます
サイトを壊して、AJAXを元に戻します
私は永遠に待ちます

そのため、平均的な訪問者よりも早く手動でミュージックビデオを視聴できることがわかりましたが、それだけでは十分ではありません。次にやりたいことは、サイトがどのようにビューを記録するかを把握することでした。ビューが完了したことをサイトがサーバーに伝える方法がわかっている場合は、同じメッセージをサーバーに送り返すことができます。

[ネットワーク]タブを開いてミュージックビデオを再生すると、大量のネットワークアクティビティが発生します。

ネットワーク活動の洪水

これは理にかなっています。YouTubeから動画をストリーミングしており、もちろんGoogleはアクティビティを追跡したいからです。ここを初めて見たとき、関連するものを見つけようとして各行をスクロールしました。間違いなく干し草の山の状況での針です。私は彼女のビデオを何度も再生して、新しいアクティビティがいつ現れるかを確認しようとしました!

次に、上部にあるすべてのフィルターに気付きました!左上に、フィルタリングするテキストを追加できます。たとえば、「domain:tickets.taylorswift.com」は、YoutubeやGoogleのDoubleClickサーバーではなく、Taylorのサイトへのネットワークアクティビティのみを表示します。 「XHR」を選択して、サイトからの画像やCSSなどのリソースの要求を無視することもできます。 「XHR」はXMLHttpRequestの略で、AJAX呼び出しを行うときに使用するものを意味します。 *手を振るのは、インターネットに関することをあまり知らないからです*ポイントは、XHRのアクティビティに関心があり、他のタイプのアクティビティには関心がないことです。

domain:tickets.taylorswift.comでフィルタリングされたネットワークアクティビティ

したがって、「domain:tickets.taylorswift.com」とXHRでフィルタリングすると、いくつかの興味深いアクティビティが見られます。 countという名前のエンドポイントがあります!

(表示されない場合は、ミュージックビデオを開始して約2分間再生するようにしてください。時間のために、これを見つける方法については説明しませんが、基本的にはコードを作成し、読み込んだ動画の量を確認する場所を見つけます。)

「count」のエントリをクリックして、ヘッダーと応答を確認します。

/ watch / countエンドポイントのHTTPヘッダー

「一般」セクションでは、これがhttps://tickets.taylorswift.com/watch/countへの成功したPOSTであることがわかります。上部の[応答]タブ(ヘッダーとプレビューの横に表示されます)に、{"success":true}というJSON応答が表示されます。

おもしろいことに、私は彼女のサイトをあまりにも突っ込んでしまったので、応答タブのスクリーンショットを共有できません。今は{“ success”:false}しか取得できないからです。しかし、教育目的でこれを行っているため、それは問題ありません。

とにかく、カウントを記録するためにサイトが使用するエンドポイントとフォーマットがわかったので、このネットワークリクエストを再度送信して、何が起こるか見てみませんか?

左側の「カウント」行を右クリックして、「コピー」>「cURLとしてコピー」に進みます。これは素晴らしいことではありませんか!?このプロジェクトを始める前に、ネットワークリクエストをcURLコマンドにコピーできるとは知りませんでした!誰かが私を止めてこの素晴らしい機能を指摘する前に、私はすべてのヘッダーを手動で入力しようとしていました。

ネットワークアクティビティの記録をcURLコマンドとしてコピーする方法

これで、ターミナルを開いて、無謀な放棄とともにcURLコマンドを入力できます。残念ながら、{“ success”:true}応答は得られません!

cURLコマンドが失敗しました

理由は、もちろん、誰かが同じネットワーク要求をコピーして繰り返し入力する可能性があるという事実をTicketmasterが説明しているためです。彼らは各リクエストにユニークなIDを追加しました!上のスクリーンショットのフォームデータで、または貼り付けたcURLコマンドの最後の方で確認できます。

ジャンプしてから落ちる(XHRブレークポイント)

おっ、ああ、私はあなたにブレークポイントが必要です
恐れないでください
走って、壊れて、走って、私に侵入する

各リクエストに一意のIDが添付されていないと、/ watch / countエンドポイントに有効なビューを送信できません。この時点で、私は困惑しました。このIDはどこから来たのですか?

/ watch / countの呼び出しが行われたときの詳細情報を取得したいので、スタックトレースまたはAJAX呼び出しに関するその他の情報を取得できるかどうかをオンラインで調べました。これにより、通常のブレークポイントと条件付きブレークポイントに加えて、さまざまなインタラクションにブレークポイントを設定できることがわかりました。

/ watch / countにXHRブレークポイントを設定します

[イベントリスナーブレークポイント]メニューでさまざまなイベントを中断できますが、今日の関心はそれではありません。代わりに、「XHRブレークポイント」を追加し、URLに「/ watch / count」が含まれる場合にブレークする必要があります。

ビデオを再度再生すると、ネットワーク要求が発生したときにデバッガーが起動します。

XHRブレークポイントがトリガーされました

右側には、通常のファイル名ではなくVM11101:1で示されているように、JavaScriptの土地にいることがわかります。 Chromeではなく、Ticketmasterの開発者が作成したコードを読みたいので、ここは最も便利な場所ではありません。この段階での私の通常の戦略は、使い慣れたファイル名が見つかるまでコールスタックを調べることです。このポイントに到達して少し下にスクロールすると、より馴染みのあるメソッド名とファイル名が表示され始めます! watch?video_id = music_videoからpostMessageを見つけてクリックし、何か面白いものが見つかるかどうかを確認しました。

ブレークポイントの呼び出しスタックをステップスルーし、一意のIDを見つけました

ジャックポット!行16は、探していた生のIDを示しています!サーバーがこのページを提供するたびに、テンプレートに直接IDが含まれるようです。したがって、このページのリクエストを行う場合、毎回新しいIDを取得する必要があります。これを確認するには、ページを更新し、毎回16行目の値が変化するのを確認します。

この時点で、/ watch / count cURLリクエストを行うたびにIDを交換できる場合、サーバーはカウントを受け入れる可能性があります。私のブレークポイントのおかげで、このIDはまだ使用されていなかったので、サーバーはどのように異なるものを知るのでしょうか?したがって、今すぐ新しいIDを使用して修正されたcURLリクエストを行うと、おそらく動作するでしょう。そして、それはやった! {“ success”:true}応答がありました!

終わったと思った!しかし、大胆不敵なファンなら誰でも知っているように、それは決して簡単でも決して簡単でもありません。決してクリーンなブレークポイントではなく、状態を保存する人はここにはいません。幸いなことに、私の背中のように知っているのはChromeだけです。 (すみません、やめます。それはうそです。決してやめません。)

この時点で、前に使用したのと同じCopy as cURLトリックを使用して、このデータのGETリクエストを作成することにしました。しかし、私が気づいたのは、cURL出力からIDをコピーして/ watch / countにPOSTしようとしたとき、それが機能しないということです!

私が知った瞬間(その他)

コードを見回していると、
しかし、一つ足りないことがありました。
そして、それは私が知った瞬間でした。

最終的に自分が何が欠けているのかを理解するための、非常に励みになるヒントやコツはありません。私はこのプロジェクトについて考えるのをやめるのに数日かかり、私の調査結果を何人かの友人と共有し、最終的には正しい答えを見つけました。上記で示したすべての手法を試しましたが、忍耐力がありました。ブレークポイントを作成し、多数のコードを調べ、ネットワークログを調べました。時には、それが解決策を見つけるのに必要なことです。

最終的に、ビデオが開始されるたびに、POSTが/ watch / startに送信され、{“ started”:true}メッセージが返されることに気付きました。

フィルタリングされたネットワークアクティビティは、ビデオが再生されるたびに/ watch / startをエントリとして表示します

これはおそらく関連性があるとは思いませんでしたが、新しいIDをリクエストし、/ watch / startにPOSTして、/ watch / countにPOSTする前に数分待ってみました。そしてついに、私は本当に成功した応答を得ました!それは、彼らがランダムな人々が偽のビューを投稿するのを防いでいた方法でした!

<深い声>私はいる。

Shake It Off(最終的なヒント)

ハートブレイカーが壊れる、壊れる、壊れる、壊れる、壊れる
そして、偽物は、偽物、偽物、偽物、偽物、偽物になります
ベイビー、私はただ振る、振る、振る、振る、振る、振る

サイトに自動的にPOSTするために作成したスクリプトを共有するつもりはありません。理由は2つあります。1つ目は、テイラースウィフトを既に持っているよりも怒らせたくない(2つ目は、テイラー、愛しています)、2つ目は、彼女のサイトでレート制限を受け、自分のアカウントがミュージックビデオを通常視聴していても、視聴回数が上がらなくなったため、悪い活動のためにシャドー禁止されました。あなたにはそんなことはしたくない! (公平を期すために、私は欲張りになって、毎分リクエストを送信しようとしました。もっと長く、またはより多くの増分で待つとフラグが立てられるとは思いませんでした。または、クッキーまたは何かを更新したかもしれません。なんでも。)

これを自分で試してみるのはおそらく良い考えではありませんが、将来の作業に役立つ可能性のあるスクリプトを作成するのに役立つ素晴らしいツールをいくつか紹介したいと思います。

  • Pythonのリクエストライブラリ:完全に合理的なHTTPライブラリを手元に置いている場合は、bashを行わないでください。
  • Pythex:大量の正規表現ヘルパーがあり、それらはすべて同様の機能を提供します。 Pythonが返す正規表現一致グループの値が表示されるので、これが気に入っています。これは、生の一意のIDを解析するのに役立ちました。
  • curl.trillworks.com:ここにcURLコマンドを貼り付けると、Pythonコードで吐き出されます!とても便利!

今後のデバッグアドベンチャーで役立つChromeのヒントを少なくとも1つ共有してください。または、これらのすべてを既に知っている場合は、少なくとも実際の問題に対するTaylor SwiftとこのChromeの適用について学ぶことを楽しんでいただければ幸いです。