Actividad Online

Actividad. Aplicaciones AJAX. Arquitectura y tecnologías.
Vulnerabilidades de seguridad y defensas
1.- Arquitectura de las aplicaciones web ricas de Internet (RIA) AJAX,

tecnologías, características y funcionamiento.
Frente a esto está llegando con bastante fuerza la tecnología AJAX, la cual es una
mezcla de 4 tecnologías, Java Script, XML, el objeto xmlHttpRequest y el Modelo de
Objetos de Documento (DOM). Es una técnica de desarrollo web para crear
aplicaciones interactivas o RIA (Rich Internet Aplicaciones).
Arquitectura AJAX. Dar al usuario una buena experiencia en el uso de las aplicaciones
web es uno de los puntos que permiten que este retorne a visitarlo. Todos hemos
experimentado las aplicaciones web en las que para cargar un dato necesitamos
esperar a que toda la página se cargue para obtener resultados, imaginarse recargar
toda la página por un dato especifico no es realmente agradable, gracias AJAX podemos
solventar esto.
AJAX es el acrónimo inglés para Asynchronous JavaScript and XML (JavaScript

y XML asíncrono). Es una técnica de desarrollo web que genera aplicaciones
web interactivas combinando:
Document Object Model (DOM) para visualizar dinámicamente e interactuar
con la información presentada.
XML, XSLT para intercambiar y manipular datos.
CSS para definir el aspecto (look and feel) del documento.
JSON y JSON-RPC pueden ser alternativas a XML/XSLT
XMLHttpRequest para recuperar datos de forma asincrónica.
Javascript como nexo de unión de todas estas tecnologías.
AJAX es un patrón de diseño que propone un nuevo modelo de interacción Web
combinando las tecnologías anteriores.
En el caso de la web, las peticiones se hacen normalmente en cada evento de un cliente,

por ejemplo, un clic en un enlace o un inicio de sesión; Tradicionalmente cada petición
al servidor requiere recargar, refrescar o actualizar la página para ver la nueva
información, esto puede ser normal si se va a otra página interna del sitio, pero no es
eficiente cuando lo que se quiere es solo cambiar un fragmento de la página, como un
chat, un mapa, o mostrar alguna información contextual sobre una compra. Ajax llegó a
la web para revolucionar y optimizar su funcionamiento, haciendo que esta se pueda
fragmentar para actualizar o refrescar no toda la página web, sino solo una parte de
ella.
Hugo Ruiz Martínez

Master en Ingeniería de software y Sistemas Informá ticos Pá gina 1
Para entender mejor este concepto, podemos recordar que, en años anteriores cuando
se hacía una actualización en cualquier parte de la web, se debía esperar a que esta se
actualizara por completo, gracias a esta técnica de desarrollo Ajax, se logra que sea solo
un fragmento en la página web se actualice, al lograr esto surgen las múltiples
aplicaciones y dinamismos en la web, como lo es el caso de validación de cupones,
inicio de sesión, formularios, entre otros.
Asynchronous, JavaScript, And XML (AJAX), siendo un modo de programación que no

bloquea la ejecución de otros procesos mientras resuelve ciertas peticiones, realizando
estas acciones de manera asíncrona, haciendo que esta acción solo sea interpretada de
acuerdo a la petición de solo un fragmento de la página, y el servidor valida y responde
solo a ese fragmento, haciendo acciones como: cambio de colores, cambio de números,
importante para listas de precios con cupones de descuento.
Veamos cómo Funciona:
En este esquema suponemos que el navegador inicialmente contiene una página

cualquiera (?) y se le hace la petición para que muestre una página como
http://aprenderaprogramar.com. Una vez realizada la solicitud la página se carga en el
navegador (1). Suponemos que el usuario realiza una acción, por ejemplo elige entre
Hugo Ruiz Martínez

varios tipos de producto la opción “automóviles”. Como respuesta a ese evento, se envía
la información (opción automóviles) al servidor en segundo plano y se reciben datos de
respuesta del servidor también en segundo plano, sin necesidad de recargar de nuevo
toda la página. Con la información recibida del servidor y usando JavaScript se
modifica la página únicamente allí donde es necesario, de modo que ahora se le
muestran al usuario los tipos de automóviles disponibles, por ejemplo autobuses,
furgonetas y coches (2). Ahora el usuario elige un tipo de automóvil, por ejemplo
coches, y como respuesta a ese evento, se envía la información al servidor en segundo
plano y se reciben datos de respuesta del servidor también en segundo plano, sin
necesidad de recargar de nuevo toda la página. Con la información recibida del servidor
y usando JavaScript se modifica la página únicamente allí donde es necesario, de modo
que ahora se le muestran al usuario los tipos de coches disponibles, por ejemplo “de
gasolina”, “diesel”, “eléctricos” e “híbridos” (3). Ahora el usuario elige una opción, por
ejemplo “eléctricos”, y como respuesta a ese evento, se envía la información al servidor
en segundo plano y se reciben datos de respuesta del servidor también en segundo
plano, sin necesidad de recargar de nuevo toda la página. Con la información recibida
del servidor y usando JavaScript se modifica la página únicamente allí donde es
necesario, de modo que ahora se le muestran al usuario para mostrarle los tipos de
coches eléctricos disponibles (4). En total hemos realizado 1 cargas completa de la
Página, y enviado 4 paquetes de datos al servidor y recibido 4 paquetes de datos del

