Как использовать инструменты разработчика Chrome, чтобы купить билеты на следующий концерт Тейлор Свифт

Для своего предстоящего концерта Тейлор Свифт стала партнером Ticketmaster, чтобы гарантировать, что только законные фанаты могут покупать билеты. Хочу сказать, что я настоящий фанат, который честно выполнит работу, чтобы получить билет ... но я также женщина с компьютером и люблю вызовы.

В итоге я получил массу удовольствия от изучения инструментов разработчика Chrome, и я хотел поделиться тем, что я узнал. Вот что мы расскажем в этом посте:

  • Как отправить код через вкладку Консоль
  • Как использовать вкладку Сеть, чтобы найти соответствующую активность
  • Точки останова XHR
  • Собираем все это вместе, чтобы создать фальшивую активность пользователя

… Готовы к этому? (Фон)

В середине строк в вашем исходном коде
Я знаю, что собираюсь установить точку останова
Так что я не тороплюсь
Готовы ли вы к этому?

Прежде чем мы начнем, я хочу напомнить вам, что автоматизация доступа к сайту Тейлор Свифт противоречит ее Условиям использования. Если вы попробуете это дома, вы можете вообще потерять шанс побывать на ее концерте.

В системе Ticketmaster вы должны войти на Tickets.taylorswift.com и участвовать в мероприятиях, чтобы получать бонусы. Чем больше у вас бонусов, тем больше у вас шансов купить билет. Мероприятия включают покупку альбома и товаров, размещение сообщений в социальных сетях и просмотр ее видео.

Конечно, мы не хотим тратить кучу денег или предоставлять Тейлор Свифт доступ к нашим аккаунтам в социальных сетях, поэтому нам остается только просматривать музыкальные клипы. Вы можете просматривать каждое видео до 20 раз. Наша цель - написать сценарий, который убедит серверы Тейлор Свифт / Ticketmaster в том, что мы «смотрели» ее музыкальный видеоклип, даже не просидев в беспорядке, который называется «Посмотри, что ты заставил меня сделать».

Потому что совершенно логично, что мы приложили все усилия, чтобы не слушать музыку Тейлор Свифт ради того, чтобы побывать на ее концерте, верно?

Все изменилось (элементы и консоль)

’Потому что все, что я знаю, это то, что мы открыли Chrome
И ваш код выглядит так, будто возвращается домой
Все, что я написал, - это какой-то jQuery, все изменилось

Одна из моих первых мыслей, когда я играл с сайтом, было: «Хотел бы я ускорить ее видео в 2 раза, чтобы я мог быстрее пройти через это». Измененная скорость - это функция в настройках видео на youtube.com, но она не отображается во встроенных видео.

К счастью, поиск по запросу скорость смены встроенного видео на YouTube привел к сообщению на StackOverflow, описывающему именно то, что я хотел сделать. Код ответа StackOverflow использует jQuery для выбора IFrame видео, а затем отправляет ему сообщение POST для установки скорости с помощью API Youtube:

var playbackRate = 2;
var data = {
  event: 'command',
  func: 'setPlaybackRate',
  args: [playbackRate, true]
};
var message = JSON.stringify(data);
$('#iframe1')[0].contentWindow.postMessage(message, '*');

Как показано на скриншоте выше, мы получаем ошибку. Эта ошибка вызвана тем, что она, вероятно, не использует # iframe1 в качестве идентификатора своего IFrame. Теперь мы можем использовать вкладку «Элементы», чтобы найти идентификатор ее Youtube IFrame. Вот несколько способов узнать идентификатор, если вы раньше не использовали вкладку «Элементы»:

  • Command / ctrl + f и найдите «iframe». Обратите внимание, что на сайте есть несколько IFrames, поэтому вам нужно немного прочитать, чтобы выяснить, какой из них содержит видео. Это тот, который ссылается на youtube.com в качестве источника.

  • Вы также можете войти в «Режим проверки элемента», используя команду / ctrl + shift + c, а затем щелкнуть видео Youtube. Я использую эту горячую клавишу чаще всего, чтобы нажимать непосредственно на то, что меня интересует.
  • Как правило, вы можете щелкнуть элементы правой кнопкой мыши и выбрать «Проверить», но это не работает с видео на Youtube. Тем не менее, попробуйте его на других элементах сайта!

Что бы вы ни делали, вы должны увидеть, что идентификатор Youtube IFrame на самом деле #frame, и вы можете изменить код StackOverflow, чтобы отразить это. Нажмите кнопку воспроизведения на музыкальном видео, чтобы послушать Тейлор Свифт в образе бурундука. Теперь вы можете получать ускорения в два раза быстрее, но с гораздо большим количеством щелчков и набора текста, чем раньше.

Это не похоже на большой прогресс, но я хотел включить его в качестве примера того, как запускать собственный код внутри другого сайта и как перемещаться по элементам. Это основная причина, по которой я регулярно открываю Инструменты разработчика, и о нем стоит узнать, если вы раньше не использовали эти инструменты.

Как получить девушку (изучение сетевой активности)

