Diferencias

Muestra las diferencias entre dos versiones de la página.

--- informatica:programacion:cursos:programacion_avanzada_javascript:ajax [2024/10/14 11:24] – [JSONP: Accediendo a datos en otros dominios] tempwin
+++ informatica:programacion:cursos:programacion_avanzada_javascript:ajax [2024/10/30 15:46] (actual) – [Funcionamiento básico de CORS] tempwin
@@ Línea 20: / Línea 20: @@
 La tendencia actual en todos los desarrollos web, sin embargo, es crear **aplicaciones y páginas cada vez más parecidas a aplicaciones de escritorio**, desdibujando las fronteras entre la Web y los programas que se ejecutan en el equipo local. Esto implica que los molestos y a la vez inevitables viajes al servidor no deberían ser percibidos por los usuarios y que la interfaz de la página debe responder en todo momento, jamás bloquearse. La sensación para los usuarios debe ser la de que la aplicación está todo el tiempo en su equipo, dejando de lado al servidor, como en una aplicación de escritorio tradicional. Seguro que has utilizado alguna vez GMail, Outlook.com, Facebook o alguna otra aplicación web reciente, así que sabes perfectamente de qué estoy hablando.
-<WRAP center round todo 60%>
+{{ :informatica:programacion:cursos:programacion_avanzada_javascript:08-ajax.jpg |}}
-AJAX
-</WRAP>
 Ya hemos aprendido a lo largo de este curso las posibilidades que ofrecen los navegadores actuales para trabajar en el lado cliente con HTML, CSS y JavaScript. La tendencia imparable en las aplicaciones web es la de **llevar cada vez más procesamiento y lógica al navegador**, dejando el servidor para procesar las reglas de negocio y el acceso a datos.
@@ Línea 390: / Línea 388: @@
 Dado que HTTP es un protocolo basado en texto, el recurso al que llamemos en el servidor debe devolver siempre texto (o sea, no puede ser una imagen o un archivo binario, que para transferirse se codifican de una forma especial -Base64- para convertirlos en texto).
-Este texto devuelto puede tener cualquier formato: **texto plano, XML, código JavaScript o incluso HTML**. En este último caso podemos obtener desde el servidor un contenido HTML completo que se debe escribir en una zona de la página (por ejemplo dentro de un ''%%<div>%%'' o un ''<span>'') y simplemente colocarlo ahí usando la propiedad ''innerHTML'' de los elementos del DOM.
+Este texto devuelto puede tener cualquier formato: **texto plano, XML, código JavaScript o incluso HTML**. En este último caso podemos obtener desde el servidor un contenido HTML completo que se debe escribir en una zona de la página (por ejemplo dentro de un ''%%<div>%%'' o un ''%%<span>%%'') y simplemente colocarlo ahí usando la propiedad ''innerHTML'' de los elementos del DOM.
 Sin embargo, la mayor parte de las veces lo que tendremos que **procesar es alguna estructura de datos**.
@@ Línea 603: / Línea 601: @@
 ===== DEMO: Una base de datos de películas con JSONP =====