servidor. Supongamos que cargar la página supone la transferencia de 250 Kb de media
y que cada paquete enviado tiene 1 Kb de media y cada paquete recibido 5 Kb de media.
En total habremos tenido que hacer 1 recarga y transferir 250 + 4*1 + 4*5 Kb,
aproximadamente 250 + 4 +20 = 274 Kb.
La diferencia que ha introducido el uso de Ajax está en que:
- No hemos tenido que cargar la página completa varias veces.

- Hemos sido más rápidos en la operación y al mostrar respuestas al usuario.
- Hemos transferido un menor volumen de datos.
- La transferencia de datos con el servidor es en segundo plano. Esto permite al

usuario seguir interaccionando con la página web. En cambio en el caso de
recargas completas tendría que esperar a que terminara la recarga para
continuar interaccionando.
Hugo Ruiz Martínez

El uso de Ajax introduce una ventaja clara, de ahí que la mayor parte de las webs hoy
día usen Ajax.
En las aplicaciones Web tradicionales los usuarios interactúan mediante formularios,

que al enviarse, realizan una petición al servidor Web. El servidor se comporta según lo
enviado en el formulario y contesta enviando una nueva página Web. Se desperdicia
mucho ancho de banda, ya que gran parte del HTML enviado en la segunda página
Web, ya estaba presente en la primera. Además, de esta manera no es posible crear
aplicaciones con un grado de interacción similar al de las aplicaciones habituales.
Además en este tipo de aplicaciones Web tradicionales mientras el servidor está

haciendo lo suyo, ¿qué está haciendo el usuario? Exacto, esperando. Y, en cada paso de
la tarea, el usuario espera por más. Obviamente, si estuviéramos diseñando la Web
desde cero para aplicaciones, no querríamos hacer esperar a los usuarios. Una vez que
la interfaz está cargada, ¿por qué la interacción del usuario debería detenerse cada vez
que la aplicación necesita algo del servidor? De hecho, ¿por qué debería el usuario ver
la aplicación yendo al servidor?
En aplicaciones AJAX se envían peticiones vía http(s) mediante eventos, scripts o

rutinas al servidor Web, para obtener únicamente la información necesaria, empleando
SOAP o algún otro lenguaje para servicios Web basado en XML, y usando JavaScript en
el cliente para procesar la respuesta del servidor Web. Esto redunda en una mayor
interacción gracias a la reducción de información intercambiada entre servidor y
cliente, ya que parte del proceso de la información se hace en el propio cliente,
liberando al servidor de ese trabajo. Además esta petición se realiza como proceso de
fondo (background), por lo que el usuario no tiene que esperar que el proceso concluya
en su totalidad para continuar interactuando con la aplicación. La contrapartida es que
la descarga inicial de la página es más lenta al tenerse que bajar todo
el código JavaScript.
En los siguientes gráficos podemos ver la diferencia entre utilizar un modelo clásico de

aplicación Web y utilizar el modelo de aplicación Web que propone AJAX:
Hugo Ruiz Martínez

Ejemplo de su funcionamiento.
Tomemos como ejemplo la función de autocompletado de Google; esta te ayuda a

completar tus palabras clave mientras las escribes. Las palabras clave cambian en
tiempo real, sin embargo, la página como tal no cambia. A principios de los años 90,
cuando la Internet no era tan avanzada, la misma función requeriría que Google
volviera a cargar la página cada vez que apareciera una nueva recomendación en tu
pantalla. AJAX permite que el intercambio de datos y la capa de presentación
funcionen simultáneamente sin que interfieran la una con la otra.
Tecnologías AJAX
AJAX es la técnica que permite generar aplicaciones web de forma interactiva al

