크롬, 내가 한 일을보세요

Chrome 개발자 도구를 사용하여 Taylor Swift의 다음 콘서트 티켓을 얻는 방법

다가오는 콘서트를 위해 Taylor Swift는 Ticketmaster와 제휴하여 합법적 인 팬만 티켓을 구매할 수 있도록했습니다. 나는 티켓을 얻기 위해 정직한 일을 할 진정한 팬이라고 말하고 싶지만 컴퓨터를 가진 여성이며 도전을 좋아합니다.

Chrome 개발자 도구를 탐색하면서 많은 즐거움을 얻었고 배운 내용을 공유하고 싶었습니다. 이 게시물에서 다루는 내용은 다음과 같습니다.

  • 콘솔 탭을 통해 코드를 보내는 방법
  • 네트워크 탭을 사용하여 관련 활동을 찾는 방법
  • XHR 중단 점
  • 이 모두를 모아서 가짜 사용자 활동을 만듭니다.

… 준비 되었습니까? (배경)

선 가운데, 소스에서
중단 점을 설정한다는 것을 알고 있습니다.
그래서 나는 내 시간을
준비 되었습니까?

시작하기 전에 Taylor Swift의 사이트에 대한 자동 액세스가 이용 약관에 위배됨을 알려드립니다. 집에서 이것을 시도하면 그녀의 콘서트에 전혀 참석하지 못할 수도 있습니다.

Ticketmaster의 시스템에서, boost.taylorswift.com에 로그온하고 활동을 증가시켜야 부스트를 얻을 수 있습니다. 부스트가 많을수록 티켓을 구입할 가능성이 높아집니다. 활동에는 앨범 및 상품 구매, 소셜 미디어에 게시 및 비디오 시청이 포함됩니다.

Taylor Swift의 Ticketmaster 검증 된 팬 포털

물론 우리는 많은 돈을 쓰거나 Taylor Swift가 소셜 미디어 계정에 액세스하는 것을 원하지 않으므로 뮤직 비디오를 볼 수 있습니다. 각 비디오를 최대 20 번까지 볼 수 있습니다. 우리의 목표는 Taylor Swift / Ticketmaster 서버가 "Look What You Made Me Do"라는 핫 엉망에 빠지지 않고 뮤직 비디오를 "보았 음을"확신시키는 스크립트를 작성하는 것입니다.

우리가 콘서트에 참석하기 위해 Taylor Swift의 음악을 듣지 않기 위해이 모든 노력을 기울인 것이 전적으로 의미가 있기 때문입니다.

변경된 모든 것 (요소 및 콘솔)

‘Chrome을 열었 기 때문에
그리고 당신의 코드는 집에 오는 것처럼 보입니다.
내가 쓴 것은 jQuery 뿐이며 모든 것이 바뀌 었습니다.

이 사이트를 가지고 놀았을 때의 첫 번째 생각 중 하나는 "그녀의 비디오 속도를 2 배나 높여서 더 빨리 처리 할 수 ​​있기를 바랍니다." 삽입 된 비디오에는 표시되지 않습니다.

속도 옵션이있는 youtube.com의 비디오

운 좋게도 "youtube 내장 비디오 변경 속도"를 검색하면 내가 원하는 것을 정확하게 설명하는 StackOverflow 게시물이 생겼습니다. StackOverflow 응답 코드는 jQuery를 사용하여 동영상의 IFrame을 선택한 다음 Youtube의 API를 사용하여 속도를 설정하기 위해 메시지를 게시합니다.

var playbackRate = 2;
var data = {
  이벤트 : '명령',
  func : 'setPlaybackRate',
  인수 : [playbackRate, true]
};
var message = JSON.stringify (data);
$ ( '# iframe1') [0] .contentWindow.postMessage (message, '*');
tickets.taylorswift.com 안에 JavaScript가 붙여진 오류 메시지

