33

Cuando intento realizar una solicitud GET , POST, PUT, PATCH , DELETE desde mi Frontend recibo por parte del servidor

Solicitud desde otro origen bloqueada: la política de mismo origen impide leer el recurso remoto en http://mi_servidor/ (razón: falta la cabecera CORS 'Access-Control-Allow-Origin').

Tambien lo he visto en ingles algo como:

"No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access."

He investigado QUE es el CORS y lo comentado en la W3C acerca de este tema, y entiendo que significa Intercambio de Recursos de Origen Cruzado, pero no entiendo como funciona.

como podria solucionar esto en mis aplicaciones WEBS?


Por ultimo, he notado que mis aplicaciones front-end generalmente hacen dos solicitudes, una de tipo OPTIONS y las comunes [GET,POST,PUT, PATCH ....] esto a que se debe


Hago las pruebas con test-cors.org y me arroja el mismo error

3
  • 3
    tienes que darle permisos, como son llamadas desde dominios distintos, debes en el lado servidor, aceptar las peticiones desde el origen de la llamada...
    – sioesi
    Commented el 30 nov. 2018 a las 14:30
  • 4
    Fijate en este link, puede ser que haya algo que te sirva, enable-cors.org/server.html
    – Ale
    Commented el 30 nov. 2018 a las 17:02
  • 3
    La idea es obtener una respuesta con una explicación de porque existe, como funciona y para que sirve cada encabezado? o simplemente código en para los distintos lenguajes?
    – Marcos
    Commented el 6 dic. 2018 a las 14:06

6 respuestas 6

35
+450

CORS es un acrónimo que refiere a las reglas de seguridad que garantizan la comunicación entre dos puntos con una precedencia diferente al dominio desde el cual se llama (es decir: diferentes dominios).

En general, dichas reglas son implementadas por el cliente web y es éste quien se encarga de validar la entrega de la información o rechazarla con base a lo que el servidor responda.

Ejemplo de solicitud: cliente-servidor

En la imagen mostrada, se activan dichas reglas al intentar entregar/obtener la información del servidor correspondiente a «otro-dominio.mx», si no se realizar un intercambio de acuerdo a los establecido en el servidor, el cliente web cancelará la solicitud incluso antes de cualquier otra cosa.


"No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access."

Access-Control-Allow-Origin: es un encabezado que se devuelve para indicar si la respuesta puede ser compartida con el dominio solicitante. Puedes indicar los dominios con los que querrás compartir la información (separados por comas) o un asterisco (*) si no conoces la procedencia de tus solicitante.

Nota: el asterisco suele ser útil si tienes una API expuesta (pública), en caso contrario, es recomendable no usarlo.

Código PHP:

header('Access-Control-Allow-Origin: *');

Configuración en HTACCESS:

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

Por ultimo, he notado que mis aplicaciones front-end generalmente hacen dos solicitudes, una de tipo OPTIONS y las comunes [GET,POST,PUT, PATCH ....] esto a que se debe

De acuerdo información de la MDN, estas solicitudes son verificadas y es el mismo navegador el que ejecuta esta llamada OPTIONS para validar que la petición que se hará seguida de ella es válida.

El flujo es el siguiente:

  • Se ejecuta la instrucción para enviar datos al servidor.
  • El cliente crea una nueva petición sucesora que preguntará al servidor si la acción siguiente está permitida.
  • El servidor recibe una solicitud OPTIONS y está obligado a responder los tipos de encabezados permitidos para dicho controlador y/o acción.
    • Encabezado de ejemplo: Access-Control-Allow-Methods: POST, DELETE.
  • El cliente reconoce si en la respuesta se encuentra la petición del usuario.
  • El cliente procede a ejecutar o cancelar la instrucción de envío de datos.

La MDN nos dice lo siguiente:

Solicitudes "verificadas" envían primero una solicitud HTTP por el método OPTIONS al recurso en el otro dominio, para determinar si es seguro enviar la verdadera solicitud. Solicitudes de sitios cruzados son verificadas así ya que pueden tener implicaciones en la información de usuario.

