fix: add Next.js RSC headers to CloudFront CachePolicy to prevent cache poisoning#118
Closed
fix: add Next.js RSC headers to CloudFront CachePolicy to prevent cache poisoning#118
Conversation
…he poisoning Add RSC, Next-Router-Prefetch, Next-Router-State-Tree, and Next-URL headers to CacheHeaderBehavior.allowList so that CloudFront distinguishes RSC flight responses from HTML responses in the cache key. Without these headers, static/ISR pages can serve text/x-component data for normal HTML requests (or vice versa) when CloudFront caching is active. Closes #100
Contributor
Author
|
Closing in favor of a revised approach using CloudFront Functions to hash RSC headers into a single cache key header, avoiding the 10-header limit on CloudFront Cache Policies. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Add Next.js App Router RSC headers (
RSC,Next-Router-Prefetch,Next-Router-State-Tree,Next-URL) to the CloudFrontCachePolicyCacheHeaderBehavior.allowListto prevent cache poisoning between HTML and RSC flight responses.Closes #100
Problem
Next.js App Router sends two types of requests to the same URL:
RSC: 1headerWithout these headers in the cache key, CloudFront treats both request types identically. When caching is active (static pages, ISR, or explicit cache headers), an RSC response (
text/x-component) can be cached and served for a normal HTML request, or vice versa.The current sample app uses dynamic rendering (
cookies()calls), soCache-Control: private, no-cache, no-storeprevents caching. However, as a starter kit, users will naturally add static pages or ISR, at which point cache poisoning occurs.Change
Grounding / References
The fix is validated by multiple independent sources:
Varyheader. Vercel's recommended workaround for self-hosted deployments: manually setVary: RSC, Next-Router-State-Tree, Next-Router-Prefetch.rsc,next-router-prefetch,next-router-state-tree,next-urlas cache key components (hashed via CloudFront Function intox-open-next-cache-key).Verification
npm run buildincdk/)RSC: 1header) to the same URL should produce separate cache entries