M

MLOG

Español

Desvela los secretos de CORS (Intercambio de Recursos de Origen Cruzado) y aprende a habilitar de forma segura las peticiones entre dominios en tus aplicaciones web. Esta guía completa cubre desde los conceptos básicos hasta configuraciones avanzadas, asegurando una comunicación fluida y segura entre distintos orígenes.

Desmitificando CORS: Una Guía Completa sobre el Intercambio de Recursos de Origen Cruzado

En la web interconectada de hoy, las aplicaciones frecuentemente necesitan acceder a recursos desde diferentes orígenes. Aquí es donde entra en juego el Intercambio de Recursos de Origen Cruzado (CORS). CORS es un mecanismo de seguridad crucial que regula cómo los navegadores web manejan las solicitudes desde un origen (dominio, protocolo y puerto) a un origen diferente. Entender CORS es esencial para que todo desarrollador web construya aplicaciones web seguras y funcionales.

¿Qué es la Política del Mismo Origen?

Antes de profundizar en CORS, es importante entender la Política del Mismo Origen (SOP, por sus siglas en inglés). La SOP es un mecanismo de seguridad fundamental implementado en los navegadores web. Su propósito es evitar que scripts maliciosos en un sitio web accedan a datos sensibles en otro sitio web. Un origen se define por la combinación del protocolo (p. ej., HTTP o HTTPS), el dominio (p. ej., example.com) y el número de puerto (p. ej., 80 o 443). Se considera que dos URL tienen el mismo origen si comparten el mismo protocolo, dominio y puerto.

Ejemplo:

La SOP restringe que los scripts accedan a recursos de un origen diferente a menos que se implementen medidas específicas, como CORS, para permitirlo.

¿Por qué es necesario CORS?

Aunque la Política del Mismo Origen es vital para la seguridad, también puede ser restrictiva. Muchas aplicaciones web modernas dependen de la obtención de datos de diferentes servidores, como APIs o redes de distribución de contenido (CDN). CORS proporciona una forma controlada de relajar la SOP y permitir solicitudes legítimas de origen cruzado manteniendo la seguridad.

Considere un escenario en el que una aplicación web alojada en http://example.com necesita obtener datos de un servidor API alojado en http://api.example.net. Sin CORS, el navegador bloquearía esta solicitud debido a la SOP. CORS permite que el servidor API especifique explícitamente qué orígenes tienen permiso para acceder a sus recursos, permitiendo que la aplicación web funcione correctamente.

Cómo funciona CORS: Los Fundamentos

CORS funciona a través de una serie de encabezados HTTP intercambiados entre el cliente (navegador) y el servidor. El servidor utiliza estos encabezados para informar al navegador si tiene permitido acceder al recurso solicitado. El encabezado HTTP clave involucrado es Access-Control-Allow-Origin.

Escenario 1: Solicitud Simple

Una "solicitud simple" es una solicitud GET, HEAD o POST que cumple con criterios específicos (p. ej., el encabezado Content-Type es uno de application/x-www-form-urlencoded, multipart/form-data o text/plain). En este caso, el navegador envía la solicitud directamente al servidor, y el servidor responde con el encabezado Access-Control-Allow-Origin.

