CSRF Validation with Proxied Requests in Serverless Environments

[shethj]

Hey Maintainers,

Context

We're building an application using React Router v7 deployed on AWS Lambda behind a CDN/proxy layer. We upgraded to v7.12 and are looking to implement a proper solution for the CSRF validation introduced.

In our architecture:

1. Client → sends request to public domain (e.g., www.example.com)
2. CDN/Proxy → forwards to AWS Lambda via API Gateway
3. API Gateway → modifies the Host header to the internal Lambda endpoint
4. Lambda → runs Express.js with React Router SSR

The Problem

React Router's CSRF protection compares the Origin header (set by the browser to the public domain) against the Host header (modified by API Gateway to the internal endpoint). This causes legitimate form submissions to fail:

• Browser sends: Origin: https://www.example.com
• Lambda receives: Host: abcd1234.execute-api.us-east-1.amazonaws.com
• React Router rejects: Origin ≠ Host ❌

Current Solutions & Their Issues:

Option 1: Using allowActionOrigin

export const unstable_dataStrategy = createSingleActionRevalidationDataStrategy({
allowActionOrigin: ['https://www.example.com']
});

Concerns:

• Feels like a "bypass" rather than a proper validation
• Requires maintaining a list of all possible origins (including vanity domains)
• Evaluated at build time, not runtime. This breaks things because the API gateway sets/rewrites the host header.

Option 2: Normalizing Host Header via Middleware

app.use((req, res, next) => {
  const forwardedHost = req.headers['x-forwarded-host'];
  if (forwardedHost) {
    req.headers['host'] = forwardedHost;
  }
  next();
});

Concerns:

• X-Forwarded-Host can be spoofed if not properly validated
• Requires trusting proxy headers without cryptographic verification
• Doesn't feel like an "official" solution for this common architecture

Questions for the Team

1. Is there a recommended pattern for React Router CSRF validation behind proxies/CDNs in serverless environments?

2. Could React Router support a CSRF token approach instead of (or in addition to) origin/host comparison? Something like:

   • Server generates a cryptographically secure token
   • Token is embedded in forms (similar to traditional CSRF protection)
   • React Router validates the token on submission
   • This would be immune to header manipulation

3. Could there be a runtime-evaluated validation function? Instead of a static list, something like:

   validateActionOrigin: (request, origin) => {
     // Custom validation logic that can access runtime environment
     return isValidOrigin(origin, request.headers);
   }

4. Are there plans to make the CSRF validation more flexible for infrastructures where the Host header is legitimately different from the Origin due to proxying?

What we're looking for is a solution that:

• Works with proxy/CDN infrastructure out of the box
• Doesn't require header manipulation workarounds
• Provides cryptographic verification rather than just header comparison
• Can be configured at runtime based on deployment environment
• Maintains strong security guarantees

This architecture pattern (CDN → API Gateway → Lambda) is very common in modern serverless deployments and a first-class solution would benefit the entire ecosystem.

Thanks!