А потом вы говорите: "Я хочу, чтобы ваши конечные точки были хуже или лучше"
Я буду ждать вечно
Ваш сайт сломался, я снова соберу AJAX
Я бы подождал во веки веков

Итак, мы выяснили, что можем вручную посмотреть музыкальное видео быстрее, чем обычный посетитель, но этого недостаточно. Следующее, что я хотел сделать, это выяснить, как сайт записывает представление. Если мы знаем, как сайт сообщает серверу о завершении просмотра, мы можем попытаться отправить те же сообщения обратно на сервер.

Когда я открываю вкладку «Сеть» и проигрываю музыкальное видео, я получаю поток сетевой активности.

Это имеет смысл, потому что мы транслируем видео с Youtube, и, конечно же, Google хочет отслеживать нашу активность. В первый раз, когда я заглянул сюда, я пролистал каждую строку, пытаясь найти что-нибудь подходящее - определенно иголку в стоге сена. Я столько раз смотрел ее видео, пытаясь увидеть, когда появится новое занятие!

Потом я заметил все фильтры вверху! В левом верхнем углу вы можете добавить текст для фильтрации. Например, «domain: Tickets.taylorswift.com» будет отображать сетевую активность только на сайте Тейлора, а не на Youtube или серверах DoubleClick от Google. Вы также можете выбрать «XHR», чтобы игнорировать запросы ресурсов, таких как изображения и CSS, с ее сайта. «XHR» означает XMLHttpRequest, что означает нечто такое, что вы используете при выполнении вызова AJAX. * машет рукой, потому что я не очень разбираюсь в интернет-материалах * Дело в том, что нас волнует активность XHR, а не другие виды активности.

Поэтому, когда мы фильтруем по «домену: Tickets.taylorswift.com» и XHR, мы видим интересную активность. Есть конечная точка с именем count!

(Если вы его не видите, убедитесь, что вы запустили музыкальный видеоклип и дайте ему проиграть примерно 2 минуты. Ради экономии времени я не буду рассказывать, как его найти, но в основном вы можете прочитать код и найдите, где он проверяет, сколько видео вы загрузили.)

Щелкните запись для «подсчета», чтобы увидеть ее заголовки и ответ.

В разделе «Общие» мы видим, что это был успешный POST на https://tickets.taylorswift.com/watch/count. На вкладке «Ответ» вверху (вы можете увидеть его рядом с заголовками и предварительным просмотром) вы должны увидеть ответ в формате JSON с надписью {«success»: true}.

Забавно то, что я так часто совал ее сайт, что не могу поделиться снимком экрана с вкладкой ответа, потому что теперь я получаю только {"success": false}. Но это нормально, потому что мы делаем это в образовательных целях.

В любом случае, теперь, когда мы знаем конечную точку и формат, которые сайт использует для записи счетчиков, почему бы нам не попробовать отправить этот сетевой запрос еще раз и не посмотреть, что произойдет?

Щелкните правой кнопкой мыши строку «count» слева и выберите Копировать ›Копировать как cURL. Разве это не потрясающе !? Я не знал, что могу скопировать сетевой запрос в команду cURL, прежде чем начал работать над этим проектом! Я собирался вручную ввести все заголовки, прежде чем кто-нибудь остановит меня и не укажет на эту замечательную функцию.

Теперь мы можем открыть терминал и безрассудно ввести команду cURL. К сожалению, вы не получите ответа {"success": true}!

Причина в том, что Ticketmaster, конечно, учел тот факт, что кто-то может просто скопировать один и тот же сетевой запрос и вводить его снова и снова. Они добавляли уникальный идентификатор к каждому запросу! Вы можете увидеть это в данных формы на нескольких снимках экрана выше или ближе к концу вставленной вами команды cURL.

Перейти, затем падение (точки останова XHR)

Ой, ты мне нужны точки останова
Не бойся, пожалуйста
Беги, ломайся, беги и врывайся в меня

Без уникального идентификатора, прикрепленного к каждому запросу, мы не сможем отправлять действительные представления в конечную точку / watch / count. В этот момент я был в тупике. Откуда взялось это удостоверение личности?

Я хотел получить больше информации о том, когда выполняется вызов / watch / count, поэтому я порылся в Интернете, чтобы узнать, могу ли я каким-то образом получить трассировку стека или любую другую информацию о вызове AJAX. Вот как я узнал, что в дополнение к обычным и условным точкам останова вы можете устанавливать точки останова для множества различных взаимодействий!

В меню «Точки останова прослушивателя событий» можно выделить множество различных событий, но сегодня нас это не интересует. Вместо этого мы хотим добавить «точку останова XHR» и прерывать, когда URL-адрес содержит «/ watch / count».

Когда мы снова проиграем видео, отладчик запустится при поступлении сетевого запроса.

