Cross-Origin Cookie Authentication with CORS Credentials

Introduction

Welcome to the third lesson of the "Securing your REST API application with TypeScript" course! In our previous lessons, we explored the basics of Cross-Origin Resource Sharing (CORS) and how to handle preflight requests. Now, we will focus on a crucial aspect of web security: enabling and customizing CORS with credentials for cross-origin cookie authentication. This lesson will guide you through the process of securely sharing cookies across different origins, which is essential for maintaining session state and authenticating users in a web application. Let's dive in! 🌟

Understanding Cookies and Web Authentication

Cookies play a vital role in web authentication by storing session information that allows users to remain logged in as they navigate a website. They are small pieces of data sent from a server and stored on a user's device. In cross-origin scenarios, sharing cookies becomes challenging due to security restrictions. Understanding how cookies work and their role in authentication is crucial for implementing secure cross-origin communication.

Cross-Origin Cookie Authentication: Concept and Implementation

Cross-origin cookie authentication refers to the process of using cookies for authentication when making requests between different origins (domains, ports, or protocols). By default, browsers don't send cookies in cross-origin requests due to security concerns such as: Cross-Site Request Forgery (CSRF) : Without proper restrictions, malicious sites could make requests to your API using the user's cookies, potentially performing unauthorized actions. Information leakage : Cookies might contain sensitive information that shouldn't be accessible to third-party sites. Privacy implications : User tracking across multiple domains could violate privacy expectations. To enable cross-origin cookie sharing while addressing these security concerns, we need to configure both server and client sides: Server-side CORS configuration : Setting credentials: true tells the server to include credentials in CORS responses Using a specific origin instead of wildcard * ensures cookies are only shared with trusted domains Client-side fetch configuration : Using credentials: 'include' explicitly instructs the browser to send cookies with cross-origin requests Proper cookie attributes : SameSite=None allows cross-origin cookie sharing (overriding the default security protection) Secure ensures cookies are only sent over HTTPS, preventing interception HttpOnly prevents client-side JavaScript from accessing the cookie, protecting against XSS attacks

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

TypeScript

import cors, { CorsOptions } from 'cors';
import { Router } from 'express';

export const applyCredentialsCors = (router: Router) => {
  const corsOptions: CorsOptions = {
    origin: 'http://localhost:3000', // Specific origin, not *
    credentials: true,               // Allow cookies to be sent
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: ['Content-Type', 'Authorization']
  };

  router.use(cors(corsOptions));
};

import cors, { CorsOptions } from 'cors';
import { Router } from 'express';

export const applyCredentialsCors = (router: Router) => {
  const corsOptions: CorsOptions = {
    origin: 'http://localhost:3000', // Specific origin, not *
    credentials: true,               // Allow cookies to be sent
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: ['Content-Type', 'Authorization']
  };

  router.use(cors(corsOptions));
};

TypeScript

import express from 'express';
import { v4 as uuid } from 'uuid';

const router = express.Router();
const activeSessions = new Map(); // In production, use Redis or another session store

// Login endpoint that creates a session
router.post('/login', (req, res) => {
  const { username, password } = req.body;
  
  // In a real app, validate credentials against a database
  if (username === 'user' && password === 'password') {
    // Generate unique session ID
    const sessionId = uuid();
    
    // Store session info (in production, save to Redis, database, etc.)
    activeSessions.set(sessionId, {
      username,
      loginTime: new Date(),
      // other session data
    });
    
    // Set session cookie with appropriate security settings
    res.setHeader('Set-Cookie', 
      `sessionId=${sessionId}; HttpOnly; Max-Age=3600; SameSite=None; Secure; Path=/`);
    
    res.json({ 
      success: true, 
      message: 'Login successful'
    });
  } else {
    res.status(401).json({ 
      success: false, 
      message: 'Invalid credentials' 
    });
  }
});

import express from 'express';
import { v4 as uuid } from 'uuid';

const router = express.Router();
const activeSessions = new Map(); // In production, use Redis or another session store

// Login endpoint that creates a session
router.post('/login', (req, res) => {
  const { username, password } = req.body;
  
  // In a real app, validate credentials against a database
  if (username === 'user' && password === 'password') {
    // Generate unique session ID
    const sessionId = uuid();
    
    // Store session info (in production, save to Redis, database, etc.)
    activeSessions.set(sessionId, {
      username,
      loginTime: new Date(),
      // other session data
    });
    
    // Set session cookie with appropriate security settings
    res.setHeader('Set-Cookie', 
      `sessionId=${sessionId}; HttpOnly; Max-Age=3600; SameSite=None; Secure; Path=/`);
    
    res.json({ 
      success: true, 
      message: 'Login successful'
    });
  } else {
    res.status(401).json({ 
      success: false, 
      message: 'Invalid credentials' 
    });
  }
});

TypeScript

