cop-middleware Overview

The cop middleware provides tokenless cross-origin protection by inspecting Sec-Fetch-* headers that modern browsers automatically include with every request. Unlike CSRF tokens, COP requires no hidden form fields or session storage -- the browser itself provides the security signal.

What is COP?

COP stands for Cross-Origin Protection. It is a server-side strategy that uses metadata the browser attaches to every request to determine whether the request is legitimate.

Modern browsers send a set of Sec-Fetch-* headers that describe the context of each request:

Header	What It Tells You	Example Values
Sec-Fetch-Site	Where the request came from relative to the server	same-origin, same-site, cross-site, none
Sec-Fetch-Mode	What kind of request it is	navigate, cors, no-cors, same-origin
Sec-Fetch-Dest	What the response will be used for	document, script, image, empty

These headers are set by the browser and cannot be overridden by JavaScript. A malicious page cannot fake them.

The COP middleware reads these headers and blocks requests that do not match your allowed configuration. For example, if you only allow same-origin requests, any form submission or fetch from a different site is rejected.

How COP Differs from CSRF and CORS

Middleware	Purpose	Requires Tokens	Direction
COP	Block unwanted cross-origin requests	No	Inbound protection
CSRF	Verify form submissions came from your site	Yes	Inbound protection
CORS	Allow specific cross-origin requests	No	Outbound permission

COP vs CSRF: Both protect against cross-site request forgery, but through different mechanisms. COP relies on browser-provided headers (no token management needed). CSRF relies on a secret token embedded in forms. COP is simpler but only works in browsers that support Sec-Fetch-* headers (all modern browsers do).

COP vs CORS: These solve opposite problems. CORS opens up your server to cross-origin requests. COP locks down your server to reject them. You might use CORS on a public API and COP on your server-rendered application.

When to Use COP

Use COP when:

• Your application is server-rendered and all requests should come from the same origin.
• You want cross-origin protection without managing tokens.
• You want a first line of defense that complements CSRF tokens.

You can also use COP and CSRF together for defense in depth:

let router = createRouter({
  middleware: [
    cop(),   // Block cross-origin requests via browser headers
    csrf(),  // Validate tokens for older browsers without Sec-Fetch support
  ],
})

Quick Example

import { createRouter } from 'remix/fetch-router'
import { cop } from 'remix/cop-middleware'

let router = createRouter({
  middleware: [
    cop(),
  ],
})

This blocks any browser request where Sec-Fetch-Site is not same-origin. Non-browser clients (like curl or mobile apps) that do not send Sec-Fetch-* headers are allowed through, since they are not vulnerable to cross-origin attacks.

Next Steps

• Tutorial: Add COP to Your Server -- Step-by-step guide to configuring COP.
• API Reference -- Complete documentation of options and behavior.