En particular, una solicitud es verificada sí:

  • Usa métodos distintos a GET, HEAD o POST.
  • También, si POST es utilizado para enviar solicitudes de información con Content-Type distinto a application/x-www-form-urlencoded, multipart/form-data, o text/plain, ej. si la solicitud POST envía una carga XML al servidor utilizando application/xml or text/xml, entonces la solicitud es verificada.
  • Se establecen encabezados personalizados (ej. la solicitud usa un encabezado como X-PINGOTHER)

Ejemplo

El siguiente código, representa un ejemplo de una validación ejecutada cuando se recibe la solicitud OPTIONS y este responde a los métodos permitidos para que el navegador pueda proceder.

Código PHP:

if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    // Indica los métodos permitidos.
    header('Access-Control-Allow-Methods: GET, POST, DELETE');
    // Indica los encabezados permitidos.
    header('Access-Control-Allow-Headers: Authorization');
    http_response_code(204);
}

Aunque otra respuesta que puedes emplear (pero solo con fines depurativos) es devolver un encabezado Access-Control-Allow-Methods: *, especialmente deberás tener cuidado con eso pues estás indicando que todo tipo de solicitud es permitida.

Nota: las imágenes fueron construidas con la herramienta Draw.io.

3
  • 1
    @JackNavaRow me base en una sintaxis tipo C para familiarizar, pero ninguno en especial, ¿prefieres ver el ejemplo en código PHP?
    – Chofoteddy
    Commented el 10 dic. 2018 a las 16:52
  • 1
    no, esta bien me gusta tu explicacion solo considero que lo deberias agregar Commented el 10 dic. 2018 a las 16:59
  • 1
    @JackNavaRow he modificado para mejorar la estructura de la explicación y definir el código utilizado.
    – Chofoteddy
    Commented el 10 dic. 2018 a las 17:09
15

Esto principalmente se da cuando desde un servidor no conocido por tu backend intenta acceder.

Para poder solucionarlo dependerá de la arquitectura que tengas. Por ejemplo si tienes un api-managment, sería conveniente que en tu header response habilitaras el servidor especifico, o bien que dieras acceso completo.

HEADER-RESPONSE:
Access-Control-Allow-Origin: *

Ahora bien si no tienes, dependerá del servidor que tengas montado. En caso de Nodejs existe incluso una librería para ello: https://www.npmjs.com/package/cors

Ejemplo Node js con Expressjs:

lo primero que debes hacer es instalarlo en tu server node

npm install cors

Una vez instalado debes configurar tu fichero principal supogamos que se llama app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
const cors = require('cors');

const config = require('./config');

var app = express();

app.use(cors(
  config.application.cors.server
));

Debes agregar los clientes que pueden tener accesso, supongamos que tienes una aplicacion frontend que se ejecuta localhost en el puerto 3000

Tu config.js quedaria de la siguiente manera:

