Habilitando CORS en nuestro servidor

Clase 12 de 39 • Curso de Autenticación con OAuth

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

Este no es 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

Por el contrario, este sí es 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

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:

Everardo Sánchez

student•

Como el puerto es diferente, se toma como si vniera de una fuente diferente a pesar de que el dominio sea el mismo.

Anderson Eduardo Arévalo Ramírez

student•

En Fast Api es un poco más facil, solamente le pasamos una lista con los dominios y ya fua jaajajja

Carlos Eduardo Gomez García

teacher•

En mi caso tuve que instalar la librería usando npm install cors . Me es muy común ver a personas asustarse cuando les sale un error de CORS y no saben cómo resolverlo jaja, a mí también me pasaba hasta que lo entendí, aunque en Laravel por ejemplo, puedo especificarle por medio de los headers directamente cuál dominio y qué métodos soportar para CORS

Carlos Enrique Ramírez Flores

student•

Listo los habilite en modo producción!

const express = require("express");
const cors = require("cors");
const bodyParser = require("body-parser");
const jwt = require("jsonwebtoken");
const { config } = require("./config");

const port = config.hostPort;
const secret = config.authJwtSecret;

const app = express();
//Habilitar CORS para los request especificos de un cliente (Recomendado para producción)
/*
const corsOptions = { origin: "http://example.com" };
app.use(cors(corsOptions))
*/
app.use(cors())

// body parse
app.use(bodyParser.json());

app.post("/api/auth/token", (req, res) => {
  const { email, username, name } = req.body;
  const token = jwt.sign({ sub: username, email, name }, secret);
  res.json({ access_token: token });
});

app.get("/api/auth/verify", async (req, res, next) => {
  const { access_token } = req.query;
  try {
    const decoded = jwt.verify(access_token, config.authJwtSecret);
    res.json({ message: "the access token is valid", username: decoded.sub });
  } catch (e) {
    next(e);
  }
});

const server = app.listen(port, () => {
  console.log(`Listening http://localhost:${port}`);
});

my package.json

{
  "name": "api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index",
    "dev": "nodemon index",
    "lint": "standard",
    "lint-fix": "standard --fix"
  },
  "keywords": [],
   "author": "Carlos Enrique Ramírez Flores",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "jsonwebtoken": "^8.5.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.4",
    "standard": "^14.3.4"
  }
}

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)
    }
}))

const express = require("express");
const cors = require("cors");
const bodyParser = require("body-parser");
const jwt = require("jsonwebtoken");
const { config } = require("./config");

const port = config.hostPort;
const secret = config.authJwtSecret;

const app = express();
//Habilitar CORS para los request especificos de un cliente (Recomendado para producción)
/*
const corsOptions = { origin: "http://example.com" };
app.use(cors(corsOptions))
*/
app.use(cors())

// body parse
app.use(bodyParser.json());

app.post("/api/auth/token", (req, res) => {
  const { email, username, name } = req.body;
  const token = jwt.sign({ sub: username, email, name }, secret);
  res.json({ access_token: token });
});

app.get("/api/auth/verify", async (req, res, next) => {
  const { access_token } = req.query;
  try {
    const decoded = jwt.verify(access_token, config.authJwtSecret);
    res.json({ message: "the access token is valid", username: decoded.sub });
  } catch (e) {
    next(e);
  }
});

const server = app.listen(port, () => {
  console.log(`Listening http://localhost:${port}`);
});

{
  "name": "api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index",
    "dev": "nodemon index",
    "lint": "standard",
    "lint-fix": "standard --fix"
  },
  "keywords": [],
   "author": "Carlos Enrique Ramírez Flores",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "jsonwebtoken": "^8.5.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.4",
    "standard": "^14.3.4"
  }
}

Habilitando CORS en nuestro servidor

Bienvenida e introducción

Qué aprenderás sobre autenticación con OAuth

Stack de seguridad para aplicaciones modernas

Autenticación

Autorización

JSON Web Tokens

JSON Web Tokens

Autenticación tradicional vs JWT

Configuración inicial de los proyectos

Firmando un JWT

Verificando nuestro JWT firmado y buenas practicas con JWT

Server-Side vs Client-Side sessions

Protegiendo nuestros recursos con JWT

Habilitando CORS en nuestro servidor

Profundizando el concepto de JWKS

OAuth 2.0

Cómo elegir el flujo adecuado para OAuth 2.0

¿Qué es OAuth 2.0?

Conociendo el API de Spotify

Creando los clientes de Spotify y servicios iniciales

Implementando Authorization Code Grant

Usando nuestro access token para obtener nuestros recursos

Implementando Implicit Grant

Implementando nuestro servicio de autenticación

Modificando nuestro Layout

Implementando Client Credentials Grant

Implementando Resource Owner Password Grant

Implementando Authorization Code Grant (PKCE)

Open ID Connect

¿Qué es OpenID Connect?

Implementando OpenID Connect

Preocupaciones con JWT y OAuth 2.0

¿Cuáles son las preocupaciones con JWT?

¿Cuáles son las preocupaciones con OAuth 2.0?

Haciendo uso de Auth0

¿Qué es Auth0?

Auth0 Lock y auth0.js

Universal Login

Social Login con Auth0

Custom Social connection con Spotify

Multifactor authentication

Authorization Extension en Auth0

Consideraciones para producción

Buenas prácticas para el despliegue en producción

Uso de diferentes tenants para producción con Auth0

Cierre del curso

Cierre del curso