위 스크린 샷에서 볼 수 있듯이 오류가 발생합니다. 이 오류는 아마도 # iframe1을 IFrame의 ID로 사용하지 않기 때문입니다. 이제 요소 탭을 사용하여 Youtube IFrame의 ID를 찾을 수 있습니다. 이전에 요소 탭을 사용하지 않은 경우 ID를 찾을 수있는 몇 가지 방법은 다음과 같습니다.

  • Command / Ctrl + f를 누르고 "iframe"을 검색하십시오. 사이트에는 여러 개의 IFrame이 있으므로 비디오가 포함 된 IFrame을 파악하려면 약간의 읽기가 필요합니다. youtube.com을 소스로 연결하는 링크입니다.
임베드 된 YouTube 동영상의 iframe
  • command / ctrl + shift + c를 사용하여“요소 검사 모드”로 들어간 다음 Youtube 비디오를 클릭해도됩니다. 이 단축키를 가장 자주 사용하여 관심있는 항목을 직접 클릭합니다.
  • 일반적으로 요소를 마우스 오른쪽 버튼으로 클릭하고 "검사"를 선택할 수 있지만 Youtube 비디오에서는 작동하지 않습니다. 그러나 사이트의 다른 요소에서 사용해보십시오!

무엇을 하든지 Youtube IFrame의 ID는 실제로 #frame이며 StackOverflow 코드를 변경하여이를 반영 할 수 있습니다. 뮤직 비디오에서 재생을 눌러 다람쥐 형태의 Taylor Swift를 듣습니다. 이제 두 배 더 빠르게 부스트를 얻을 수 있지만 이전보다 더 많은 클릭과 타이핑이 가능합니다.

이것은 많은 진보처럼 들리지 않지만 다른 사이트에서 자신의 코드를 실행하는 방법과 요소를 탐색하는 방법에 대한 예제로 포함하고 싶었습니다. 이것이 내가 정기적으로 개발자 도구를 여는 주된 이유이며, 이전에 도구를 사용해 본 적이 없는지 알아볼 가치가 있습니다.

소녀를 얻는 방법 (시험 네트워크 활동)

그런 다음 엔드 포인트를 더 나쁘게 또는 더 좋게 만들고 싶습니다.
나는 영원히 기다릴 것이다
귀하의 사이트를 중단했습니다. 다시 AJAX를 정리하겠습니다.
나는 영원히 기다릴 것이다

따라서 일반 방문자보다 뮤직 비디오를 수동으로 더 빨리 볼 수 있지만 충분하지 않습니다. 다음으로하고 싶은 것은 사이트가 뷰를 기록하는 방법을 알아내는 것이 었습니다. 사이트가 뷰와 서버와 통신하는 방법을 알면 동일한 메시지를 다시 서버로 보내려고 할 수 있습니다.

네트워크 탭을 열고 뮤직 비디오를 재생할 때 네트워크 활동이 많이 발생합니다.

네트워크 활동의 홍수

YouTube에서 동영상을 스트리밍하고 있으며 물론 Google은 활동을 추적하기를 원하기 때문에 이치에 맞습니다. 처음 여기를 보았을 때, 나는 건초 더미 상황에서 바늘과 관련이있는 것으로 보이는 것을 찾으려고 각 행을 스크롤했습니다. 나는 새로운 활동이 언제 나타날지 보려고 그녀의 비디오를 여러 번 연주했습니다!

그런 다음 상단의 모든 필터를 발견했습니다! 왼쪽 상단에서 필터링 할 텍스트를 추가 할 수 있습니다. 예를 들어 'domain : tickets.taylorswift.com'은 Youtube 또는 Google DoubleClick 서버가 아닌 Taylor의 사이트로가는 네트워크 활동 만 표시합니다. “XHR”을 선택하여 사이트의 이미지 및 CSS와 같은 리소스에 대한 요청을 무시할 수도 있습니다. "XHR"은 XMLHttpRequest의 약자이며, 이는 AJAX 호출시 사용하는 것입니다. 인터넷에 대해 잘 모르기 때문에 손을 흔들며

domain : tickets.taylorswift.com에 대해 필터링 된 네트워크 활동

"domain : tickets.taylorswift.com"및 XHR을 기준으로 필터링하면 흥미로운 활동이 나타납니다. count라는 엔드 포인트가 있습니다!

