Guarda cosa mi hai fatto fare, Chrome

Come utilizzare Chrome Developer Tools per ottenere i biglietti per il prossimo concerto di Taylor Swift

Per il suo prossimo concerto, Taylor Swift ha collaborato con Ticketmaster per garantire che solo i fan legittimi possano acquistare i biglietti. Vorrei dire che sono un vero fan che farà il lavoro onesto per ottenere un biglietto ... ma sono anche una donna con un computer e mi piace una sfida.

Mi sono divertito molto ad esplorare gli Strumenti per sviluppatori di Chrome e volevo condividere ciò che ho imparato. Ecco cosa tratteremo in questo post:

  • Come inviare il codice tramite la scheda Console
  • Come utilizzare la scheda Rete per trovare attività pertinenti
  • Punti di interruzione XHR
  • Mettendo tutto insieme per creare attività dell'utente falso

... Pronto per questo? (Sfondo)

Nel mezzo delle linee, nella tua fonte
So che imposterò un breakpoint
Quindi mi prendo il mio tempo
Sei pronto per questo?

Prima di iniziare, voglio ricordarti che l'automazione dell'accesso al sito di Taylor Swift è contraria alle sue Condizioni d'uso. Se lo provi a casa, potresti perdere la possibilità di assistere al suo concerto.

Nel sistema di Ticketmaster, devi accedere a tickets.taylorswift.com e partecipare alle attività per ottenere boost. Più boost hai, più è probabile che tu abbia la possibilità di acquistare un biglietto. Le attività includono l'acquisto dell'album e della merce, la pubblicazione sui social media e la visione dei suoi video.

Portale dei fan verificato di Ticketmaster di Taylor Swift

Naturalmente, non vogliamo spendere un sacco di soldi o dare a Taylor Swift l'accesso ai nostri account sui social media, quindi non ci resta che guardare i video musicali. Puoi visualizzare ogni video fino a 20 volte. Il nostro obiettivo è quello di scrivere una sceneggiatura che convincerà i server di Taylor Swift / Ticketmaster che abbiamo "guardato" il suo video musicale senza esserci davvero seduti nel caos che è "Guarda cosa mi hai fatto fare".

Perché ha perfettamente senso che avremmo fatto tutto questo sforzo per non ascoltare la musica di Taylor Swift per partecipare al suo concerto, giusto?

Tutto è cambiato (Elements e Console)

Perché tutto quello che so è che abbiamo aperto Chrome
E il tuo codice sembra tornare a casa
Tutto quello che ho scritto è un po 'di jQuery, tutto è cambiato

Uno dei miei primi pensieri quando stavo giocando con il sito è stato: "Vorrei poter accelerare il suo video di 2x in modo da poterlo superare più rapidamente". La velocità modificata è una funzione delle impostazioni dei video su youtube.com, ma non viene mostrato nei video incorporati.

video su youtube.com con opzioni di velocità

Fortunatamente, una ricerca di "velocità di modifica dei video incorporati su YouTube" ha prodotto un post StackOverflow che descrive esattamente cosa volevo fare. Il codice della risposta StackOverflow utilizza jQuery per selezionare l'IFrame del video e quindi invia un messaggio per impostare la velocità utilizzando l'API di Youtube:

var playbackRate = 2;
var data = {
  evento: 'comando',
  func: 'setPlaybackRate',
  args: [playbackRate, true]
};
var message = JSON.stringify (data);
$ ('# iframe1') [0] .contentWindow.postMessage (messaggio, '*');
JavaScript incollato in tickets.taylorswift.com con messaggio di errore

Come mostrato nello screenshot sopra, viene visualizzato un errore. Questo errore è dovuto al fatto che probabilmente non sta usando # iframe1 come ID dell'IFrame. Ora possiamo usare la scheda Elementi per trovare l'ID per il suo IFrame di Youtube. Ecco alcuni modi in cui potresti trovare l'ID, nel caso in cui non avessi mai usato la scheda Elementi prima:

  • Comando / ctrl + f e cerca “iframe”. Nota che ci sono più IFrame nel sito, quindi devi fare un po 'di lettura per capire quale contiene il video. È quello che si collega a youtube.com come fonte.