Solicitud del Cliente (desde http://example.com):

GET /data HTTP/1.1
Host: api.example.net
Origin: http://example.com

Respuesta del Servidor (desde http://api.example.net):

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://example.com
Content-Type: application/json

{
  "data": "Some data from the server"
}

En este ejemplo, el servidor responde con Access-Control-Allow-Origin: http://example.com, indicando que las solicitudes desde http://example.com están permitidas. Si el origen en la solicitud no coincide con el valor en el encabezado Access-Control-Allow-Origin (o si el encabezado no está presente), el navegador bloqueará la respuesta e impedirá que el script del lado del cliente acceda a los datos.

Escenario 2: Solicitud Preflight (para Solicitudes Complejas)

Para solicitudes más complejas, como aquellas que usan métodos HTTP como PUT, DELETE, o aquellas con encabezados personalizados, el navegador realiza una solicitud "preflight" usando el método HTTP OPTIONS. Esta solicitud preflight pide permiso al servidor antes de enviar la solicitud real. El servidor responde con encabezados que especifican qué métodos, encabezados y orígenes están permitidos.

Solicitud Preflight del Cliente (desde http://example.com):

OPTIONS /data HTTP/1.1
Host: api.example.net
Origin: http://example.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header

Respuesta del Servidor (desde http://api.example.net):

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://example.com
Access-Control-Allow-Methods: GET, PUT, DELETE
Access-Control-Allow-Headers: X-Custom-Header, Content-Type
Access-Control-Max-Age: 3600

Explicación de los Encabezados:

Si la respuesta preflight del servidor indica que la solicitud está permitida, el navegador procede con la solicitud real. De lo contrario, el navegador bloquea la solicitud.

Solicitud Real del Cliente (desde http://example.com):

PUT /data HTTP/1.1
Host: api.example.net
Origin: http://example.com
X-Custom-Header: some-value
Content-Type: application/json

{
  "data": "Some data to be updated"
}

Respuesta del Servidor (desde http://api.example.net):

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://example.com
Content-Type: application/json

{
  "status": "Data updated successfully"
}

Encabezados CORS Comunes

Aquí hay un desglose de los encabezados CORS clave que necesitas entender:

CORS en Diferentes Lenguajes del Lado del Servidor

Implementar CORS típicamente implica configurar tu aplicación del lado del servidor para enviar los encabezados CORS apropiados. Aquí hay ejemplos de cómo hacerlo en varios lenguajes y frameworks:

Node.js con Express

Puedes usar el paquete de middleware cors:

const express = require('express');
const cors = require('cors');

const app = express();

// Habilitar CORS para todos los orígenes (USAR CON PRECAUCIÓN EN PRODUCCIÓN)
app.use(cors());

// Alternativamente, configurar CORS para orígenes específicos
// app.use(cors({
//   origin: 'http://example.com'
// }));

app.get('/data', (req, res) => {
  res.json({ message: 'This is CORS-enabled for all origins!' });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

Python con Flask

Puedes usar la extensión Flask-CORS:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

# Alternativamente, configurar CORS para orígenes específicos
# CORS(app, resources={r"/api/*": {"origins": "http://example.com"}})

@app.route("/data")
def hello():
    return {"message": "This is CORS-enabled for all origins!"}

if __name__ == '__main__':
    app.run(debug=True)

Java con Spring Boot

Puedes configurar CORS en tu aplicación Spring Boot usando anotaciones o clases de configuración:

Usando Anotaciones:

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin(origins = "http://example.com") // Permitir solicitudes desde http://example.com
public class DataController {

    @GetMapping("/data")
    public String getData() {
        return "This is CORS-enabled for http://example.com!";
    }
}

Usando Configuración:

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/data")
                .allowedOrigins("http://example.com") // Permitir solicitudes desde http://example.com
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*");
    }
}

PHP

 "This is CORS-enabled for http://example.com!");
echo json_encode($data);
?>

CORS y Consideraciones de Seguridad

Aunque CORS habilita las solicitudes de origen cruzado, es crucial implementarlo de forma segura. Aquí hay algunas consideraciones importantes:

Solución de Problemas de CORS

Los problemas de CORS pueden ser frustrantes de depurar. Aquí hay algunos problemas comunes y cómo resolverlos:

Herramientas de Depuración:

Escenarios Avanzados de CORS

Aunque los conceptos básicos de CORS son relativamente sencillos, hay algunos escenarios más avanzados a considerar:

Mejores Prácticas de CORS

Para asegurar una implementación de CORS segura y eficiente, sigue estas mejores prácticas:

Conclusión

CORS es un mecanismo de seguridad crítico que permite solicitudes de origen cruzado controladas en aplicaciones web. Entender cómo funciona CORS y cómo configurarlo adecuadamente es esencial para todo desarrollador web. Siguiendo las directrices y mejores prácticas descritas en esta guía completa, puedes construir aplicaciones web seguras y funcionales que interactúen sin problemas con recursos de diferentes orígenes.

Recuerda siempre priorizar la seguridad y evitar el uso de configuraciones de CORS demasiado permisivas. Al considerar cuidadosamente las implicaciones de seguridad de tus ajustes de CORS, puedes proteger tus aplicaciones y datos de accesos no autorizados.

Esperamos que esta guía te haya ayudado a desmitificar CORS. ¡Feliz programación!

Desmitificando CORS: Una Guía Completa sobre el Intercambio de Recursos de Origen Cruzado | MLOG