manejar una estructura que permite al servidor web comunicarse con el navegador del
usuario por componentes individuales. AJAX intenta proveer aplicaciones web con las
características de las aplicaciones del escritorio y permite que los datos que se cargan a
la aplicación no requieran una recarga del sitio web; de esta forma, permite más
velocidad y robustez en la aplicación web. AJAX es un concepto basado en muchas
tecnologías como XHTML y CSS, DOM, XML, XSLT y JSON, XML, Http, Request y
Javascript. AJAX reúne las anteriores tecnologías con el fin de poder obtener acceso al
servidor de aplicaciones, sin requerir un nuevo llamado mediante protocolo HTTP.
Hugo Ruiz Martínez

XHTML (Extensible Hypertext Markup Language), a grandes rasgos, es un lenguaje de

marcado que te permite editar webs. Está basado en HTML 4.01, pero sus reglas son
mucho más estrictas y versátiles que HTML. XHTML es una nueva formulación de
HTML que utiliza el meta lenguaje de marcado XML, lo cual es una ventaja clave en su
usabilidad porque muchos formatos de datos están basados en XML y los dispositivos
modernos requieren una versión estricta del lenguaje de marcado porque no pueden
mostrar mal el código fuente.
XHTML se utiliza para marcar contenido como texto, imágenes y enlaces en forma
de hipervínculos para crear una cierta estructura que puede ser mostrada por
los navegadores. Los documentos pueden ser estructurados con XHTML para hacerlos
legibles para un analizador. El analizador interpreta los elementos de marcado
especificados en las definiciones del lenguaje XHTML y reproduce el contenido de estos
elementos de una manera específica.
En última instancia, el usuario ve lo que contienen estos elementos y no la forma en

que se anotan o estructuran los elementos. Este último se llama código fuente XHTML
y puede ser editado con diferentes editores de texto, por ejemplo, con un
editor WYSIWYG. La notación separa el contenido y el diseño. El contenido está
encerrado por los elementos. La forma en que se muestra este contenido está
determinada por los elementos y sólo la muestra el navegador.
El DOM (Document Object Model en español Modelo de Objetos del Documento) es

una API definida para representar e interactuar con cualquier documento HTML o
XML. El DOM es un modelo de documento que se carga en el navegador web y que
representa el documento como un árbol de nodos, en donde cada nodo representa una
parte del documento (puede tratarse de un elemento, una cadena de texto o un
comentario). Es una de las APIs más usadas en la Web, pues permite ejecutar código en
el navegador para acceder e interactuar con cualquier nodo del documento. Estos
nodos pueden crearse, moverse o modificarse. Pueden añadirse a estos nodos
manejadores de eventos (event listeners en inglés) que se ejecutarán/activarán cuando
ocurra el evento indicado en este manejador.
Desarrollar en AJAX requiere tener conocimiento de todas y cada una de las

tecnologías anteriores. En las aplicaciones Web tradicionales, las acciones del usuario
en la página (hacer click en un botón o en un enlace, etc.) desencadenan llamadas al
servidor. Una vez procesada la petición del usuario, el servidor devuelve una página
HTML al navegador del usuario. Esta técnica tradicional para crear aplicaciones Web
Hugo Ruiz Martínez

funciona correctamente, pero no crea una buena sensación al usuario. Al realizar

peticiones continuas al servidor, el usuario debe esperar a que se recargue la página con
los cambios solicitados. Si la aplicación debe realizar peticiones continuas, su uso se
convierte en algo molesto. AJAX permite mejorar completamente la interacción del
usuario con la aplicación, evitando las recargas constantes de la página, ya que el
intercambio de información con el servidor se produce en segundo plano. Las
aplicaciones construidas en AJAX eliminan la recarga constante de páginas mediante la
creación de un elemento intermedio entre el usuario y el servidor. La nueva capa
intermedia de AJAX mejora la respuesta de la aplicación, ya que el usuario nunca se
encuentra con una ventana del navegador vacía esperando la respuesta del servidor.
La tecnología AJAX permite el desarrollo de aplicaciones más rápidas y cómodas para

el usuario, pero es necesario tener en cuenta una serie de aspectos para que la
aplicación sea lo más eficiente y robusta posible:
Uso de XMLHttpRequest. Utilizar el objeto XMLHttpRequest para la comunicación

asíncrona con el servidor. Debe emplearse el objeto XMLHttpRequest, ya que se trata
de un elemento fundamental para la comunicación asíncrona con el servidor. Este
objeto nos permite enviar y recibir información en formato XML y en general en
cualquier formato.
Hugo Ruiz Martínez

Obtención del objeto XMLHttpRequest. Implementar una función para obtener

