Saturday, September 14, 2013

Seguimiento de links mediante cookies

Supongo que a veces habréis entrado en un Tumblr y os habrá empezado a sonar música. Muchas veces es música preciosa, y los creadores de la página tienen una lista de reproducción entera de música que escucharíamos horas y horas. Normalmente, estas playlists son creadas con un pluggin llamado SCM Music Player.
*Voy a usar un blog, pero no os voy a dar la URL por privacidad :). 

Reproductor y playlist
Aquí podemos ver el reproductor y la playlist.
El otro día me pasó a mí y quise descargarme la música que tenía puesto ese blog. Así que empecé a buscar.
Mi primer intento fue dar clic derecho al elemento de la playlist y guardar como, pero con esto solo conseguía bajarme el source code de la web(el source code es todo el código que forma una web. Usando Chrome, podéis darle a Control + U para verlo, o bien ir al botón de arriba a la derecha (que son como tres barritas horizontales), poner el ratón encima de "Herramientas" y clicar en "Ver código fuente").

Como este primer intento no funcionó, decidí buscar en el código ese elemento de la playlist, a ver si encontraba un link hacia el archivo de sonido. Para buscar un elemento determinado del código, Chrome nos permite "Inspeccionar Elemento", así que le daremos clic derecho al elemento de la playlist y clicaremos en "Inspeccionar elemento". Se nos abrirá el inspector y encontramos esto:

Código de los elementos de la playlist
Observamos en el código cada elemento de la playlist (separado en un rectángulo rojo)
No había link. Me llevé una pequeña decepción al ver que me iba a costar un poco más desenterrar esa tan deseada canción. Os voy a guiar un poco en lo que pone en el código: 
<li class="item focus odd" data-bind="
visible:isValid(),
click:$root.play,
css:{focus:on, even:$index()%2==1, odd:$index()%2==0}
">
<span class="title" data-bind="text:title">.</span>&nbsp;
</li>

 Tenemos un <li> que define una lista (li viene de "list"). Dentro, llama a una clase (item focus odd), y básicamente dice que es visible (visible:isValid()) y que si se clica, que se reproduzca (click:$root.play).
Luego tenemos un <span>, que define un espacio a rellenar en el código, aquí el de un título (<span class="title" data-bind="text:title">.</span>. Entre > y < encontramos . . Este es el título que se le puso a la canción para que se viera en la playlist.)

De aquí me di cuenta de que probablemente el link estuviera oculto, así que me puse a pensar un poco. Si os fijáis hay una pestaña en el inspector que se llama "Network". Esto básicamente son todas las entradas y salidas solicitadas a la web, así que podemos monitorizarlas, y ver a donde manda la petición el código cuando le damos al play (¿Tiene sentido, no? Es decir, estamos pidiendo que reproduzca algo, ¿pero el qué? Este qué es lo que pide la web a otra web para reporducir, y lo que nosotros podemos controlar a través de la pestaña "Network").

Si le damos al play veremos que en la pestaña empiezan a aparecer cosas.
Pestaña "Network"
La pestaña "Network" y los datos que nos proporciona.
Si clicamos en ese "Path", nos encontraremos con un montón de datos, pero no os asustéis, nosotros solo buscamos dos: el "Request URL" y el "Request Method". 
Request URL y Request Method, dentro de Network
Request URL y Request Method resaltados para que los veáis mejor.
Primero nos fijaremos en el Request Method. Ahí pone GET, lo que quiere decir que está pidiendo algo y lo está obteniendo. ¿Qué está pidiendo? La URL que sale arriba.

Ahora, si intentáramos reproducir la URL que sale, no podríamos, porque nosotros cuando vemos un vídeo pedimos ver el vídeo, así que, por mucho que copiemos y peguemos el link en la barra del navegador, no nos va a llevar a ningún sitio, ya que estamos pidiendo un request, y no un vídeo.  Pero, sí que vemos que es un vídeo de Youtube, lo cual nos facilita todo el proceso de encontrar el vídeo.

Los vídeos de Youtube funcionan con una ID propia para cada vídeo, que se asigna al mismo en el momento en el que se sube a la página. Si os paráis un segundo a mirar el link vemos que la ID está ahí.

http://s.youtube.com/stream_204?event=streamingstats&ns=yt&bh=2841.063:50.023&scoville=1&ei=f3Y0UvzjDIW_8QPp5IHQCQ&el=embedded&docid=h2MPBdBNU9A&vps=2841.063:PL&df=2841.063:156&fmt=134&bwm=2841.063:2084316.000:5.095&cpn=ezfA4A00VP2RdULh
También, si alguna vez os habéis parado a mirar como funcionan las URLs de Youtube veréis que siempre son así :
https://www.youtube.com/watch?v=[ID]
 Así que, ya pude ver mi canción en Youtube. Y estaba super feliz. Pero... luego me quedé pensando y, la verdad, no podía ser que fuera tan difícil. Es decir, SCM Player te obliga a poner el link de las canciones en el código. Así que... corrí a la web, le dí a Ctrl + U y luego busqué (Ctrl + F) "SCM Music Player", para ir a la parte del código donde empieza el pluggin. Y, efectivamente, tampoco era tan difícil.
Precioso fail por mi parte.
Precioso mi fail, ¿eh?
La conclusión que saco de esto es que primero debería examinar bien el código fuente antes de ponerme a hacer cosas raras.

De todos modos aprendí a hacer seguimiento de requests mediante cookies, que nunca está de más, ¿no?

¡Saludos a todos!



1 Comment:

Vichtor said...

hola amigo, tengo un dilema parecido al tuyo , soy parte de un foro que compartimos archivos y se nos permite descargar con puntos, si es que subimos archivos se nos da un punto, quiero un link de descarga que esta oculto pero pide demaciados puntos, un cuadro de color con un texto que dice necesitas al menos 80 puntos, lo esta ocultando, mi pregunta es, como puedo decifrar ese link de mega a travez de inspeccionar elemento? si me das una pista te lo agradecere como no tienes idea

Post a Comment