Cross Domain y peticiones Ajax, ¿limitación o seguridad?

Cuando un usuario navega por Internet, no es consciente de la cantidad de peticiones que se hacen para obtener datos (legales e ilegales). Esto, ha obligado a los navegadores modernos a tomar una serie de medidas de seguridad.

Same Origin Policy (SOP)

Es una política de seguridad que impide realizar peticiones entre dominios, es decir nos limita a que las llamadas Ajax se hagan siempre dentro del mismo servidor

cross domain

 

Para diferenciar cuando un servidor se encuentra en un origen distinto de otro, hay que tener en cuenta 3 conceptos dentro de la url

  1. – Protocolo
  2. – Host
  3. – Puerto

Si tenemos alojada nuestra web en http://www.servidorA.com  podriamos realizar cualquier petición dentro del mismo usando el mismo protocolo, host y puerto. La siguiente peticiones sería válida

http://www.servidorA.com/pagina2.html

Sin embargo las siguientes peticiones no serían validas

  • https://www.servidorA.com/pagina3.html   (No es el mismo protocolo)
  • http://www.servidorB.com/pagina1.html     (No es el mismo servidor)

Esta política de seguridad, nos va a evitar muchos ataques desde fuera pero también supone un problema para los desarrolladores que veremos limitados los recursos a los que acceder. Os pongo algún ejemplo de casos típicos en los que nos pueden pasar problemas de Cross Domain

  • Web alojada en Servidor A que consume datos de un API en Servidor B
  • Web alojada en Servidor A que se comunica con un Gestor de Contenidos (por ejemplo Alfresco) alojado en servidor B

No os preocupéis, que hay soluciones

Solucion 1 al Cross Domain: Cross Origin Sharing Sources (CORS)

Cuando realizamos una petición Ajax, el navegador incluye una cabecera «Origin» en la request de la petición con el servidor origen que está realizando la petición.

Cuando usamos el método CORS para evitar los problemas de Cross Domain, lo que estamos haciendo es informar en el servidor destino de los orígenes que pueden realizar peticiones sobre él. Esto lo consigue añadiendo una nueva cabecera en la respuesta de la petición Http, «Access-Control-Allow-Origin»

Si la cabecera Origin (request Http) no coincide con la cabecera «Access-Control-Allow-Origin» (response Http), nuestra petición Ajax no podrá acceder.

Os pongo un ejemplo de una petición Ajax realizada por Facebook mientras los usuarios utilizan el chat. Las cabeceras de petición y respuesta coinciden y la petición consigue realizarse.

peticiones

cross domain

Solución 2 al Cross Domain: JSon Padding (JSONP)

No siempre tenemos acceso al servidor y si lo tenemos es posible que no nos permitan alterar su configuracion.

Existe otro tipo de solución al Cross Domain y es enviando los datos en formato JSONP.

Lo que diferencia JSONP del tipico JSON es la forma en la que enviamos los datos y es que JSONP envuelve los datos en una función.

Los navegadores modernos hemos dicho que no admiten peticiones a otros servidores pero si admiten la carga de javascript desde otros servidores.

Quien hace la ley hace la trampa. Vamos a envolver el resultado de la petición en una función. De esta manera conseguiremos acceder a datos de un servidor externo.

Os pongo un ejemplo de una petición Ajax usando jsonp

var url = 'http://servidorRemoto.com/archivo.json?callback=envoltorio'
$.ajax(
   { url: 'http://servidor.com/archivo.com',
     type: 'GET',//tipo de petición
     dataType: 'jsonp', //tipo de datos
     jsonpCallback: 'envoltorio',  //nombre de la funcion que envuelve la respuesta
     error: function(xhr, status, error) {
        alert("error");
     },
     success: function(jsonp) {
        alert("peticion correcta")
     }
    }
);

Y la forma en la que hay que devolver los datos de la petición

envoltorio({"status":"good","last_updated":"2015-04-21T15:33:35Z"})

 

Post By Rocio Muñoz (37 Posts)

Ingeniera Informatica. Dicen que todos los niños nacen con un pan debajo del brazo ... Yo creo que llevaba un ordenador. Trabajo como programadora en Cic en entornos Java. Apasionada del mundo web y la innovacion social.

Connect

One Response to “Cross Domain y peticiones Ajax, ¿limitación o seguridad?”