el objeto XMLHttpRequest.
JSON. Utilizar JSON para el intercambio de información. JSON es un subconjunto
del lenguaje javascript que se basa en la construcción de una lista ordenada de valores,
listas de objetos, etc. que pueden incluir a su vez tablas hash, objetos con una colección
de pares nombre/valor, etc. Se puede usar como alternativa a la necesidad de XML en
el intercambio de información vía AJAX. Podemos hacer uso del mismo si el volumen
de datos a manejar excede de lo razonable o si existen dificultades con el uso de XML,
ya que aludir a la complejidad o el coste del parseo del XML en el cliente mediante
DOM puede solucionar estos problemas. Por este motivo, se recomienda el uso de
JSON para el intercambio de información.
Uso de la librería Prototype.js. Utilizar la librería Prototype.js para la integración

de JSON.
Características AJAX.
Hay varias características principales de usar Ajax en una aplicación web:
Callbacks: Ajax es usado para realizar una llamada de retorno (callback), realizando

un rápido viaje de ida y vuelta desde y hacia el servidor para recuperar y/o guardar
datos sin volver a colocar la página completa en el servidor. Al no realizar una
devolución completa y enviar todos los datos del formulario al servidor, la utilización de
la red se minimiza y se producen operaciones más rápidas. En sitios y ubicaciones con
ancho de banda restringido, esto puede mejorar enormemente el rendimiento de la red.
La mayor parte del tiempo, los datos que se envían desde el servidor son mínimos.
Mediante el uso de devoluciones de llamada, el servidor no está obligado a procesar
todos los elementos del formulario. Enviando sólo los datos necesarios, ya que puede
haber un procesamiento limitado en el servidor. No es necesario procesar todos los
elementos del formulario, procesar el ViewState, enviar imágenes al cliente o enviar
una página completa al cliente.
Realizando llamadas asincrónicas: Ajax le permite realizar llamadas asíncronas a
un servidor web. Esto permite que el navegador del cliente evite esperar a que todos los
datos lleguen antes de permitir que el usuario actúe una vez más.
Hugo Ruiz Martínez

Fácil de usar: Debido a que se está eliminando una devolución de la página. Las

aplicaciones habilitadas para Ajax siempre serán más receptivas, más rápidas y más
fáciles de usar.
Velocidad aumentada: El objetivo principal de Ajax es mejorar la velocidad,
rendimiento y usabilidad de una aplicación web. Un gran ejemplo de Ajax es la función
de calificación de películas en Netflix. El usuario califica una película y su calificación
personal para esa película se guarda en su base de datos sin esperar a que la página se
actualice o se vuelva a cargar. Estas calificaciones de películas se guardan en su base de
datos sin contabilizar la página completa de nuevo en el servidor.
JavaScript es el lenguaje de programación del lado del cliente y XML es un lenguaje de

marcado para definir datos. JSON es otro lenguaje de marcado para definir datos.
JSON (JavaScript Object Notation) es mucho más fácil de usar con JavaScript que
XML. Cuando se trata de Ajax y JavaScript, JSON Web Services están reemplazando
XML Web Services.
Otro avance importante para JavaScript y Ajax es la biblioteca de objetos JavaScript

llamada jQuery. Este software gratuito de código abierto es un contenedor de
JavaScript. JQuery se utiliza para escribir fácilmente JavaScript del lado del cliente
para navegar y manipular una página y hacer retornos de llamada de Ajax asincrónicos.
Mediante el uso de servicios web en jQuery y JSON, los retornos de llamada en Ajax se
han convertido en prácticas de programación estándar para diseñar y desarrollar
aplicaciones web.
El Ajax Control Toolkit es un conjunto de controles creados por Microsoft que está
integrado en Visual Studio y puede ser arrastrado y soltado en formularios web como
html y controles de servidor. Estos controles están destinados a ser utilizados para
retorno de llamadas en Ajax. Sin embargo, también pueden utilizarse como controles
normales en la parte de cliente y servidor. Por ejemplo, Asp.Net no viene con los
controles Tabs. Sin embargo, el Ajax Control Toolkit lo hace. El control Tab puede
postback al servidor como controles de servidor.
Hugo Ruiz Martínez

2.- Principales vulnerabilidades de AJAX.
Cross-site scripting en AJAX: Las vulnerabilidades basadas en XSS son ya unas

viejas conocidas de todos los desarrolladores web, pero sin duda el amplio uso de
JavaScrip que hace AJAX hace que estas tomen una nueva dimensión.
Envenenamiento XML: Muchas aplicaciones Web 2.0 mueven datos entre el

servidor y el cliente en forma de XML. Es relativamente fácil crear XML malformado,
que unido a un parseo poco cuidadoso del mismo en el servidor, puede degenerar en
una denegación de servicio. Debemos validar en cualquier caso todo XML recibido en el
servidor.
Ejecución maliciosa de código AJAX: Las llamadas AJAX se ejecutan en segundo