// Protected endpoint that checks for a valid session
router.get('/protected-resource', (req, res) => {
  const sessionId = req.cookies?.sessionId; // Using cookie-parser middleware
  
  if (!sessionId || !activeSessions.has(sessionId)) {
    return res.status(401).json({ 
      success: false, 
      message: 'Unauthorized - please login' 
    });
  }
  
  const sessionData = activeSessions.get(sessionId);
  
  // Return protected data along with session info
  res.json({
    success: true,
    message: `Welcome back, ${sessionData.username}!`,
    data: {
      // The protected data the user requested
      resourceData: "This is protected information",
      lastAccessed: new Date()
    }
  });
});

// Protected endpoint that checks for a valid session
router.get('/protected-resource', (req, res) => {
  const sessionId = req.cookies?.sessionId; // Using cookie-parser middleware
  
  if (!sessionId || !activeSessions.has(sessionId)) {
    return res.status(401).json({ 
      success: false, 
      message: 'Unauthorized - please login' 
    });
  }
  
  const sessionData = activeSessions.get(sessionId);
  
  // Return protected data along with session info
  res.json({
    success: true,
    message: `Welcome back, ${sessionData.username}!`,
    data: {
      // The protected data the user requested
      resourceData: "This is protected information",
      lastAccessed: new Date()
    }
  });
});

Shell

# First, login to get a session cookie
curl -X POST http://localhost:8080/login \
  -H "Content-Type: application/json" \
  -H "Origin: http://localhost:3000" \
  -d '{"username":"user","password":"password"}' \
  -c cookies.txt \
  -v

# Then access a protected resource using the cookie
curl http://localhost:8080/protected-resource \
  -H "Origin: http://localhost:3000" \
  -b cookies.txt \
  -v

# First, login to get a session cookie
curl -X POST http://localhost:8080/login \
  -H "Content-Type: application/json" \
  -H "Origin: http://localhost:3000" \
  -d '{"username":"user","password":"password"}' \
  -c cookies.txt \
  -v

# Then access a protected resource using the cookie
curl http://localhost:8080/protected-resource \
  -H "Origin: http://localhost:3000" \
  -b cookies.txt \
  -v

TypeScript

import cors, { CorsOptions } from 'cors';
import { Router } from 'express';

export const applyCredentialsCors = (router: Router) => {
  const corsOptions: CorsOptions = {
    origin: 'http://localhost:3000', // Specific origin, not *
    credentials: true,               // Allow cookies to be sent
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: ['Content-Type', 'Authorization']
  };

  router.use(cors(corsOptions));
};

TypeScript

import express from 'express';
import { v4 as uuid } from 'uuid';

const router = express.Router();
const activeSessions = new Map(); // In production, use Redis or another session store

// Login endpoint that creates a session
router.post('/login', (req, res) => {
  const { username, password } = req.body;
  
  // In a real app, validate credentials against a database
  if (username === 'user' && password === 'password') {
    // Generate unique session ID
    const sessionId = uuid();
    
    // Store session info (in production, save to Redis, database, etc.)
    activeSessions.set(sessionId, {
      username,
      loginTime: new Date(),
      // other session data
    });
    
    // Set session cookie with appropriate security settings
    res.setHeader('Set-Cookie', 
      `sessionId=${sessionId}; HttpOnly; Max-Age=3600; SameSite=None; Secure; Path=/`);
    
    res.json({ 
      success: true, 
      message: 'Login successful'
    });
  } else {
    res.status(401).json({ 
      success: false, 
      message: 'Invalid credentials' 
    });
  }
});

TypeScript

// Protected endpoint that checks for a valid session
router.get('/protected-resource', (req, res) => {
  const sessionId = req.cookies?.sessionId; // Using cookie-parser middleware
  
  if (!sessionId || !activeSessions.has(sessionId)) {
    return res.status(401).json({ 
      success: false, 
      message: 'Unauthorized - please login' 
    });
  }
  
  const sessionData = activeSessions.get(sessionId);
  
  // Return protected data along with session info
  res.json({
    success: true,
    message: `Welcome back, ${sessionData.username}!`,
    data: {
      // The protected data the user requested
      resourceData: "This is protected information",
      lastAccessed: new Date()
    }
  });
});

Shell

# First, login to get a session cookie
curl -X POST http://localhost:8080/login \
  -H "Content-Type: application/json" \
  -H "Origin: http://localhost:3000" \
  -d '{"username":"user","password":"password"}' \
  -c cookies.txt \
  -v

# Then access a protected resource using the cookie
curl http://localhost:8080/protected-resource \
  -H "Origin: http://localhost:3000" \
  -b cookies.txt \
  -v

Introduction

Understanding Cookies and Web Authentication

Cross-Origin Cookie Authentication: Concept and Implementation

Join the 1M+ learners on CodeSignal

Pros and Cons of CORS with Credentials

CORS Credentials: Enabling Secure Cross-Origin Cookie Sharing

Setting a Session Cookie

Checking the Session Cookie

Mitigating Security Risks

Conclusion and Next Steps