CORS

The Same-Origin Policy (SOP) is a fundamental security mechanism that restricts how documents/scripts from one origin can interact with resources from another origin.

What is an Origin?

An origin is defined by the combination of:

• Protocol (http/https)
• Hostname (domain.com)
• Port (80, 443, etc.)

https://www.example.com:443/page
|____| |______________||__| |___|
protocol  hostname     port  path

Same Origin:
https://www.example.com/page ✅
https://www.example.com/other ✅

Different Origins:
http://www.example.com/page  ❌ (different protocol)
https://api.example.com/page ❌ (different hostname)
https://www.example.com:8080  ❌ (different port)

The Same-Origin Policy has specific rules about what's allowed and what's blocked.

What's Allowed (Same Origin)

// Same origin - everything works
const api = 'https://www.example.com';

// Read DOM
document.querySelector('#content');

// Make requests
fetch(`${api}/data`);

// Access cookies
document.cookie;

// Access localStorage
localStorage.getItem('key');

What's Blocked (Cross Origin)

// Different origin - restricted
const external = 'https://api.other.com';

// ❌ Read DOM of iframe
const iframe = document.querySelector('iframe');
iframe.contentDocument.body; // Blocked!

// ❌ Read response body (without CORS)
fetch(external).then(res => res.text()).then(data => {
  // Blocked if no CORS headers!
});

// ❌ Access cookies
document.cookie; // Only shows cookies for current origin

// ❌ Access localStorage of other origin
// Each origin has its own storage

What's Allowed Without CORS

Action	Allowed?
Simple GET requests	✅ (but can't read response)
Simple POST (form data)	✅ (but can't read response)
Reading response body	❌
Custom headers	❌
Non-simple methods (PUT, DELETE)	❌

Why SOP Exists

Without SOP:

Attacker's site (evil.com)
└── iframe with your bank (bank.com)
    └── JavaScript reads your account balance
    └── Sends to attacker's server

With SOP:

Attacker's site (evil.com)
└── iframe with your bank (bank.com)
    └── JavaScript blocked from reading iframe content
    └── Attack prevented!

CORS (Cross-Origin Resource Sharing) is a mechanism that allows servers to explicitly permit cross-origin requests.

How CORS Works

1. Browser sends request to different origin
   GET https://api.example.com/data
   Origin: https://www.mysite.com

2. Server responds with CORS headers
   HTTP/1.1 200 OK
   Access-Control-Allow-Origin: https://www.mysite.com
   Access-Control-Allow-Methods: GET, POST, PUT
   Access-Control-Allow-Headers: Content-Type, Authorization

3. Browser allows JavaScript to read the response

Key CORS Headers

Request Headers (sent by browser):

Header	Purpose
Origin	The origin making the request
Access-Control-Request-Method	Method for preflight
Access-Control-Request-Headers	Headers for preflight

Response Headers (sent by server):

Header	Purpose	Example
Access-Control-Allow-Origin	Allowed origins	* or https://example.com
Access-Control-Allow-Methods	Allowed methods	GET, POST, PUT, DELETE
Access-Control-Allow-Headers	Allowed headers	Content-Type, Authorization
Access-Control-Allow-Credentials	Allow cookies	true
Access-Control-Max-Age	Preflight cache time	86400 (24 hours)
Access-Control-Expose-Headers	Headers client can read	X-Request-ID

Simple vs Non-Simple Requests

Simple Request (no preflight):

• Method: GET, POST, HEAD
• Headers: Only simple headers (Accept, Content-Type, etc.)
• Content-Type: text/plain, multipart/form-data, application/x-www-form-urlencoded

Non-Simple Request (requires preflight):

• Method: PUT, PATCH, DELETE
• Headers: Authorization, Content-Type: application/json
• Custom headers

Server Configuration Examples

Express.js:

const cors = require('cors');

// Allow specific origin
app.use(cors({
  origin: 'https://www.example.com',
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true
}));

// Allow multiple origins
app.use(cors({
  origin: (origin, callback) => {
    const allowed = ['https://www.example.com', 'https://admin.example.com'];
    if (!origin || allowed.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  }
}));

Nginx:

location /api/ {
  add_header Access-Control-Allow-Origin "https://www.example.com";
  add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE";
  add_header Access-Control-Allow-Headers "Content-Type, Authorization";
}

Preflight requests are OPTIONS requests the browser sends to check if the actual request is allowed.

When Preflight Occurs

Non-simple request detected?
├── Yes → Send preflight OPTIONS request
│   ├── Server allows → Send actual request
│   └── Server blocks → Error
└── No → Send request directly

Preflight Flow

Browser                                  Server
  |                                        |
  |  1. OPTIONS /api/data                  |
  |  Origin: https://www.example.com       |
  |  Access-Control-Request-Method: PUT    |
  |  Access-Control-Request-Headers:       |
  |    Content-Type, Authorization         |
  |--------------------------------------->|
  |                                        |
  |  2. Preflight Response                 |
  |  Access-Control-Allow-Origin: *        |
  |  Access-Control-Allow-Methods: GET,    |
  |    POST, PUT                           |
  |  Access-Control-Allow-Headers:         |
  |    Content-Type, Authorization         |
  |  Access-Control-Max-Age: 86400         |
  |<---------------------------------------|
  |                                        |
  |  3. Actual PUT Request                 |
  |  Origin: https://www.example.com       |
  |  Content-Type: application/json        |
  |  Authorization: Bearer token           |
  |--------------------------------------->|
  |                                        |
  |  4. Actual Response                    |
  |  Access-Control-Allow-Origin: *        |
  |  Content-Type: application/json        |
  |<---------------------------------------|

Caching Preflight Results

// Server can cache preflight for 24 hours
app.options('/api/data', cors({
  maxAge: 86400  // 24 hours in seconds
}));

// Browser caches preflight per URL
// Subsequent requests within cache time skip preflight

Handling Preflight in Code

// Express.js with cors middleware
const cors = require('cors');
app.use(cors());

// Manual handling
app.options('/api/data', (req, res) => {
  res.header('Access-Control-Allow-Origin', 'https://www.example.com');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.header('Access-Control-Max-Age', '86400');
  res.sendStatus(204);
});

// Client-side fetch with CORS
fetch('https://api.example.com/data', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token'
  },
  body: JSON.stringify({ name: 'Alice' }),
  credentials: 'include'  // Send cookies
});

Common CORS Errors

Error	Cause	Solution
No 'Access-Control-Allow-Origin'	Server doesn't send CORS header	Configure server CORS
Method not allowed	Method not in Allow-Methods	Add method to allowed list
Header not allowed	Header not in Allow-Headers	Add header to allowed list
Credentials not supported	Allow-Credentials: true with Allow-Origin: *	Use specific origin with credentials