Share on FacebookTweet about this on TwitterShare on Google+

Historia de JSONP

El modelo de seguridad de las aplicaciones web no permite en principio realizar peticiones Ajax entre dominios. Si intentamos hacer una petición AJAX de un dominio a otro dominio diferente, por norma general se obtiene un error HTTP Forbidden 403. La same-origin policy restringe la forma en que un documento o script de un sitio web interacciona con otro recurso con distinto origen. Para poder acceder sin ningún tipo de restricción deben coincidir el esquema, nombre de la máquina y número de puerto.
Por ejemplo si intentamos acceder desde la URL http://store.company.com/dir/page.html a una de las siguientes:

URL Resultado Razón
http://store.company.com/dir2/other.html Éxito  
http://store.company.com/dir/inner/another.html Éxito  
https://store.company.com/secure.html Fallo Protocolos distintos
http://store.company.com:81/dir/etc.html Fallo Puertos distintos
http://news.company.com/dir/other.html Fallo Hosts distintos.

En el 2008 se publicó la primera versión de la especificación XMLHttpRequest Level 2. Esta nueva especificación, añade funcionalidades nuevas a las peticiones AJAX como las peticiones entre dominios (cross-site), eventos de progreso y envio de datos binarios (no solo texto como hasta entonces).
Durante estos años, se han utilizado algunas técnicas para evitar esta restricción de seguridad, como el uso de jsonp (json con padding). El jsonp se basa en que aunque no podemos consumir datos de otro dominio vía XHR pero en cambio si podemos cargar un script de dicho dominio. Lo que haremos será recibir los datos del otro dominio envueltos en un padding que será el nombre de la función. El nombre de la función que se espera de la función “envolvente” se pasa como parámetro en la llamada ajax de jQuery (jsonpCallback):

El script en servidor puede ser similar al siguiente:

Cómo utilizar CORS

CORS es el acrónimo de Cross-origin resource sharing. Si trabajamos con CORS, que es lo más actual, requerirá una pequeña configuración del servidor. Además debemos tener presente, que los navegadores antiguos no soportan CORS.

Si tu aplicación está en www.example.com y quieres obtener datos de www.example2.com, el host example2 permitirá peticiones de example añadiendo una cabecera:

Permitirá hacer peticiones a cualquier dominio con esta otra cabecera:

Access-Control-Allow-Origin se puede añadir a un solo recurso o a todo el dominio.

Por ejemplo el script http://www.media.formandome.es/phonegap/tutorial/futbolistas.php permite CORS. Puedes comprobarlo analizando la respuesta de la web con las herramientas de desarrollo del navegador:

access_control_header

El script que utilizaríamos en el cliente podría ser similar al siguiente:

El script en servidor podríamos hacerlo de modo que resuelva tanto json como jsonp, en función de si recibe o no el parámetro de callback:

Puedes descargar los ficheros que he utilizado.

Comments

  1. John Ramirez

    He intentado de mil maneras usar el CORS enviando un formulario con un campo FILE pero no he podido cargar el archivo que necesito haciendo la peticion desde otro servidor, pueden ayudarme por favor.

Leave a Reply

Your email address will not be published. Required fields are marked *