Habilitando CORS en producción

Clase 39 de 43 • Curso de Express.js 2018

Contenido del curso

Bienvenida e introducción

Template Engines y archivos estáticos

Creando un API Restful

Conectando Express.js con servicios externos

Middlewares: En el medio del request

Autenticación en Express.js

Testing

Deployment

Tomar examen

El Intercambio de Recursos de Origen Cruzado (Cross-Origin Resource Sharing) es un mecanismo que agrega unos encabezados (Headers) adicionales HTTP para permitir que un user agent (generalmente un navegador) obtenga permisos para acceder a los recursos de un servidor en un origin distinto (dominio) del que pertenece.

Por ejemplo una solicitud de origen cruzado seria hacer una petición AJAX desde una aplicación que se encuentra en https://dominio-a.com para cargar el recurso https://api.dominio-b.com/data.json.

Por razones de seguridad, los navegadores restringen las solicitudes HTTP de origen cruzado iniciadas dentro de un script.

Si necesitamos permitir request desde un dominio diferente al del servidor podemos usar el middleware cors para permitirlo, pero es importante no dejarlo expuesto a todos los dominios.

Habilitar CORS para todos los request (No recomendado en producción)

const express = require("express");
const cors = require("cors");
const app = express();

app.use(cors());

app.get("/products/:id", function(req, res, next) {
  res.json({ msg: "This is CORS-enabled for all origins!" });
});

app.listen(8000, function() {
  console.log("CORS-enabled web server listening on port 8000");
});

Habilitar CORS para los request especificos de un cliente (Recomendado para producción)

const express = require("express");
const cors = require("cors");
const app = express();

const corsOptions = { origin: "http://example.com" };

app.use(cors(corsOptions));

app.get("/products/:id", function(req, res, next) {
  res.json({ msg: "This is CORS-enabled for only example.com." });
});

app.listen(8000, function() {
  console.log("CORS-enabled web server listening on port 8000");
});

Debemos tener en cuenta que para aplicaciones server-side es poco probable que necesiten el uso de CORS debido a que las aplicaciones conviven en el mismo dominio. Sin embargo, es buena practica habilitarlo para los llamados externos de nuestra API.

Más información sobre el middleware cors en https://expressjs.com/en/resources/middleware/cors.html

Comentarios

Carlos Enrique Ramírez Flores

student•

Una vez estaba intentando conectar Angular con Laravel y fue un desmadre por esto de los CORDS no sabia que onda con esto, total que estuve checando y encontre un ejemplo que me ayudo, pero no profundice mis conocimientos en ellos. Creo que esto de CORS es necesario tenerlos muy claros para la implementación y lo mas importante es que son por seguridad de nuestas apps.

David Armando Velazquez

student•

no entiendo, meh

Jhonnattan Rivera

student•

una solicitud directa es cuando un usuario (navegador) llama a tu web. una solicitud cruzada es cuando un usuario (navegador) llama a otro sistema y este sistema llama a tu web. entonces con cors tu puedes decirle que en sistemas cruzados, solo se permite el acceso a determinados ip o direcciones web. tambien puedes bloquearle el acceso a todo el mundo y permitir solo un ip especifico.

Walter Ugalde A

student•

// Importar la libreria de cors
const cors = require('cors')

//Configuracion del cors
const ALLOWED_ORIGINS = ['https://miAPI.com', 'http://localhost:8080']
app.use(cors({
    origin: function (origin, callback) {
        if(!origin) return callback(null, true)
        if(ALLOWED_ORIGINS.indexOf(origin) ===-1)
            return callback(new Error(`Origen no permitido ${origin}, bloqueado, por seguridad`), false)
        return callback(null, true)
    }
}))

Tengo esa confugración, fue necesario agregar ¨http://localhost:8080" ya que por medio de una app hecha en ionic que corre desde mobiles no me permitia conectarme.

Hay alguna forma de hacer eso mejor, que agregando ?