const config = {
    application: {
        cors: {
            server: [
                {
                    origin: "localhost:3000", //servidor que deseas que consuma o (*) en caso que sea acceso libre
                    credentials: true
                }
            ]
        }
}

Esto puede estar en el mismo archivo.

5
  • 1
    De todas formas te dejo el codigo para que alguien mas le ayude en lo pronto @JackNavaRow Saludos! Commented el 30 nov. 2018 a las 14:42
  • 1
    Indica en que servidor estas trabajando para que puedan ayudarte de mejor manera @JackNavaRow Commented el 30 nov. 2018 a las 14:43
  • 1
    Gracias por las correcciones, quedo mas legible para cualquier usuario Commented el 30 nov. 2018 a las 14:48
  • 1
    en el origin conviene especificar el protocolo, el filtro se realiza sobre protocolo, dominio/ip y puerto (salvo que el puerto sea deducible a partir del protocolo http:80 https:443) Commented el 6 dic. 2018 a las 23:33
  • 3
    Me parece que para aconsejar poner Access-Control-Allow-Origin: * habría que exponer cuales son los riesgos de hacerlo. Incluso para otros que lleguen a esta respuesta.
    – Juan
    Commented el 7 dic. 2018 a las 16:30
13

Esta respuesta pretende explicar lo que es CORS en lenguaje humano, como funciona, mostrar que no es un tema trivial y que su configuración no debería ser tomada a la ligera. Todo esto según mi entendimiento.

Pido disculpas de antemano si la respuesta se ha vuelto muy larga y si toca temas que no han sido incluídos en la pregunta del OP.

Referido a las preguntas concretas:

He investigado QUE es el CORS y lo comentado en la W3C acerca de este tema, y entiendo que significa Intercambio de Recursos de Origen Cruzado, pero no entiendo como funciona.

Si ya sabes que es CORS, podés leer directamente ¿Como funciona CORS? más abajo.

Por ultimo, he notado que mis aplicaciones front-end generalmente hacen dos solicitudes, una de tipo OPTIONS y las comunes [GET,POST,PUT, PATCH ....] esto a que se debe

Esta parte se responde en Pedidos preflight (previos al envío).

como podria solucionar esto en mis aplicaciones WEBS?

Esta respuesta completa trata de lo que pienso hay que tener en cuenta para habilitar CORS en un servidor.
En base al contendio y el tipo de acceso deberías determinar que cabeceras harás que tu seridor devuelva.
Mi opinión personal es restringir las autorizaciones lo más posible, explícitamente a servidores que uno controla y que necesiten tener el acceso.
Verificaría que la forma que estoy usando para controlar el acceso no esté entre entre los casos conocido que presentan vulnerabilidades. (Las que se presentan aquí seguramente no son una lista completa, pero suficiente para dar una idea de por donde empezar)
Y por último, si la configuración no funciona, revisaría si mi implementación coincide con alguna de las configuraciones comunes que no funcionan por ser inválidas.

CORS (Cross Origin Resource Sharing / Recursos Compartido de Origenes Cruzado)

CORS es un estandard para que dominios cruzados puedan compartir recursos de una forma controlada.

¿Qué son los dominios?

Dominio en el contexto de CORS es una combinación de protocolo, host, y puerto que identifican al servidor al que le pediremos recursos. Por ejemplo en "http://www.example.com:8080" http es el protocolo, www.example.com es el host, y 8080 es el puerto. El host alternativamente podría ser una dirección de ip y a falta del número de puerto, el mismo sería el default del protocolo (por ejemplo 80 para http y 443 para https).

¿Que son los recursos?

Los recursos son el contenido que el servidor devuelve ante un pedido. Puede ser contenido html, css, javascript, fonts, imágenes, xml, pdfs, etc.

¿Quien hace el pedido?

Sí el usuario. Pero como? Usando un navegador por ejemplo. El término más generico para un navegador es "User agent" (Agente de usuario sería la traducción literal).
Hay diferentes tipos de "User agent" (CURL por ejemplo es otro tipo de user agent) pero el que nos va a importar para CORS son los navegadores web (FireFox, Chrome, Edge, Safari, Opera, etc) por el hecho que permiten ejecutar javascript y soportan XHR (Extensible Markup Language / Hypertext Transfer Protocol) y los más nuevos Fetch.
Estas Apis permiten que código javascript hagan pedidos de recursos a dominios como si fuera el usuario del navegador que ingresa una url en la barra de direcciones.
La diferencia importante a tener en cuenta es que cuando un usuario ingresa una url en la barra de direcciones, lo hace de forma consciente y el resultado se muestra en la pantalla.
Cuando el pedido es hecho desde javascript, es el dominio visitado quien está digitando el pedido, pero lo ejecuta como si fuera el usuario, y el resultado es recibido dentro del javascript en una variable.
En este caso, el usuario probablemente no tenga ningún conocimiento de lo que está pasando.

¿Dónde está el problema de todo esto?

El problema está en la forma en que funciona un navegador web y el javascript que el usuario ejecuta sin saberlo.

Veamos un ejemplo:

El usuario tiene una cuenta en la aplicación web "LosHorarioDeLaFamilia" que está en el dominio A (A representa protocolo, host, y puerto, lo mismo que B más adelante), y donde todos los integrantes de la familia registran que hacen y a que hora para poderse coordinar entre sí.
La aplicación tiene usuario y clave, pide pin para loguearse en un nuevo dispositivo, es sobre https, controla csrf, en fin muy segura.
El usuario se loguea a la aplicación con su usuario y clave, y la aplicación le da una sesión que se guarda en una cookie en el navegador.
Con la url A/verhorarios se fija los horarios de todos para organizarse el día, y luego abre otro tab en el navegador con el link de una oferta que le llegó por correo.
El link podria ser B/ofertamaliciosa (B es el segundo dominio que es diferente de A donde está la aplicación web).
Al abrir este link se descarga una pantalla mostrando el producto, pero además código javascript que usando XHR hace un pedido a A/verhorarios.
El pedido se está haciendo desde el navegador del usuario. Como hay una cookie para el dominio A (que tiene la sesión del usuario), la cookie se envía al dominio A, el servidor en el dominio A no ve nada diferente entre un request hecho con XHR y uno hecho desde la barra de direcciones, por lo que valida la sesión y devuelve los horarios de la familia (en html).
La respuesta del dominio A se guarda en la variable resultado de la llamada XHR y en el paso siguiente, el script malicioso hace otro XHR a un servidor controlado por el atacante enviando el resultado obtenido y así logrando ver informacion confidencial del usuario.
Y el usuario ni se enteró ni tuvo forma práctica de eviatarlo.

Por si no queda claro en el ejemplo, el problema lo aporta el navegador al permitir que el javascript de un dominio pueda ejecutar pedidos a otro dominio en nombre del usuario.

¿Pero si fuera así cualquier sitio podría obtener información de otros sitios frecuentados con el mismo navegador?

Es verdad. Pero los navegadores ya implementaron hace mucho tiempo la política de mismo origen (Same Origin), donde básicamente impiden ejecutar javascript en dominios cruzados.

¿Entonces, de nuevo, que es CORS y para que sirve?

La política de Same Origin directamente impide la llamada cruzada de javascript, algo que muchas veces sí se quiere hacer.
Un ejemplo puede ser tener en el mismo servidor en un puerto la web y en otro puerto la api, efectuándose llamadas desde la web a la api. En este caso cambia el puerto.
Otro ejemplo pueden ser subdominios que necesiten compartir recursos del dominio principal. Al cambiar el subdominio cambia el host y se considera un domino diferente.
Entonces los navegadores que implementan el standard de CORS permiten relajar la política de Same Origin, de forma que el navegador pueda consultar con el dominio que provee el recurso, si el mismo puede ser solicitado desde otro dominio direferente que llamaremos Origin (Origen).
De esta forma el navegador (responsable del problema) puede determinar si permitir la llamada y/o entregar el contenido recibido.

¿Cómo funciona CORS?

La forma en que los navegadores implementan CORS es a través de una serie de headers (cabeceras) que se intercambian con el servidor.
Cuando el navegado detecta un pedido de origen cruzado agrega al resto de las cabeceras del pedido una de Origin con el dominio de donde se descargó el script que origina el pedido.
Por otro lado el script que está haciendo el pedido puede indicar que el mismo incluya credenciales o no (no enviar credenciales es el comportamiento por defecto).
En este contexto credenciales son cookies, la cabecera Authorization (que se usa tanto en basic authentication como en bearer/token authentication), y Certificados de cliente también usados para autenticación.

La respuesta esperada del servidor será algo como: Dado que este pedido involucra / no involucra el envío de credenciales, y está originado por X, se puede / no se puede llevar adelante).

