The browser security model: origins, CORS, cookies, CSP and headers

HOW IT FITS TOGETHER

KEY TERMS

Origin vs site

An origin is scheme + host + port (https://app.example.com:443). A site is scheme + registrable domain (https://example.com), using the Public Suffix List. The same-origin policy and CORS work on origins; SameSite cookies and Sec-Fetch-Site: same-site work on sites, so a compromised sibling subdomain is same-site but cross-origin.

Same-origin policy

Scripts may send requests anywhere a form or img could, but may only read responses, DOM, and storage from their own origin. Writes leak (CSRF); reads do not. Embedding (script, img, iframe) is allowed by default, which is why XSSI, clickjacking and side channels need separate controls.

CORS

A server opt-in that lets named origins read its responses. Non-simple requests (methods other than GET/HEAD/POST, non-safelisted headers, JSON content type) trigger a credential-less OPTIONS preflight first. Simple requests are sent without asking, so state changes must never depend on CORS for protection.

Cookie attributes and prefixes

Secure (HTTPS only), HttpOnly (no document.cookie), SameSite=Lax or Strict (not sent on cross-site subresource requests or POSTs; Chromium treats a missing SameSite as Lax, other engines do not, so always set it). __Host- forces Secure, Path=/ and no Domain, so subdomains cannot plant or overwrite it. Chrome kept third-party cookies under user choice rather than removing them (April 2025); Safari blocks them and Firefox partitions them, so cross-site embeds should use Partitioned (CHIPS) or the Storage Access API.

Strict CSP and Trusted Types

A strict policy allows scripts by per-response nonce or hash, not by host allowlist: script-src 'nonce-R' 'strict-dynamic'; object-src 'none'; base-uri 'none'. 'strict-dynamic' lets trusted scripts load their own dependencies. Roll out with Content-Security-Policy-Report-Only first. require-trusted-types-for 'script' then makes DOM sinks such as innerHTML reject plain strings; Trusted Types became Baseline in 2026.

Fetch Metadata

Browsers send Sec-Fetch-Site (same-origin, same-site, cross-site, none), Sec-Fetch-Mode and Sec-Fetch-Dest on requests to HTTPS origins. A resource isolation policy rejects cross-site, non-navigation requests before routing. OWASP accepts Sec-Fetch-Site as the primary CSRF signal for apps targeting modern browsers, with an Origin check as a mandatory fallback when the headers are absent; framework CSRF tokens remain its default.

Transport and isolation headers

HSTS pins HTTPS for a host (max-age, includeSubDomains, optional preload list). X-Content-Type-Options: nosniff stops MIME sniffing into script. frame-ancestors replaces X-Frame-Options. COOP same-origin severs window references from cross-origin openers; COEP require-corp or credentialless plus COOP make a page crossOriginIsolated (SharedArrayBuffer, precise timers); CORP declares who may embed a resource.

IN YOUR STACK

import { NextRequest, NextResponse } from "next/server";

export function proxy(request: NextRequest) {
  const nonce = Buffer.from(crypto.randomUUID()).toString("base64");
  const csp = [
    `script-src 'nonce-${nonce}' 'strict-dynamic'`,
    `style-src 'self' 'nonce-${nonce}'`,
    "object-src 'none'",
    "base-uri 'none'",
    "frame-ancestors 'none'",
    "form-action 'self'",
    "report-to csp",
  ].join("; ");

  // Next.js reads the nonce from the request CSP header and stamps its own scripts.
  const headers = new Headers(request.headers);
  headers.set("x-nonce", nonce);
  headers.set("Content-Security-Policy", csp);

  const response = NextResponse.next({ request: { headers } });
  const name = process.env.CSP_ENFORCE ? "Content-Security-Policy" : "Content-Security-Policy-Report-Only";
  response.headers.set(name, csp);
  response.headers.set("Reporting-Endpoints", 'csp="/api/csp-reports"');
  return response;
}

import { randomBytes } from "node:crypto";
import express, { type Response } from "express";
import helmet from "helmet";

const app = express();
app.use((req, res, next) => {
  res.locals.cspNonce = randomBytes(16).toString("base64"); // 128 bits per response
  next();
});

app.use(helmet({
  contentSecurityPolicy: {
    directives: { // merged over helmet defaults (default-src 'self', object-src 'none', ...)
      scriptSrc: [(req, res) => `'nonce-${(res as Response).locals.cspNonce}'`, "'strict-dynamic'"],
      baseUri: ["'none'"],
      frameAncestors: ["'none'"],
    },
  },
  strictTransportSecurity: { maxAge: 63072000, includeSubDomains: true, preload: true },
  crossOriginOpenerPolicy: { policy: "same-origin" },
  crossOriginResourcePolicy: { policy: "same-site" },
  referrerPolicy: { policy: "strict-origin-when-cross-origin" },
}));
// Also set by default: X-Content-Type-Options: nosniff, X-Frame-Options: SAMEORIGIN,
// Origin-Agent-Cluster, X-XSS-Protection: 0; X-Powered-By is removed.

import type { RequestHandler } from "express";

const ALLOWED_SITES = new Set(["same-origin", "same-site", "none"]);
const CROSS_ORIGIN_PATHS = new Set(["/oauth/callback", "/.well-known/openid-configuration"]);

export const resourceIsolation: RequestHandler = (req, res, next) => {
  res.vary("Sec-Fetch-Site").vary("Sec-Fetch-Mode").vary("Sec-Fetch-Dest");
  const site = req.get("Sec-Fetch-Site");
  if (!site) return originCheck(req, res, next); // old browser or non-browser client
  if (ALLOWED_SITES.has(site)) return next();

  const dest = req.get("Sec-Fetch-Dest") ?? "";
  const isNavigation = req.get("Sec-Fetch-Mode") === "navigate" && req.method === "GET";
  if (isNavigation && dest !== "object" && dest !== "embed") return next();
  if (CROSS_ORIGIN_PATHS.has(req.path)) return next();

  res.status(403).send("Cross-site request rejected");
};

// Mount before authentication, body parsing and routing:
// app.use(resourceIsolation);

const base = { secure: true, httpOnly: true, path: "/" } as const;

// First-party session: host-locked, script-invisible, not sent cross-site.
res.cookie("__Host-sid", sessionId, { ...base, sameSite: "lax", maxAge: 8 * 60 * 60 * 1000 });
// Set-Cookie: __Host-sid=...; Max-Age=28800; Path=/; HttpOnly; Secure; SameSite=Lax

// Step-up or admin flows that never start from another site's link.
res.cookie("__Host-admin", adminToken, { ...base, sameSite: "strict" });

// State for a widget embedded on other sites: one jar per top-level site (CHIPS).
res.cookie("__Host-widget", widgetId, { ...base, sameSite: "none", partitioned: true });

// Logout: clear with the same name, path and attributes, then destroy server-side.
res.clearCookie("__Host-sid", { ...base, sameSite: "lax" });

// Response header:
// Content-Security-Policy: require-trusted-types-for 'script'; trusted-types app-html dompurify
// (DOMPurify tries to register its own "dompurify" policy; allow it or expect violation reports.)

import DOMPurify from "dompurify";

const htmlPolicy = window.trustedTypes?.createPolicy("app-html", {
  createHTML: (input) => DOMPurify.sanitize(input),
}) ?? { createHTML: (input) => DOMPurify.sanitize(input) }; // engines without TT

export function renderComment(el, comment) {
  el.querySelector(".author").textContent = comment.author; // text: no sink, no policy
  el.querySelector(".body").innerHTML = htmlPolicy.createHTML(comment.html);
}

// Under enforcement this throws a TypeError instead of executing markup:
// el.innerHTML = comment.html;

import cors from "cors";

const ALLOWED_ORIGINS = new Set(["https://app.example.com", "https://admin.example.com"]);

const apiCors = cors({
  origin(origin, callback) {
    // Exact match only. Never reflect the Origin header or use a suffix regex.
    callback(null, origin !== undefined && ALLOWED_ORIGINS.has(origin) ? origin : false);
  },
  credentials: true, // Access-Control-Allow-Credentials: true
  methods: ["GET", "POST", "PUT", "DELETE"],
  allowedHeaders: ["Content-Type", "Authorization", "X-CSRF-Token"],
  exposedHeaders: ["Request-Id"],
  maxAge: 600, // seconds the browser may cache the preflight
});

// Before auth: preflights never carry cookies or Authorization.
app.use("/api", apiCors);

WHERE IT BITES

• Treating CORS as access control. It is enforced by browsers on reads only; curl, servers and simple cross-site form posts reach your handler regardless.
• Reflecting the request Origin into Access-Control-Allow-Origin with credentials, or matching origins with endsWith or a loose regex. Any origin, or any lookalike domain or taken-over subdomain, can then read authenticated responses.
• An allowlist CSP such as script-src 'self' https://cdn.example.com. Allowlisted hosts with JSONP endpoints or user uploads bypass it; use nonces or hashes with 'strict-dynamic'.
• Relying on SameSite alone for CSRF. Lax permits top-level GETs, same-site subdomains are trusted, and only Chromium applies Lax when the attribute is missing.
• Setting HSTS preload or includeSubDomains before every subdomain is on HTTPS, which locks out internal tools until max-age expires.
• Assuming third-party cookies are gone in Chrome, or that they work everywhere. Chrome kept them under user control, Safari blocks them, Firefox partitions them; design embeds with Partitioned cookies or the Storage Access API.

WHEN IT BREAKS IN PRODUCTION

• CORS fails only in production or on preflight
• Another site can make signed-in users perform actions
• User-submitted content runs scripts in other users' browsers

SOURCES

• MDN: Cross-Origin Resource Sharing (CORS) (opens in new tab)Checked 2026-11-06
• MDN: Set-Cookie (opens in new tab)Checked 2026-11-06
• web.dev: Mitigate cross-site scripting with a strict CSP (opens in new tab)Checked 2026-11-06
• web.dev: Protect your resources from web attacks with Fetch Metadata (opens in new tab)Checked 2026-11-06
• OWASP Cross-Site Request Forgery Prevention Cheat Sheet (opens in new tab)Checked 2026-11-06
• Privacy Sandbox: Next steps for Privacy Sandbox and tracking protections in Chrome (opens in new tab)Checked 2026-11-06