plano sin la interacción directa del usuario. Esto hace que el usuario no siempre sea
consciente de las actividades que está realizando un determinada web, lo que una web
maliciosa puede aprovechar para, por ejemplo, hacerse con cookies de autentificación .
Validación (únicamente) de cliente en rutinas AJAX: La validación en cliente

en las aplicaciones Web 2.0 es muy rica, esto ha hecho que algunos desarrolladores no
hagan estas mismas validaciones en el servidor. Esto es un error porque es fácil crear
una petición y enviarla al servidor saltándose las validaciones de cliente. Por ello las
validaciones de cliente siempre deben ser respaldadas en el servidor.
Ataques Lógicos contra Ajax. Los ataques lógicos aprovechan la naturaleza de lado
del cliente de las aplicaciones AJAX. Ajax y la web 2.0 son una gran cosa para los
ataques lógicos. Esto a razón de la lógica del negocio es enviada y ejecutada sobre el
lado del cliente. Un ejemplo clásico de ataque lógico es el referente al proceso seguido
por un carrito de compras. El proceso está constituido de cuatro fases: añadir artículo
al carrito, costo total, autorizar tarjeta y pagar. Debido a la aplicación almacenada el
estado de cada paso, el profesional en pruebas de penetración podría llamar a la
autorización de la tarjeta antes de añadir el artículo. Esto podría causar una
autorización para un balance en cero. Luego cuando los artículos sean añadidos, el pago
podría ser llamado a continuación. La aplicación podría asumir, la autorización fue
hecha antes de añadir los artículos y permitiría pagar.
Los ataques lógicos típicamente no se encuentran mediante la utilización de

herramientas automáticas. Esto porque las herramientas no están diseñadas para
Hugo Ruiz Martínez

realizar pruebas lógicas, están diseñadas para ejercitar funcionalidad y encontrar fallas
existentes dentro de la funcionalidad. Para encontrar fallas lógicas, la herramienta
podría necesitar ser capaz de evaluar el éxito del ataque. Por ejemplo; en la falla en el
carrito de compras previamente mencionado; la herramienta podría necesitar entender
está evaluando un carrito de compras y podría también necesitar ser capaz de figurarse
donde detectar lo exitoso de la transacción.
Hay que tener en cuenta el aumento de la superficie de ataque, es decir, la parte que se
ejecuta o desarrolla en la parte del cliente, y esto hace que la exposición o superficie de
ataque sea mayor. La revelación de la lógica de la aplicación hace que los posibles
atacantes conozcan parte del código, ya que este reside en la parte del cliente. Esto hace
que el atacante pueda analizar cierta parte de la lógica, y utilizarla para llevar a cabo
acciones maliciosas sobre la lógica de la aplicación.
La dificultad de la auditoria de las aplicaciones hace que exista un problema de

seguridad, ya que por un lado se debe revisar un mayor número de líneas de código y
hace que hayas más puntos a revisar. La parte de auditoria hay que llevarla tanto de la
pate del cliente como del servidor.
Vulnerabilidades clásicas como SQLi o XSS, y nuevas posibilidades para el XSS. SQLi
es una de las vulnerabilidades top de OWASP, y sigue siendo una de las principales
amenazas de las nuevas tecnologías. Las nuevas posibilidades para los XSS surgen del
almacenamiento de más datos en la parte del cliente y se pueden obtener cookies,
credenciales y realizar un robo de información en profundidad. Mediante el DOM y un
XSS se puede alterar el contenido de un sitio, modifica la dirección de donde los datos o
formularios de usuarios son enviados, robo de cookies y credenciales, tal y como se
mencionó anteriormente.
A pesar de una serie más potente de las tecnologías, los desarrolladores deben ser
conscientes de los agujeros de seguridad potenciales.
De acuerdo con Pete Lindstrom, Director de estrategias de seguridad, “Las

aplicaciones web son los elementos más vulnerables de hoy en día en una organización
de infraestructura de TI”. Un número creciente de organizaciones (tanto con fines de
lucro y sin fines de lucro) dependen de aplicaciones basadas en Internet que
aprovechan el poder de AJAX. Como este grupo de tecnologías se vuelve más compleja
para permitir que la profundidad y la funcionalidad discutida, y, si las organizaciones
no aseguran sus aplicaciones web, entonces los riesgos de seguridad solo aumentará.
Hugo Ruiz Martínez

3.- Principales mecanismos de defensa a implementar en toda la