Справа вы увидите, что мы находимся в области JavaScript, как показано на VM11101: 1 вместо обычного имени файла. Это не самое полезное место, поскольку мы хотим читать код, написанный разработчиками Ticketmaster, а не Chrome. Моя обычная стратегия на этом этапе - просматривать стек вызовов, пока не найду знакомое имя файла. Если вы дойдете до этой точки и немного прокрутите вниз, вы начнете видеть более знакомые методы и имена файлов! Я увидел сообщение postMessage от watch? Video_id = music_video и нажал на него, чтобы посмотреть, смогу ли я найти что-нибудь интересное.

Джекпот! Строка 16 показывает необработанный идентификатор, который мы искали! Похоже, что каждый раз, когда сервер обслуживает эту страницу, он включает идентификатор прямо в шаблон. Поэтому, если мы делаем запрос для этой страницы, мы должны каждый раз получать новый идентификатор. В этом можно убедиться, обновляя страницу и каждый раз наблюдая за изменением значения строки 16.

На этом этапе вы можете подумать, что если мы сможем менять идентификатор каждый раз, когда делаем наш / watch / count cURL-запрос, сервер может принять наш счет. Благодаря моей точке останова этот идентификатор еще не использовался, так как сервер узнает что-то другое? Поэтому, если я сейчас сделаю измененный запрос cURL со свежим идентификатором, возможно, это сработает. Так оно и было! Я получил ответ {"success": true}!

Я думал, что закончил! Но, как знает любой фанат Fearless, это никогда не бывает просто, никогда не бывает легко. Никогда не было чистой точки останова, здесь некому сохранять состояние. К счастью, Chrome - единственное, что я знаю как свои пять пальцев. (Прошу прощения, я остановлюсь. Это ложь. Я никогда не остановлюсь.)

На этом этапе я решил попробовать сделать GET-запросы для этих данных, используя тот же трюк Copy as cURL, который мы использовали ранее. Но я заметил, что когда я скопировал идентификатор из вывода cURL и попытался отправить его в / watch / count, это не сработало!

Момент, который я знал (Разное)

Пока я просматриваю код,
Но чего-то не хватало,
И это был момент, который я понял.

У меня нет очень обнадеживающих советов и приемов, как я в конце концов понял, чего мне не хватало. Мне потребовалось несколько дней, чтобы перестать думать об этом проекте, я поделился своими выводами с друзьями и в конце концов пришел к правильному ответу. Я испробовал все методы, которые показал выше, но с упорством. Я написал точки останова, просмотрел кучу кода и изучил сетевые журналы. Иногда это именно то, что нужно, чтобы найти решение.

В конце концов, я заметил, что каждый раз, когда видео запускается, в / watch / start отправляется POST, и он отправляет обратно сообщение {«start»: true}.

Я не думал, что это может быть актуально, но я попытался запросить новый идентификатор, отправить его в / смотреть / начать с ним, а затем подождать несколько минут перед отправкой в ​​/ смотреть / счет. И вот наконец я получил действительно успешный ответ! Вот как они не позволяли случайным людям размещать фальшивые просмотры!

‹глубокий голос› Я в курсе. ‹/ глубокий голос›

Shake It Off (Заключительные советы)

Сердцеедки будут ломать, ломать, ломать, ломать, ломать
И фальшивки будут фальшивыми, фальшивыми, фальшивыми, фальшивыми, фальшивыми
Детка, я просто буду трясти, трясти, трясти, трясти, встряхнуть

Я не собираюсь делиться сценарием, который я написал для автоматической POST-отправки на сайт. У меня две причины: во-первых, я не хочу злить Тейлор Свифт больше, чем, возможно, уже имел (привет, Тейлор, я люблю тебя), а во-вторых, ее сайт ограничил мою скорость, и у меня есть подозрение, что моя учетная запись был забанен теневым баном за плохую активность, потому что я больше не получаю успешных просмотров даже при обычном просмотре музыкального клипа. Я не хочу так поступать с тобой! (Честно говоря, я стал жадным и попытался отправлять запросы каждую минуту. Я не думаю, что меня бы отметили, если бы я ждал дольше или с более разными интервалами. Или, может быть, обновил свои файлы cookie или что-то в этом роде. Я создал новую учетную запись, что бы ни.)

Хотя, вероятно, не стоит пробовать это самостоятельно, я все же хочу упомянуть некоторые замечательные инструменты, которые помогли мне создать мой скрипт, которые вы можете найти полезными для будущей работы:

  • Библиотека запросов Python: не подвергайте себя bash, если у вас в руках вполне разумная библиотека HTTP.
  • Pythex: существует множество помощников по регулярным выражениям, и все они предлагают схожие функции. Мне нравится этот, потому что он покажет вам значение групп соответствия регулярных выражений, которые вернет Python. Это было полезно для анализа необработанного уникального идентификатора.
  • curl.trillworks.com: вы можете вставить сюда команду cURL, и она вернет ее в код Python! Так удобно!

Надеюсь, я поделился хотя бы одним советом по Chrome, который поможет вам в ваших будущих приключениях по отладке! Или, если вы все это уже знали, я надеюсь, вам по крайней мере понравилось узнавать о Тейлор Свифт и этом приложении Chrome для решения реальной проблемы.