Web Security

Same-Origin Policy & CORS

Same-Origin Policy (SOP)

The browser's most fundamental security boundary. Two URLs share an origin only when all three parts match: protocol, host, and port.

SOP blocks cross-origin reads by default: scripts on origin A cannot read responses from origin B. Writes (form submissions, navigations) and embeds (images, scripts, iframes) are generally allowed.

Cross-Origin Resource Sharing (CORS)

CORS is the opt-in mechanism that lets a server relax SOP for specific origins. The server declares who may read its responses via Access-Control-* headers.

Simple requests (GET/POST with standard headers and content types like text/plain) skip preflight. Preflighted requests (custom headers, methods like PUT/DELETE, or JSON content type) trigger an OPTIONS preflight first.

# Key CORS response headers
Access-Control-Allow-Origin: https://app.io
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 86400

Cross-Site Scripting (XSS)

XSS lets an attacker inject malicious scripts into pages viewed by other users. The browser executes the script in the context of the victim's session, giving access to cookies, DOM, and APIs.

Prevention

// BAD: DOM-based XSS
document.getElementById('output').innerHTML = location.hash.slice(1);

// GOOD: use textContent instead
document.getElementById('output').textContent = location.hash.slice(1);

Cross-Site Request Forgery (CSRF)

CSRF tricks a logged-in user's browser into making an unwanted request to a site where they're authenticated. The browser automatically attaches cookies, so the server sees a legitimate session.

Prevention

Content Security Policy & Cookies

Content Security Policy (CSP)

CSP is a response header that tells the browser which sources of content are allowed. It is the strongest defense against XSS because it prevents inline scripts and restricts where scripts can load from.

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'nonce-abc123' https://cdn.example.com;
  style-src 'self' 'unsafe-inline';
  img-src *;
  connect-src 'self' https://api.example.com;
  frame-ancestors 'none';

Nonces: Generate a random nonce per request and include it in both the CSP header and each <script nonce="..."> tag. Only scripts with the matching nonce execute. Hashes: Alternatively, specify the SHA-256 hash of the inline script content in the CSP header.

Cookie Security Attributes

Set-Cookie: session=abc123;
  Secure;
  HttpOnly;
  SameSite=Lax;
  Path=/;
  Max-Age=3600

Clickjacking, SSRF & More

OWASP Top 10 Overview

The OWASP Top 10 is a widely-adopted awareness document for web application security. The 2021 edition reorganized categories based on data and community input.