(보이지 않으면 뮤직 비디오를 시작하고 약 2 분 동안 재생하도록하십시오. 시간을 위해이 방법을 다루지는 않지만 기본적으로 로드 한 동영상의 양을 확인하는 위치를 찾습니다.)

헤더와 응답을 보려면 "count"항목을 클릭하십시오.

/ watch / count 엔드 포인트에 대한 HTTP 헤더

“일반”섹션에서 https://tickets.taylorswift.com/watch/count에 대한 성공적인 POST임을 알 수 있습니다. 상단의 "응답"탭 (헤더 및 미리보기 옆에 표시됨)에서 { "성공": true}라는 JSON 응답이 표시됩니다.

재미있는 점은 지금 그녀의 사이트를 너무 많이 찔러서 응답 탭의 스크린 샷을 공유 할 수 없다는 것입니다. 이제 { "성공": 거짓} 만 표시하기 때문입니다. 하지만 교육 목적으로이 작업을 수행하고 있기 때문에 괜찮습니다.

어쨌든, 우리는 사이트가 카운트를 기록하는 데 사용하는 엔드 포인트와 형식을 알았으므로이 네트워크 요청을 다시 보내고 어떻게되는지 보지 않겠습니까?

왼쪽의 "count"행을 마우스 오른쪽 단추로 클릭하고 복사> cURL로 복사로 이동하십시오. 놀랍지 않나요? 이 프로젝트를 시작하기 전에 네트워크 요청을 cURL 명령으로 복사 할 수 있는지 몰랐습니다! 누군가 나를 막고이 멋진 기능을 지적하기 전에 모든 헤더를 수동으로 입력하려고했습니다.

cURL 명령으로 네트워크 활동 레코드를 복사하는 방법