l'iframe per il video di YouTube incorporato
  • È inoltre possibile accedere a "Ispeziona modalità elemento" utilizzando il comando / ctrl + maiusc + c e quindi fare clic sul video di Youtube. Uso questo tasto di scelta rapida più frequentemente per fare clic direttamente su ciò che mi interessa.
  • In generale, puoi fare clic con il pulsante destro del mouse sugli elementi e selezionare "Ispeziona", ma questo non funziona sui video di Youtube. Provalo su altri elementi del sito, però!

Qualunque cosa tu faccia, dovresti vedere che l'ID per l'IFrame di Youtube è in realtà #frame e puoi cambiare il codice StackOverflow per riflettere quello. Premi play sul video musicale per ascoltare Taylor Swift in forma di chipmunk. Ora puoi ottenere boost due volte più velocemente ma con molti più clic e digitazioni rispetto a prima.

Questo non suona come un sacco di progressi, ma volevo includerlo come esempio di come eseguire il proprio codice all'interno di un altro sito e come navigare tra gli elementi. Questo è il motivo principale per cui apro gli Strumenti per gli sviluppatori su base regolare e vale la pena sapere se non hai mai utilizzato gli strumenti in precedenza.

Come ottieni la ragazza (esaminando l'attività di rete)

E poi dici che voglio i tuoi endpoint nel bene e nel male
Aspetterei per sempre
Ho rotto il tuo sito, rimetterò insieme AJAX
Aspetterei per sempre

Quindi abbiamo capito che possiamo guardare manualmente il video musicale più velocemente del visitatore medio, ma non è abbastanza buono. La prossima cosa che volevo fare era capire come il sito registra una vista. Se sappiamo come il sito comunica al server che una vista è stata completata, possiamo provare a inviare gli stessi messaggi al server.

Quando apro la scheda Rete e riproduco il video musicale, ricevo un flusso di attività di rete.

un diluvio di attività di rete

Questo ha senso perché stiamo trasmettendo in streaming un video da Youtube e ovviamente Google vuole tenere traccia della nostra attività. La prima volta che ho guardato qui, ho sfogliato ciascuna delle file cercando di trovare qualcosa che avesse un aspetto rilevante, sicuramente un ago in una situazione di pagliaio. Ho riprodotto il suo video così tante volte cercando di vedere quando sarebbero comparse nuove attività!

Poi ho notato tutti i filtri in alto! In alto a sinistra, puoi aggiungere del testo per filtrare. Ad esempio, "domain: tickets.taylorswift.com" mostrerà solo le attività di rete che vanno al sito di Taylor, piuttosto che ai server Youtube o DoubleClick di Google. Puoi anche selezionare "XHR" per ignorare le richieste di risorse come immagini e CSS dal suo sito. "XHR" sta per XMLHttpRequest, che significa qualcosa che è ciò che usi quando effettui una chiamata AJAX. * agitando la mano perché non so molto delle cose su Internet * Il punto è che ci preoccupiamo dell'attività XHR e di nessun altro tipo di attività.

attività di rete filtrata per dominio: tickets.taylorswift.com

Quindi, quando filtriamo per "dominio: tickets.taylorswift.com" e XHR, vediamo alcune attività interessanti. Esiste un endpoint denominato count!

(Se non lo vedi, assicurati di aver avviato il video musicale e lascialo riprodurre per circa 2 minuti. Per motivi di tempo, non tratterò di come trovarlo, ma in pratica puoi leggere il codice e trova dove controlla la quantità di video che hai caricato.)

Fare clic sulla voce per "contare" per vedere le intestazioni e la risposta.

Intestazioni HTTP per endpoint / watch / count

Nella sezione "Generale", possiamo vedere che questo è stato un POST di successo su https://tickets.taylorswift.com/watch/count. Nella scheda "Risposta" in alto (puoi vederla accanto a Intestazioni e Anteprima), dovresti vedere una risposta JSON che dice {"successo": vero}.

La cosa divertente è che ho spinto così tanto il suo sito da non poter condividere uno screenshot della scheda di risposta, perché ora ottengo solo {"successo": falso}. Ma va bene perché lo stiamo facendo per scopi educativi.

Ad ogni modo, ora che conosciamo l'endpoint e il formato che il sito utilizza per registrare i conteggi, perché non proviamo a inviare di nuovo questa richiesta di rete e vedere cosa succede?

Fare clic con il tasto destro sulla riga "conteggio" sul lato sinistro e selezionare Copia> Copia come cURL. Non è fantastico !? Non sapevo di poter copiare una richiesta di rete in un comando cURL prima di iniziare questo progetto! Stavo per scrivere manualmente tutte le intestazioni prima che qualcuno mi fermasse e facesse notare questa fantastica funzionalità.

come copiare un record di attività di rete come comando cURL

Ora possiamo aprire un terminale ed inserire il comando cURL con abbandono spericolato. Sfortunatamente, non otterrai una risposta {"successo": vero}!

il comando cURL non è riuscito

Il motivo è che Ticketmaster ha, ovviamente, tenuto conto del fatto che qualcuno potrebbe semplicemente copiare la stessa richiesta di rete e inserirla più volte. Hanno aggiunto un ID univoco a ogni richiesta! Puoi vederlo nei dati del modulo alcuni screenshot sopra o verso la fine del comando cURL che hai incollato.

Jump Then Fall (punti di interruzione XHR)

Whoa, oh, ho bisogno dei tuoi punti di interruzione
Non aver paura, per favore
Corri e poi rompi, corri e poi rompi dentro di me

Senza l'ID univoco associato a ciascuna richiesta, non è possibile inviare visualizzazioni valide all'endpoint / watch / count. A questo punto, ero perplesso. Da dove viene questo ID?

Volevo ottenere maggiori informazioni su quando viene effettuata la chiamata / watch / count, quindi ho cercato online per vedere se potevo ottenere in qualche modo uno stacktrace o qualsiasi altra informazione su una chiamata AJAX. È così che ho scoperto che oltre ai punti di interruzione normali e condizionali, è possibile impostare punti di interruzione su molte interazioni diverse!

imposta un breakpoint XHR per / watch / count

Puoi interrompere molti eventi diversi nel menu "Punti di interruzione del listener di eventi", ma non è quello a cui siamo interessati oggi. Invece, vogliamo aggiungere un "punto di interruzione XHR" e interrompere quando l'URL contiene "/ watch / count".

Quando riproduciamo nuovamente il video, il debugger verrà avviato quando si verifica la richiesta di rete.

Punto di interruzione XHR attivato

Sul lato destro, vedrai che siamo nella regione JavaScript, come mostrato da VM11101: 1 invece di un normale nome di file. Questo non è il posto più utile in cui stare, poiché vogliamo leggere il codice scritto dagli sviluppatori di Ticketmaster, non da Chrome. La mia solita strategia in questa fase è quella di guardare attraverso lo stack di chiamate fino a quando non trovo un nome file che sembri familiare. Se raggiungi questo punto e scorri un po 'verso il basso, inizierai a vedere metodi e nomi di file più familiari! Ho visto postMessage da watch? Video_id = music_video e ho cliccato su di esso per vedere se potevo trovare qualcosa di interessante.

è passato attraverso lo stack di chiamate per il punto di interruzione e ha trovato l'ID univoco

Montepremi! La riga 16 mostra l'ID grezzo che stavamo cercando! Sembra che ogni volta che il server serve questa pagina, include l'ID direttamente nel modello. Quindi, se facciamo una richiesta per questa pagina, dovremmo ottenere un nuovo ID ogni volta. Puoi confermarlo aggiornando la pagina e vedendo che il valore della riga 16 cambia ogni volta.

A questo punto, potresti pensare, se possiamo scambiare l'ID ogni volta che facciamo la nostra richiesta / watch / count cURL, il server potrebbe accettare il nostro conteggio. Grazie al mio punto di interruzione, questo ID non era ancora stato utilizzato, quindi come potrebbe il server sapere qualcosa di diverso? Quindi, se faccio una richiesta CURL modificata ora con l'ID fresco, forse funzionerebbe. E lo ha fatto! Ho avuto una risposta {"successo": vero}!

Pensavo di aver finito! Ma, come tutti i fan di Fearless sanno, non è mai semplice, mai facile. Mai un breakpoint pulito, nessuno qui per salvare lo stato. Fortunatamente, Chrome è l'unica cosa che conosco come il palmo delle mie mani. (Mi dispiace, mi fermo. È una bugia. Non mi fermerò mai.)

A questo punto, ho deciso di provare a fare richieste GET per questi dati usando lo stesso trucco Copia come cURL usato in precedenza. Ma quello che ho notato è che quando ho copiato l'ID dall'output di cURL e ho provato a postarlo su / watch / count, non avrebbe funzionato!

The Moment I Knew (Miscellany)

Mentre mi guardo attorno,
Ma mancava una cosa,
E quello è stato il momento che ho saputo.

Non ho trucchi e suggerimenti super incoraggianti su come alla fine ho capito cosa mi mancava. Ho impiegato alcuni giorni per smettere di pensare a questo progetto, ho condiviso le mie scoperte con alcuni amici e alla fine sono arrivato alla risposta giusta. Ho provato tutte le tecniche che ho mostrato sopra, ma con perseveranza. Ho scritto punti di interruzione, ho esaminato un sacco di codice e ho studiato attentamente i registri di rete. A volte, è proprio quello che serve per trovare una soluzione.

Alla fine, ho notato che ogni volta che il video viene avviato, un POST viene inviato a / guarda / start e restituisce un messaggio {"iniziato": vero}.

l'attività di rete filtrata mostra / guarda / inizia come voce ogni volta che viene riprodotto un video

Non pensavo che ciò potesse essere pertinente, ma ho provato a richiedere un nuovo ID, POSTANDO per / guardare / iniziare con esso, e quindi aspettare qualche minuto prima di POSTARE per / guardare / contare. E finalmente ho avuto la mia vera risposta di successo! In questo modo impedivano alle persone a caso di pubblicare visualizzazioni false!

Sono dentro.

Scuotilo (suggerimenti finali)

I rubacuori si spezzano, si rompono, si rompono, si rompono, si rompono
E i falsi finteranno, falso, falso, falso, falso
Baby, ho intenzione di agitare, agitare, agitare, agitare, agitare

Non sto andando al punto di condividere lo script che ho scritto automaticamente POST sul sito. Ho due motivi: in primo luogo, non voglio far incazzare Taylor Swift più di quanto potrei già avere (ciao Taylor, ti amo), e in secondo luogo, ho un tasso limitato dal suo sito e ho il sospetto che il mio account è stato vietato l'ombra per cattive attività perché non riesco più a ottenere visualizzazioni di successo anche quando guardo normalmente il video musicale. Non voglio farti questo! (Per essere onesti, sono diventato avido e ho provato a inviare una richiesta ogni minuto. Non credo che sarei stato segnalato se avessi aspettato più a lungo o con incrementi più vari. O forse avrei aggiornato i miei biscotti o qualcosa del genere. Ho creato un nuovo account, qualunque cosa.)

Anche se probabilmente non è una buona idea provarlo tu stesso, voglio menzionare alcuni grandi strumenti che mi hanno aiutato a costruire la mia sceneggiatura che potresti trovare utile per lavori futuri:

  • Libreria di richieste di Python: non sottoporti a bash quando hai una libreria HTTP totalmente ragionevole a portata di mano.
  • Pythex: Ci sono un sacco di aiutanti per le espressioni regolari là fuori e offrono tutti caratteristiche simili. Mi piace questo perché ti mostrerà il valore dei gruppi di corrispondenza regex che Python restituirebbe. Ciò è stato utile per l'analisi dell'ID univoco non elaborato.
  • curl.trillworks.com: puoi incollare un comando cURL qui e lo sputerà indietro nel codice Python! Così utile!

Spero di aver condiviso almeno un suggerimento di Chrome che ti aiuti nelle tue future avventure di debug! Oppure, se già sapevi tutto questo, spero che almeno ti sia piaciuto conoscere Taylor Swift e questa applicazione di Chrome su un problema del mondo reale.