arquitectura de una aplicación web AJAX.
Fundamentalmente, no hay nada nuevo sobre los problemas de seguridad conocidos en

AJAX. Así que solo nos queda aplicar algunos buenos principios de seguridad para el
uso de esta tecnología.
Uno de los retos principales para las aplicaciones de AJAX es que al trasladar el código
al cliente se involucra una gran cantidad de formatos de datos, protocolos, analizadores
e intérpretes. Estos incluyen JavaScript, VBScript, Flash, JSON, XML, REST,
XMLHttpRequest, XSLT, CSS y HTML además de las tecnologías de servidor
involucradas. Además, como si esto no fuera suficiente, cada framework de AJAX tiene
sus propios formatos.
El tamaño de la superficie de ataque que presente una aplicación proporciona a un

atacante diferentes maneras para causar algún daño a las aplicaciones o a los usuarios.
Mientras más tecnologías se utilicen, más grande será la superficie de ataque. En
consecuencia se mencionan tres recomendaciones para reducir la superficie de ataque
en las aplicaciones que utilicen AJAX:
 Sepa lo que se ejecuta
En AJAX cada vez es más difícil saber dónde se ejecutará el código. Tome por ejemplo
las herramientas Web de Google (Google Web Toolkit, GWT). Usted programa en Java
y el entorno toma cierta parte del código y la compila en JavaScript que funciona en el
cliente.
Así que si usted comete un error e implementa autenticación, control de acceso,

validación u otro mecanismo de seguridad del lado del cliente, un atacante
simplemente podría pasar estos mecanismos con Firebug. Imagine que usted tiene
cuidado en el código de modo que garantiza que funciones administrativas nunca serán
mostradas a usuarios ordinarios. Esto suena bien, pero usted olvidó que el código de la
interfaz de usuario corre del lado del cliente. Entonces el atacante utiliza Firebug para
llamar a las funciones administrativas. Si no se realizan las verificaciones necesarias del
lado del servidor, un atacante podría obtener privilegios administrativos.
La solución es ser cuidadoso en las actividades que se deben desempeñar del lado del
cliente y del lado del Servidor.
Hugo Ruiz Martínez

 Mantenga los datos separados del código
Los hackers frecuentemente utilizan una técnica llamada "inyección" para introducir
comandos en ciertas secciones de datos de modo que logren ejecutarlos. Este truco es el
corazón de muchos ataques como inyección de SQL, comandos, LDAP, XSS y
desbordamientos de memoria.
La clave para detener estos ataques está en nunca ejecutar datos que podrían ejecutar
código. Pero con AJAX, muchos de los datos y código son combinados en DOM. Dado
que actualmente no existe una estructura como HTML que mezcle código y datos.
Así que, sea cuidadoso con los datos que podrían incluir una entrada del usuario. En
este caso procure validar todos los datos antes de ejecutarlos, aún en aquellos datos que
se ejecutan del lado del cliente.
 Tenga cuidado de la codificación
Codificar dificulta las cosas ya que los atacantes pueden esconder sus ataques
codificándolos y así lograr ejecutar sus ataques en las aplicaciones que son vulnerables.
Actualmente se utilizan diferentes esquemas de codificación o una doble codificación
para ocultar sus ataques. Existen docenas de esquemas y no existe una manera de saber
que esquema se debería reconocer para prevenir el ataque. Esto hace que reconocer
este tipo de ataques sea muy complejo si no es que imposible.
Siempre que se envíe o reciban datos, ambas partes deben conocer el tipo de
codificación que se utiliza. De modo que la aplicación no intente adivinar el esquema de
codificación. No es posible prevenir que un atacante envíe datos con otro tipo de
codificación pero la aplicación no tendrá que ejecutarlos. Por ejemplo:
o Establezca el tipo de codificación en la cabecera de HTML:
< meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
o Establezca el tipo de codificación al inicio de documentos XML:
<-xml version="1.0" encoding="utf-8"->
Recuerde, la superficie de ataque de AJAX está bajo su control. Las decisiones que
realice pueden incrementar drásticamente el tamaño de la superficie de ataque.
Asegúrese de dónde se ejecuta el código, qué tipo de formato de datos y protocolos
Hugo Ruiz Martínez
están involucrados y también que analizadores e intérpretes se utilizan. Y lo más

importante, asegure que los datos y el código se mantengan separados.
Ejemplo Ajax:
En primer lugar vamos a crear los archivos necesarios y comprobar que todo funcione
correctamente. Sigue las instrucciones que vamos a ir dando a continuación. Crea un
archivo denominado cursoAjaxCU01206F.html con el contenido que indicamos a
continuación. No te preocupes ahora por entender todo el código, lo explicaremos
después:
Archivo html:
Hugo Ruiz Martínez

