Sin más, os dejo con la entrada.
Hola bloggeros!
Hoy vamos a hablar de Cross-Domain Request. Esto consiste en hacer peticiones HTTP entre dominios y/o protocolos desde el lado del navegador, generalmente, mediante JavaScript.
Claro, todos pensamos: "bueno... con AJAX se soluciona todo, cargamos páginas externas y listo", efectivamente usamos AJAX pero hace ya tiempo se implementó una política de seguridad llamada 'same origin policy' que dice algo como:
"Te dejo acceder a contenido únicamente de tu mismo dominio y mismo protocolo, sino te jodes y te aguantas."
Tal es esto que imaginemos que accedemos desde un dominio:
http://www.ejemplo.com/
Podríamos cargar por AJAX el directorio /imagenes (http://www.ejemplo.com/imagenes)
pero no podríamos cargar el mismo index por HTTPS (https://www.ejemplo.com/).
Y por supuesto nada de intentarlo con ejemplo.es ...
Pero se hizo una pequeña excepción para aquellos que quieran dar acceso (como a desarrolladores que ofrecen documentos de datos XML o JSON ; como por ejemplo, una API). Esa excepción se basa en añadir a la respuesta HTTP el parámetro "Access-Control-Allow-Origin: *".
(Figura 1: Cabecera HTTP api.soundcloud.com de un JSON) |
Pero, imaginemos que una página web externa no permite esta acción, ¿cómo podríamos obtener el contenido?
Tenemos varias formas, la primera es amenaza de bomba al creador de la página, a ver si así le mete el 'Access-Control-Allow' o la otra opción es cargar los datos sin ese parámetro y sin que se entere el dueño...
(Figura 2: Esquema) |
Para obtenerlo, como véis en la Figura 2, se debe hacer una petición a un intermediario que cargue la página de lado del servidor.
En sí, esa es la idea fundamental, una especie de intermediario muy simple sería por ejemplo en php:
<?php echo file_get_contents($_GET["url"]); ?>
Pero lo que la mayoría utilizamos es YQL (Yahoo! Query Language), para quién no lo conozca es un lenguaje de sintaxis muy similar a SQL orientado a filtrado de datos de servicios web.
Para ello realicé una pequeña aplicación web para obtener el código fuente de cualquier página web mediante la consulta:
" SELECT * FROM html WHERE url='(url_de_la_web)' "
La aplicación se compone de un formulario dónde se introduce la URL y un botón que accione la petición; y una capa dónde se mostrará la información. Aunque la parte fundamental es la parte en el que JavaScript hace la petición YQL y te devuelve la web, la función "doXDR()".
(Figura 3: aplicacion cross-domain request) |
El source de la aplicación la podréis encontrar en http://pastebin.com/vdEV5kA7
Muchas gracias por la atención!
*Quiero agradecer a @badydeejay su ayuda para modificar la plantilla de este blog, además de tomarse la molestia de escribir este post.
Gracias!!!