-Ejemplo de uso de JSONP para crear un buscador de películas en una fuente externa ([[https://www.imdb.com/|IMDb]]).
+Ejemplo de uso de JSONP para crear un buscador de películas en una fuente externa ([[https://www.imdb.com/|IMDb]]), con la API [[https://www.omdbapi.com/|OMDb API]].
 <WRAP center round important 60%>
@@ Línea 654: / Línea 652: @@
 </code>
-===== =====
+Scripts usados:
+  * ''EventHandlerHelper.js'': compatibilidad de eventos en distintos navegadores.
+  * ''JSONPHelper.js'': facilita llamadas para trabajar con JSONP.
+El contenido de ''IMDBInfo.js'':
+<code javascript>
+var IMDB_API_URL = "http://www.omdbapi.com/";
+var IMDB_API_KEY = "be50bfe7";
+function hacerBusqueda() {
+    var titPelicula = document.getElementById("titPelicula").value;
+    if (titPelicula.trim() == "") {
+        alert("Introduzca el título de una película para buscarla en la Internet Movie DataBase");
+        document.getElementById("titPelicula").focus();
+    }
+    sendJsonpRequest(IMDB_API_URL + "?apikey=" + IMDB_API_KEY + "&s=" + titPelicula, "mostrarResultadosBusquedaCallback", error404);
+}
+function titPelicula_OnEnter(event) {
+    event = EventHandlerHelper.fixEvent(event);
+    if (event.which == 13)
+        hacerBusqueda();
+}
+//Muestra resultados de búsqueda (función callback de JSONP)
+function mostrarResultadosBusquedaCallback(resultados) {
+    var resHTML = "";
+    if (!resultados.Search || resultados.Search.length == 0){
+        resHTML = "<span>¡¡No hay películas con este título!!</span>";
+    }
+    else {
+        for(var i = 0; i<resultados.Search.length; i++)
+        {
+            var res = resultados.Search[i];
+            resHTML += "<p data-imdbid='" + res.imdbID + "' onclick='mostrarInfoPeli(this);'>" + res.Title + "(" + res.Year + ") - " + res.Type + "</p>";
+        }
+    }
+    document.getElementById("resBusqueda").innerHTML = resHTML;
+    ocultarDetalles();
+}
+//Si no se encuentra la API
+function error404()
+{
+    document.getElementById("resBusqueda").innerHTML = "<span>¡¡Error al conectar con la API!!</span>";
+    ocultarDetalles();
+}
+//Muestra info de la película a partir de un identificador
+//Se le pasa el elemento sobre el que se ha pulsado
+function mostrarInfoPeli(elto) {
+    var idPelicula = elto.attributes["data-imdbid"].value;
+    //Desmarco las que hubiese seleccionadas
+    var seleccionados = document.getElementsByClassName("seleccionado");
+    for(var i = 0; i< seleccionados.length; i++) {
+        seleccionados[i].className = "";
+    }
+    //La marco como seleccionada
+    elto.className = "seleccionado";
+    //Pido la info sobre la película
+    sendJsonpRequest(IMDB_API_URL + "?apikey=" + IMDB_API_KEY + "&i=" + idPelicula, "mostrarInfoPeliculaCallback", error404);
+}
+//Muetra información de una película (función callback de JSONP)
+function mostrarInfoPeliculaCallback(peli){
+    if (peli != null && !peli.Error)
+    {
+        //Asignamos a mano la imagen
+        if (peli.Poster == "N/A")
+            document.getElementById("imgCaratula").style.visibility= "hidden";
+        else {
+            document.getElementById("imgCaratula").src = peli.Poster;
+            document.getElementById("imgCaratula").style.visibility= "visible";
+        }
+        //Ahora asignamos el resto de los campos
+        enlazarCamposConDOM(peli);
+        mostrarDetalles();
+    }
+}
+//Se encarga de localizar campos en la página con el mismo nombre que campos de un objeto que se le pasa, e introduce su valor como contenido en cada uno de ellos
+function enlazarCamposConDOM(obj) {
+    //Si no se pasa un elemento concreto del DOM a partir del cual buscar, se usa document y se busca en toda la página
+    //Se recorren las propiedades del objeto
+    for (prop in obj) {
+        //Verificamos si existe un elemento con el mismo id que la propiedad
+        var e = document.getElementById(prop);
+        if (e != null) {
+                e.textContent = obj[prop];  //Asignamos el valor como contenido de texto
+        }
+    }
+}
+//Mostrar detalles película
+function mostrarDetalles(){
+    document.getElementById("detalle").style.display= "block";
+}
+//Ocultar detalles película
+function ocultarDetalles(){
+    document.getElementById("detalle").style.display= "none";
+}
+function initialize() {
+    EventHandlerHelper.addEventListener(document.getElementById("cmdGetInfo"), "click", hacerBusqueda);
+    EventHandlerHelper.addEventListener(document.getElementById("titPelicula"), "keyup", titPelicula_OnEnter);
+}
+window.onload = initialize;
+</code>
+<WRAP center round tip 60%>
+Visor online para JSON: https://jsonviewer.stack.hu/. Pegamos un objeto JSON y podremos visualizar en formato árbol o formatearlo.
+</WRAP>
 ===== Control de acceso entre dominios: CORS =====
+La funcionalidad de JSONP que acabamos de estudiar es muy interesante para crear //mashups// y manejar información de otros dominios de manera directa desde el navegador. Sin embargo, hay que tener cuidado cuando se usa con información privada importante ya que **no está exenta de problemas de seguridad**. Por algo los que diseñan los navegadores se empeñan en no permitir el acceso entre dominios.
+<WRAP center round info 60%>
+**Mashups**: Aplicaciones que centralizan en un solo punto elementos de otras aplicaciones o páginas web. Por ejemplo, una página que integre en una sola interfaz todas las notificaciones de tus redes sociales.
+</WRAP>
+No voy a entrar en detalles aquí sobre técnicas de //phising// que usan JavaScript para obtener ilícitamente información de otros dominios mediante JSONP, pero baste decir que Twitter o el mismísimo GMail fueron craqueados hace años usando técnicas de [[https://en.wikipedia.org/wiki/Cross-site_request_forgery|Cross Site Request Forgery]] (también llamado XSRF) basadas en llamadas JSONP.
+El protegerse de esas técnicas de //hacking// depende del servicio que implementa la API JSONP. Sólo deberíamos usarlo en nuestras páginas si confiamos en estos sitios. Utilizar APIs de servicios poco recomendables podría resultar en problemas de seguridad para nuestros usuarios.
+Además JSONP tiene bastantes limitaciones:
+  * Sólo sirve para peticiones GET
+  * Los datos deben devolverse en formato JSON, o sea, JavaScript. Si necesitamos otros formatos no lo tenemos fácil.
+  * La información que se puede enviar al servidor es muy limitada (únicamente datos planos como parámetros de la URL).
+  * El servidor debe colaborar explícitamente con el método para devolver el código envuelto en una llamada a un método JavaScript, algo que no siempre está en nuestra mano.
+  * No existe un método estándar para controlar el acceso a este tipo de recursos remotos por parte del servidor que los provee, es decir, decidir quién y cuándo puede acceder al recurso.
+Así que, realmente, **la mejor manera de crear aplicaciones AJAX sigue siendo usar el objeto ''XmlHttpRequest''** (XHR). Y con las modernas aplicaciones web cada vez más extendidas y ávidas de funcionalidad, el poder acceder a otros dominios de manera lícita pero a la vez controlada es una necesidad acuciante.
+Conscientes de ello el W3C trabajó en un **estándar que modifica el modo de funcionamiento tradicional** del objeto ''XmlHttpRequest'' para dotarlo de capacidades de **acceso a otros dominios**. También define las convenciones necesarias para que los servidores que ofrecen servicios puedan regular el acceso de los navegadores a los mismos. La especificación se denomina **Cross-Origin Resource Sharing** (compartición de recursos entre diferentes orígenes) o más concisamente con el acrónimo **CORS**.
+Los principales navegadores lo han implementado hace bastante tiempo (Internet Explorer desde la versión 8, Opera desde la 12). Si te interesa puedes leer el estándar completo aquí: [[http://www.w3.org/TR/cors/|http://www.w3.org/TR/cors/]].
+<WRAP center round important 60%>
+Nota: Muchos programadores cuando oyen hablar de CORS piensan en un protocolo de seguridad para proteger el acceso a los recursos, de manera similar a tener una clave o usar un mecanismo de cifrado o algo similar. Se trata de **un error de concepto**. CORS no pretende proteger el acceso a las aplicaciones de servidor. No es un método de seguridad para servicios en Internet. Lo que busca es **proteger a los usuarios frente a ataques de phishing y XSRF** para que no sean víctimas de un pirata de forma inadvertida, que es algo muy diferente.
+</WRAP>
+==== Funcionamiento básico de CORS ====
+CORS define un protocolo entre los servidores Web y los navegadores para que colaboren a la hora de delimitar políticas de seguridad de acceso entre dominios.
+Así, en su forma más básica, CORS define que cuando se haga una llamada con XHR a un dominio diferente del actual, **dicha llamada debe incluir automáticamente información sobre quién realiza la petición**. Así ésta incluirá automáticamente una cabecera llamada "Origin" que le indicará al servidor de destino el protocolo, dominio y puerto desde el que se está originando la petición.
+<WRAP center round info 60%>
+Nota: Esta cabecera difiere de la cabecera "Referer" tradicional en que no se indica ningún tipo de ruta, por lo que las preocupaciones de privacidad de los posibles usuarios son menores.
+</WRAP>
+Con esta cabecera el servidor decide si permite o no el acceso al recurso, devolviendo en su respuesta una cabecera de tipo "**Access-Control-Allow-Origin**" en la que indica al navegador qué dominios tienen permiso para realizar las peticiones.
+Por ejemplo, puede devolver:
+<code>
+Access-Control-Allow-Origin: http://www.tuservidor.com
+</code>
+Al recibir esta cabecera el navegador sabe si debe permitir o no que se realice la llamada. De esta forma se protege a los usuarios, ya que si alguien intenta un ataque XSRF contra un servicio como GMail, al realizar la petición desde otro dominio distinto al esperado (''mail.google.com''), el navegador la bloqueará y su código malicioso no servirá de nada.
+Por defecto, si el servidor no incluye esta cabecera el navegador bloquea la llamada, con lo que el comportamiento es exactamente el mismo que el tradicional.
+En muchos casos, si el servicio quiere que pueda consumirse desde cualquier dominio, puede devolver esto:
+<code>
+Access-Control-Allow-Origin: *
+</code>
+Esto significa que admite peticiones desde cualquier dominio externo. Ideal para servicios que no juegan con datos privados y quieren abrirse a cuantos más usuarios externos mejor.
+La especificación CORS define todavía más cabeceras para cuestiones algo más especializadas, como por ejemplo para cachear el resultado de una valoración de seguridad y cuánto tiempo permanece guardada o las "//preflight requests//" para lanzar peticiones previas con el método ''HTTP OPTIONS'' y obtener las condiciones de seguridad de las llamadas desde ese origen para toda la sesión.
+Lo mejor de CORS es que nosotros, como programadores JavaScript no tenemos que hacer nada especial para soportar estas llamadas entre dominios. Nos limitamos a utilizar el objeto XHR como siempre, de la manera explicada en este tema. La única diferencia es que tenemos que incluir el URL completo, con el nombre de otro dominio.
+A la hora de utilizar un servicio externo desde uno de tus desarrollos JavaScript, intenta averiguar si el servicio implementa cabeceras CORS de tipo "*". Te simplificará enormemente el desarrollo pues podrás sacar partido al objeto XHR como si fuera un servicio albergado en tu propio dominio.
+===== Recursos =====
+  * [[https://www.sitepoint.com/an-in-depth-look-at-cors/|An In-depth Look at CORS]]