Esta respuesta se materializa de alguna de estas formas:

a) Pedido sin credenciales
Si el pedido se hace sin credenciales el servidor puede enviar su respuesta:

i. Sin agregar ninguna cabecera con lo que el navegador interpreta que negó el acceso. Nótese que puede deberse a una negación explícita o porque el servidor no implementa CORS e ignora las cabeceras.

ii. Agregando una cabecera Access-Control-Allow-Origin:*, permitiendo que cualquier dominio acceda a la respuesta.

iii. Agregando una cabecera Access-Control-Allow-Origin: dominio, que especifica el dominio que puede acceder.

b) Pedido con credenciales
Si el pedido incluye credenciales, para dara acceso al recurso, además de la cabecera Access-Control-Allow-Origin, debe agregar otra cabecera Access-Control-Allow-Credentials:true.
Y en la cabecera Access-Control-Allow-Origin debe especificar el dominio al que le da acceso (no puede usar el comodín *).
El único valor que puede tomar Access-Control-Allow-Credentials es true, la forma de negar la cabecera es no incluyéndola en la respuesta.

Cabecera Vary:Origin

Si hay más de un dominio que puede ser autorizado, entonces el dominio devuelto por el servidor se genera en forma dinámica y potencialmente cambia de pedido en pedido en base a la cabecera Origin que se recibe en el mismo.
En este caso, debe agregarse a las respuestas del servidor la cabecera Vary:Origin para indicarle al navegador que no cachee la respuestas. Esta cabecera evita, además, puede evitar una vulnerabilidad de "Envenenamiento de Caché" del navegador.