이제 터미널을 열고 무모한 포기로 cURL 명령을 입력 할 수 있습니다. 불행히도 {성공 ": 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 개발자가 작성한 코드를 읽고 싶기 때문에 가장 유용한 곳은 아닙니다. 이 단계에서 일반적으로 사용하는 전략은 익숙한 파일 이름을 찾을 때까지 호출 스택을 살펴 보는 것입니다. 이 지점에 도달하고 조금 아래로 스크롤하면 더 친숙한 방법과 파일 이름이 표시됩니다. watchMessage? video_id = music_video에서 postMessage를보고 클릭하여 흥미로운 것을 찾을 수 있는지 확인했습니다.

중단 점에 대한 호출 스택을 단계별로 실행하고 고유 ID를 찾았습니다.

공동 자금! 16 행은 우리가 찾고 있던 원시 ID를 보여줍니다! 서버가이 페이지를 제공 할 때마다 템플릿에 ID가 직접 포함 된 것처럼 보입니다. 따라서이 페이지를 요청하면 매번 새로운 ID를 받아야합니다. 페이지를 새로 고치고 매번 16 행의 값이 변경되는 것을 확인하여이를 확인할 수 있습니다.

이 시점에서 / watch / count cURL 요청을 할 때마다 ID를 바꿀 수 있다면 서버가 카운트를 수락 할 수 있습니다. 내 중단 점으로 인해이 ID는 아직 사용되지 않았으므로 서버는 어떻게 다른 점을 알 수 있습니까? 따라서 새로운 ID로 수정 된 cURL 요청을하면 제대로 작동 할 것입니다. 그리고 그것은했다! 나는 { "성공": true} 응답을 받았습니다!

나는 끝났다고 생각했다! 그러나 Fearless 팬이라면 알 수 있듯이 결코 간단하지 않습니다. 깨끗한 중단 점은 없습니다. 여기에 아무도 상태를 저장하지 않습니다. 운 좋게도 크롬은 내가 손등으로 알고있는 유일한 것입니다. (죄송합니다. 그만하겠습니다. 거짓말입니다. 절대 멈추지 않을 것입니다.)

이 시점에서 필자는 앞에서 사용한 cURL 트릭과 동일한 Copy를 사용하여이 데이터에 대한 GET 요청을 작성하기로 결정했습니다. 그러나 내가 발견 한 것은 cURL 출력에서 ​​ID를 복사하고 / watch / count에 POST를 시도하면 작동하지 않는다는 것입니다.

내가 아는 순간 (기타)

코드를 둘러 보면서
그러나 한 가지 빠진 것이 있습니다.
그리고 내가 아는 순간이었습니다.

나는 내가 잃어버린 것을 어떻게 알아 냈는지에 대한 조언과 요령이 없습니다. 나는이 프로젝트에 대한 생각을 멈추고 친구들과 결과를 공유하기까지 며칠이 걸렸으며 결국 정답에 도달했습니다. 나는 위에 보여준 모든 기술을 시도했지만 인내심으로. 중단 점을 작성하고 많은 코드를 살펴본 후 네트워크 로그를 살펴 보았습니다. 때로는 솔루션을 찾는 데 필요한 것입니다.

결국 비디오가 시작될 때마다 POST가 / watch / start로 전송되고 { "started": true} 메시지가 다시 전송되는 것을 알았습니다.

필터링 된 네트워크 활동은 비디오를 재생할 때마다 / watch / start를 항목으로 표시합니다.

이것이 적절하지는 않다고 생각했지만 새 ID를 요청하고 / watch / start로 POST 한 다음 / watch / count에 POST하기 전에 몇 분 동안 기다렸습니다. 그리고 마침내 나는 진짜 성공적인 응답을 얻었다! 그것이 무작위 사람들이 가짜 조회를 게시하지 못하게하는 방법이었습니다!

<딥 보이스> 들어 왔습니다

흔들 리다 (최종 팁)

가슴 아픈 사람들이 부서지다
그리고 가짜는 가짜, 가짜, 가짜, 가짜, 가짜
자기야, 난 그냥 흔들어 흔들어 흔들어 흔들어

필자는 자동으로 사이트에 POST하기 위해 작성한 스크립트를 공유하지 않을 것입니다. 나는 두 가지 이유가 있습니다. 첫째, 나는 이미 가지고있는 것보다 더 많은 Taylor Swift를 화나게하고 싶지 않습니다 (Hi Taylor가 당신을 사랑합니다). 그리고 두 번째로, 나는 그녀의 사이트에 의해 속도가 제한되어 있고 내 계정이 의심됩니다. 뮤직 비디오를 정상적으로 볼 때도 더 이상 성공적인 시청을 얻지 못하기 때문에 나쁜 활동으로 인해 그림자로 금지되었습니다. 나는 당신에게 그것을하고 싶지 않습니다! (공평하게, 나는 탐욕스럽고 매분마다 요청을 보내려고 노력했다. 더 길거나 더 다양한 증분으로 기다렸다면 깃발이 걸렸을 것이라고 생각하지 않는다. 또는 쿠키 나 무언가를 새로 고칠 수있다. 나는 새로운 계정을 만들었다. 도대체 무엇이.)

직접 시도해 보는 것은 좋지 않지만 향후 작업에 유용 할 수있는 스크립트를 작성하는 데 도움이되는 훌륭한 도구에 대해 언급하고 싶습니다.

  • Python의 요청 라이브러리 : 완전히 합리적인 HTTP 라이브러리를 보유하고있을 때 강타 당하지 마십시오.
  • Pythex : 수많은 정규 표현식 도우미가 있으며 모두 비슷한 기능을 제공합니다. 파이썬이 반환 할 정규 표현식 일치 그룹의 가치를 보여주기 때문에 이것을 좋아합니다. 이는 원시 고유 ID를 구문 분석하는 데 도움이되었습니다.
  • curl.trillworks.com : 여기에 cURL 명령을 붙여 넣으면 파이썬 코드로 다시 뱉어집니다! 너무 편리합니다!

향후 디버깅 모험에 도움이되는 크롬 팁을 하나 이상 공유했으면합니다. 또는 이미이 모든 것을 알고 있다면 Taylor Swift와 Chrome의 실제 응용 프로그램에 대해 배우는 것이 좋았기를 바랍니다.