Archivo php:
Nuestro fichero php es un fichero que contiene información en forma de arrays sobre

países y ciudades que pertenecen a esos países. En concreto se utilizan cuatro países:
España, México, Argentina y Colombia, y para cada país se definen las principales
ciudades utilizando un array o arreglo. Así por ejemplo $ciudad[3][4] es el elemento
del array ciudad con primer índice 3 y segundo índice 4. En este ejemplo el primer
índice indica el país (0 España, 1 México, 2 Argentina y 3 Colombia) y el segundo índice
la ciudad (en este caso la ciudad con índice 4). $ciudad[3][4] es “Cartagena”. Estamos
usando arrays con índice inicial cero, por tanto $ciudad[3][4] se lee como “quinta
ciudad (índice cuatro) del cuarto país (índice 3)”.
Para cada país se definen un grupo de ciudades.
En el fichero php se recupera (o se trata de recuperar) un parámetro usando

REQUEST. Request nos permite recuperar tanto parámetros pasados por post como
por get. Una vez identificado el parámetro esperado, que es el nombre de un país entre
none, spain, mexico, argentina, colombia, se procede a comprobar si el parámetro país
recibido coincide con alguno de estos valores. En caso de recibirse none o un valor
extraño, el resultado o ejecución del fichero devuelve un código HTML que se define en
Hugo Ruiz Martínez

la última línea mediante una sentencia echo. El código HTML devuelto es la

concatenación de una variable $msg y otra variable $ciudadesRespuesta.
Si se ha recibido un país en el formato esperado, la respuesta será del tipo:
En el fichero HTML tenemos un contenido HTML que incluye un formulario donde se

permite elegir entre varios países (España, México, Argentina, Colombia) y el atributo
value asociado a cada opción es exactamente el que espera recibir el fichero php.
Además tenemos algunos estilos definidos con CSS.
Finalmente tenemos un código JavaScript con una función denominada

mostrarSugerencia (str). Esta función se ejecuta como respuesta al evento onchange
que se produce cuando el usuario elige un país en el combobox desplegable del
formulario. Al elegirse un país se pasa a la función this.value, que contiene el atributo
value del elemento del combobox elegido. Los valores posibles son none, spain, mexico,
argentina y colombia.
En el código html se ha dejado un div con id listaCiudades que se encuentra vacío (<div
id="listaCiudades"> </div>). En este div es donde tenemos previsto mostrar las
ciudades que recuperemos del servidor en función de la opción elegida por el usuario,
usando Ajax para ello.
Nos vamos a centrar en el código JavaScript, que es donde se encuentra Ajax

incorporado.
Recuperación de información desde el servidor en segundo plano
Sube el fichero HTML al servidor (en la misma ruta donde tengas el fichero PHP) e
invoca la ruta donde se encuentre, que será del tipo
http://aprenderaprogramar.com/cursoAjaxCU01206F.html.
Ahora debes ser capaz de elegir opciones del combobox desplegable y visualizar
resultados por pantalla. Por ejemplo, si eliges la opción “Argentina”, el resultado
esperado será que por pantalla se visualice:
Hugo Ruiz Martínez

Hugo Ruiz Martínez

Conclusiones
1.) Aprendimos que Ajax no es una tecnología en sí mismo. En realidad, se trata de

varias tecnologías independientes que se unen de formas nuevas y sorprendentes.
2.) Conocimos que AJAX requiere un conocimiento avanzado de todas y cada una de las
tecnologías anteriores. En las aplicaciones web tradicionales, las acciones del usuario
en la página (pinchar en un botón, seleccionar un vínculo).
3.) AJAX no requiere instalación de plugins, applets de Java, ni ningún otro elemento
adicional a instalarse en el cliente.
4.) Reducción de tráfico entre cliente y el servidor. El servidor tiene una mejor carga de
trabajo. Las transacciones se resuelven más rápido.
5.) Por otra parte, existen algunos problemas que afectan a AJAX y deben ser
corregidos para garantiza la continuidad. Dos de los principales se presentan en las
áreas de seguridad y compatibilidad. Sobre el primero cabe mencionar que aunque
cualquier clase de sistema web es propenso a vulnerabilidades en su seguridad, la
complejidad añadida de las aplicaciones AJAX, sobre todo en lo que respecta al código
residente en el lado del cliente, repercute negativamente en su seguridad magnificando
el problema.
6.) En cuanto al aspecto de la compatibilidad, el problema de las implementaciones