Pedidos preflight (previos al envío)

Los navegadores pueden (porque no todos lo hacen) enviar una consulta previa al servidor referente a que métodos y cabeceras son permitidos para un determinado origen.
Para hacer esto el navegador envía un pedido OPTIONS con las cabeceras Origin, Access-Control-Request-Method, y, si fuera el caso, también Access-Control-Request-Headers.

Esto debiera ocurrir cuando se da una de estas condiciones:

1) El método del pedido no es ni GET ni HEAD.
2) El método del pedido es POST y la cabecera Content-Type es otra que application/x-www-form-urlencoded, multipart/form-data, o text/plain.
3) Se agregan cabeceras manualmente diferentes de: Accept, Accept-Language, Content-Language, o Content-Type.

El servidor, si aceptará el pedido para ese origen, responde a un preflight con:

Access-Control-Allow-Origin: dominio
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE (Los method soportados)
Access-Control-Max-Age: <tiempo-en-segundos> (El tiempo que mantiene válida la respuesta)

A estas cabeceras se le agregarían :

Access-Control-Allow-Headers: <lista de cabeceras> (cabeceras habilitadas separadas por coma), en el caso de haberse solicitado las cabeceras admitidas.

Y/o Access-Control-Allow-Credentials:true, si se permitirá que el pedido se haga con credenciales.

Para tener en cuenta al configurar CORS en el servidor

Configuraciones de CORS que no funcionan (Las configuraciones hacen referencia a lo que el servidor devuelve como respuesta)

Las siguientes configuraciones de CORS aparentemente se encuentran con frecuencia en la Internet, pero las mismas son configuraciones inválidas.

1) Autorizar listas de dominios separadas por espacios

Access-Control-Allow-Origin: https://www.example.com https://www.example.com:8080

=> Los valores aceptados son *, un solo dominio, o null (ojo null es una vulnerabilidad, ver más abajo)

2) Habilitar todos los dominios con credenciales

Access-Control-Allow-Origin: *  
Access-Control-Allow-Credentials: true

=> Como esta configuración claramente permite a cualquier sitio ejecutar un pedido con credenciales, es una configuración inválida que será rechazada por los navegadores.

3) Comodines (*) como parte de un dominio.

Access-Control-Allow-Origin: *.example.com 

=> La intención sería darle acceso a cualquier subdominio de example.com, pero el comodín no puede usarse de esta forma.

Problemas conocidos de seguridad en configuración de CORS

Esta lista tiene el propósito de mostrar vulnerabilidades que puede generar una mala configuración de CORS en el servidor.
No pretende ser una lista exhaustiva sino ejemplos de lo que puede pasar si la configuración de CORS se toma como algo trivial.

1) Saltar el control Access-Control-Allow-Origin:* con credenciales, copiando el Origin del pedido al Access-Control-Allow-Origin de la respuesta con credenciales.
Probablemente sea el producto de encontrar una solución cuando la alternativa de permitir todos los orígenes ('*') con credenciales no funciona. El problema es que de esta forma se desactiva completamente la política de Same Origin.