Guillermo Rodas

teacher•

El problema es que Ionic esta generando una aplicación mobile hibrida, por lo que por debajo esta funcionando como un cliente de navegador.

Lo que puedes hacer es usar proxy server con ionic:

Andrés Felipe Castañeda

student•

Detallitos que dan valor en seguridad

Naldo Duran

student•

✌

Jaime Ramos

student•

muy buen artículo.

juan david jaramillo zuñiga

student•

De hecho, el middleware de Express de Cors permite configurar origenes distintos para diferentes rutas. Super bueno para algunos casos.

Luis Andrade

student•

Eso quiere decir que al habilitar el cors, para solo permitir el acceso a un solo dominio, seria dominio( server ) del fron-end al backend?

jorge llanque

student•

Creo que los CORS es necesario tenerlos muy claros para la implementación y lo mas importante es que son por seguridad de nuestas apps.

const express = require("express");
const cors = require("cors");
const app = express();

app.use(cors());

app.get("/products/:id", function(req, res, next) {
  res.json({ msg: "This is CORS-enabled for all origins!" });
});

app.listen(8000, function() {
  console.log("CORS-enabled web server listening on port 8000");
});

const express = require("express");
const cors = require("cors");
const app = express();

const corsOptions = { origin: "http://example.com" };

app.use(cors(corsOptions));

app.get("/products/:id", function(req, res, next) {
  res.json({ msg: "This is CORS-enabled for only example.com." });
});

app.listen(8000, function() {
  console.log("CORS-enabled web server listening on port 8000");
});

// Importar la libreria de cors
const cors = require('cors')

//Configuracion del cors
const ALLOWED_ORIGINS = ['https://miAPI.com', 'http://localhost:8080']
app.use(cors({
    origin: function (origin, callback) {
        if(!origin) return callback(null, true)
        if(ALLOWED_ORIGINS.indexOf(origin) ===-1)
            return callback(new Error(`Origen no permitido ${origin}, bloqueado, por seguridad`), false)
        return callback(null, true)
    }
}))

Habilitando CORS en producción

Bienvenida e introducción

¿Dónde aprender Express.js actualizado?

Lo que aprenderás sobre Express.js

¿Qué es express y para qué sirve?

Creando tu primer servidor

Express application generator

Template Engines y archivos estáticos

Qué es template engine y cómo crearlo

Implementando un template engine

Usando Pug como template engine

Usando Handlebars como template engine

Creando nuestro layout de productos usando Pug

Manejo de archivos estáticos

Creando un API Restful

Anatomía de una API RESTful e implementación CRUD

Implementando nuestra capa de Servicios

Recapitulando el proyecto

Request object

Conectando Express.js con servicios externos

Conexión a Mongodb en Express.js

Conectando nuestros servicios con mongo DB

Implementando acciones CRUD en MongoDB

Configurar una cuenta en Amazon AWS

Middlewares: En el medio del request

Qué es un middleware y qué tipos existen

Manejo de errores usando un middleware

Validación de datos usando un middleware

Implementando Sentry para el manejo de log de errores

Qué es Joi y Boom y cómo configurar Joi

Configurando Boom y nuestra página 404

Middlewares populares

Autenticación en Express.js

JSON Web Tokens

Configuración y uso de Passport.js

Asegurando nuestra API e identificando rutas sensibles

Testing

Creando tests para nuestros endpoints

Creando tests para nuestros servicios

Creando tests para nuestras utilidades

Agregando coverage para ver la calidad de nuestras pruebas

Debugging e inspect

Deployment

Buenas prácticas para el despliegue en producción

npm script

Añadiendo manejo de cache y seguridad con helmet

Cómo usar las variables de entorno para diferente ambientes

Habilitando CORS en producción

Cómo funciona y por qué es importante el uso de HTTPS

Desplegando con Now y detectando vulnerabilidades con npm audit

Automatizar el chequeo de vulnerabilidades con snyk

Conclusiones