inconsistentes para los distintos navegadores web constituye una de las principales
barreras que enfrenta AJAX. Paradójicamente dicho problema no surge directamente
de la adopción de esta técnica, sino de la falta de estándares que determinen la manera
de utilizar algunos recursos comprendidos por ella (como el caso del objeto
XMLHttpRequest o XHR) o la incorrecta implementación por parte de los navegadores
de los estándares ya existentes (como el caso de CSS o DOM).
Hugo Ruiz Martínez

Hugo Ruiz Martínez


Actividad Online

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Actividad Online

Cargado por

Copyright:

Formatos disponibles

Actividad. Aplicaciones AJAX. Arquitectura y tecnologías.

Vulnerabilidades de seguridad y defensas

1.- Arquitectura de las aplicaciones web ricas de Internet (RIA) AJAX,

AJAX es el acrónimo inglés para Asynchronous JavaScript and XML (JavaScript

En el caso de la web, las peticiones se hacen normalmente en cada evento de un cliente,

Hugo Ruiz Martínez

Asynchronous, JavaScript, And XML (AJAX), siendo un modo de programación que no

Veamos cómo Funciona:

En este esquema suponemos que el navegador inicialmente contiene una página

Hugo Ruiz Martínez

Página, y enviado 4 paquetes de datos al servidor y recibido 4 paquetes de datos del

La diferencia que ha introducido el uso de Ajax está en que:

- No hemos tenido que cargar la página completa varias veces.

- La transferencia de datos con el servidor es en segundo plano. Esto permite al

Hugo Ruiz Martínez

En las aplicaciones Web tradicionales los usuarios interactúan mediante formularios,

Además en este tipo de aplicaciones Web tradicionales mientras el servidor está

En aplicaciones AJAX se envían peticiones vía http(s) mediante eventos, scripts o

En los siguientes gráficos podemos ver la diferencia entre utilizar un modelo clásico de

Hugo Ruiz Martínez

Tomemos como ejemplo la función de autocompletado de Google; esta te ayuda a

AJAX es la técnica que permite generar aplicaciones web de forma interactiva al

Hugo Ruiz Martínez

XHTML (Extensible Hypertext Markup Language), a grandes rasgos, es un lenguaje de

En última instancia, el usuario ve lo que contienen estos elementos y no la forma en

El DOM (Document Object Model en español Modelo de Objetos del Documento) es

Desarrollar en AJAX requiere tener conocimiento de todas y cada una de las

Hugo Ruiz Martínez

funciona correctamente, pero no crea una buena sensación al usuario. Al realizar

La tecnología AJAX permite el desarrollo de aplicaciones más rápidas y cómodas para

Uso de XMLHttpRequest. Utilizar el objeto XMLHttpRequest para la comunicación

Hugo Ruiz Martínez

Obtención del objeto XMLHttpRequest. Implementar una función para obtener

Uso de la librería Prototype.js. Utilizar la librería Prototype.js para la integración

Hay varias características principales de usar Ajax en una aplicación web:

Callbacks: Ajax es usado para realizar una llamada de retorno (callback), realizando

Hugo Ruiz Martínez

Fácil de usar: Debido a que se está eliminando una devolución de la página. Las

JavaScript es el lenguaje de programación del lado del cliente y XML es un lenguaje de

Otro avance importante para JavaScript y Ajax es la biblioteca de objetos JavaScript

Hugo Ruiz Martínez

2.- Principales vulnerabilidades de AJAX.

Cross-site scripting en AJAX: Las vulnerabilidades basadas en XSS son ya unas

Envenenamiento XML: Muchas aplicaciones Web 2.0 mueven datos entre el

Ejecución maliciosa de código AJAX: Las llamadas AJAX se ejecutan en segundo

Validación (únicamente) de cliente en rutinas AJAX: La validación en cliente

Los ataques lógicos típicamente no se encuentran mediante la utilización de

Hugo Ruiz Martínez

La dificultad de la auditoria de las aplicaciones hace que exista un problema de

De acuerdo con Pete Lindstrom, Director de estrategias de seguridad, “Las

Hugo Ruiz Martínez

3.- Principales mecanismos de defensa a implementar en toda la

Fundamentalmente, no hay nada nuevo sobre los problemas de seguridad conocidos en

El tamaño de la superficie de ataque que presente una aplicación proporciona a un

 Sepa lo que se ejecuta

Así que si usted comete un error e implementa autenticación, control de acceso,

Hugo Ruiz Martínez

 Mantenga los datos separados del código

 Tenga cuidado de la codificación

o Establezca el tipo de codificación en la cabecera de HTML:

< meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

o Establezca el tipo de codificación al inicio de documentos XML:

<-xml version="1.0" encoding="utf-8"->