Relacionado a este caso vale la pena mencionar el hacer una verificación ineficiente antes de copiar el domino recibido en la cabecera Origin:

1.1 Verificar que el dominio comience on un patrón determinado.
=> Verificar que comience con: https://ejemplo.com autorizaría acceso a https://ejemplo.com.otrodominio.com por ejemplo.

1.2 Verficiar que el dominio termine con un patrón determinado.
=> Verificar que termine en ejemplo.com autorizaría acceso a https://otroejemplo.com

1.3 Expresiones regulares.
=> El problema con la expresión regular es que si aparte de reconocer el patrón del dominio o subdominio, da lugar a reconocer algo más, ese algo más podría usarse para engañar al servidor.

1.4 Ya se mencionó antes: No incluir la cabecera Vary:Origin
=> Si el dominio indicado con Access-Control-Allow-Origin se genera en forma dinámica dependiendo de la cabecera Origin, siempre debe devolvese la cabecera Vary:Origin para evitar que se cache el resultado.

2) Devolver la cabecera Access-Control-Allow-Origin: null
En un pedido de origen cruzado, el navegador colocará como Origin, el dominio del javascript que está ejecutando el pedido, pero este, haciendo un manejo conveniente de redirecciones, puede provocar que al servidor le llegue el Origin:null.
Si el servidor responde (equivocadamente) Access-Control-Allow-Origin: null para indicar que no da acceso, el navegador interpretará que está dando acceso al pedido.

3) Anular la conexión segura sobre https
Si los pedidos a un dominio de confianza son sobre https entonces debe validarse que el protocolo autorizado también sea https (no http).

4) Utilizar Access-Control-Allow-Origin:* (sin credenciales)
Devolviendo esta cabecera, el código javascript no podrá hacer pedidos que requieran credenciales, pero todavía quedan pueden darse los siguientes escenarios:

4.1 Utilizar el navegador como proxy para hacer pedidos a la intranet del usuario.

=> Si el usuario estuviera corriendo un servidor en el puerto 8080 localmente y devolviendo esta cabecera, el sitio remoto podría ejecutar pedidos como http://127.0.0.1:8080, algo que en principio parece imposible.
Lo mismo si el usuario tuviera acceso a una intranet (sin credenciales).

=> También permite aprovechar potenciales amenazas producto de otras fallas de configuración.

Referencias:
https://developer.mozilla.org/es/docs/Web/HTTP/Access_control_CORS
https://portswigger.net/blog/exploiting-cors-misconfigurations-for-bitcoins-and-bounties

0
7

Como bien te indican esto es un problema en la configuración de tu servidor donde tienes tu API. Este sitio tiene el listado de las soluciones a diferentes servidores web (Apache, IIS, Nginix, Express.js, etc).

Como ejemplo te pongo la solución a un servidor corriendo una aplicación de node.js que utiliza express.

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});
1
  • 6
    res.header("Access-Control-Allow-Origin", "*"); implica saltar el control de cors. Los riesgos que esto implica deberían estar expuestos para que el que lo usea sea conciente de las consecuencias.
    – Juan
    Commented el 7 dic. 2018 a las 16:35
4

Simplemente usando lo siguiente funciona a la perfección entre dos servers.

npm install cors

Y en el index.js (del backend), lo siguinte:

import cors from 'cors';
server.app.use( cors({ origin: true, credentials: true  }) );

Sobre el toptions, suelen se "añadidos" a la hora en enviar peticiones, tales como por ejemplo los headers, que vas a necesitar para tu CORS.

¿Estás usando algun frameworks como Angular o librería como React/Vue?

Tedjo un enlace explicativo de ello en: https://code.i-harness.com/es/q/1cda4c5

4

Para solucionar el problema con NodeJS y Express utilizo este código en el archivo de configuracion app.js que defino previamente.

Con un middleware como este:

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Authorization, X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Allow-Request-Method');
    res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
    res.header('Allow', 'GET, POST, OPTIONS, PUT, DELETE');
    next();
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.