Vercel Skew Protection: How Version Locking Prevents Deployment Chaos

// User opens form at 10:00 AM (deployment v1)
<form>
  <input name="email" />  {/* Old schema */}
</form>

// Deploy at 10:15 AM changes field name (deployment v2)
const handler = (req) => {
  const { emailAddress } = req.body; // ← Expects new field name
  // email field from v1 form = undefined
  throw new ValidationError('emailAddress required');
};

// User submits form at 10:20 AM → 400 error

// Framework automatically appends deployment ID
fetch('/api/users')
// Becomes: /api/users?dpl=dpl_8kX9mN2pQ7vR1s

// Static asset requests also pinned
<script src="/_next/static/chunks/main.js?dpl=dpl_8kX9mN2pQ7vR1s"></script>

// Next.js Server Actions use headers instead of query params
fetch('/api/action', {
  method: 'POST',
  headers: {
    'x-deployment-id': 'dpl_8kX9mN2pQ7vR1s',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(formData)
});

// Optional: Pin entire sessions for long-lived workflows
Set-Cookie: __vdpl=dpl_8kX9mN2pQ7vR1s; HttpOnly; Path=/

// All subsequent requests (including full page reloads) use same deployment
window.location.href = '/next-page'; // ← Still pinned to v1

// ✅ Automatically protected (zero config)
const automaticProtection = {
  clientNavigation: "next/link, router.push(), SvelteKit goto()",
  serverActions: "form submissions, Next.js actions",
  staticAssets: "JS/CSS bundles loaded by framework",
  prefetching: "route and data prefetch requests",
  apiRoutes: "framework-routed API calls"
};

// ❌ Manual protection required
const manualProtection = {
  customFetch: "Direct fetch() calls in client components",
  thirdPartyRequests: "External API calls with your domain assets",
  documentNavigation: "window.location, hard refreshes"
};

// Next.js: Access deployment ID in client components
import { headers } from 'next/headers';

const deploymentId = process.env.VERCEL_DEPLOYMENT_ID;

// Pin custom API calls
const response = await fetch(`/api/custom?dpl=${deploymentId}`);

// Incoming request analysis
const incomingRequest = {
  url: '/api/users?dpl=dpl_8kX9mN2pQ7vR1s',
  headers: { 'x-deployment-id': 'dpl_8kX9mN2pQ7vR1s' },
  cookies: { '__vdpl': 'dpl_8kX9mN2pQ7vR1s' }
};

// Router decision tree
if (deploymentExists(deploymentId) && deploymentId.age < maxAge) {
  route.to(deploymentId);
} else {
  return HTTP_404; // Deployment too old or deleted
}

// Problem: External site embeds your assets at build time
// external-site.com builds with current deployment ID
<script src="https://your-app.vercel.app/_next/static/main.js?dpl=dpl_OLD"></script>

// Your app redeploys, old assets return 404
// external-site.com breaks even though it's working code

// Vercel dashboard settings
const allowedDomains = [
  'external-site.com',
  '*.partner-network.com',
  'app.client-portal.io'
];

// Now cross-origin requests honor deployment IDs
fetch('https://your-app.vercel.app/api/widget?dpl=dpl_OLD', {
  headers: { 'Origin': 'https://external-site.com' } // ← Allowed
}); // ✅ Routes to old deployment

// Middleware: Pin entire user sessions
export function middleware(request: NextRequest) {
  const response = NextResponse.next();
  const deploymentId = process.env.VERCEL_DEPLOYMENT_ID;

  // Pin high-stakes workflows
  if (request.nextUrl.pathname.startsWith('/exam') && !request.cookies.get('__vdpl')) {
    response.cookies.set('__vdpl', deploymentId, {
      path: '/exam',
      httpOnly: true,
      maxAge: 60 * 60 * 4 // 4 hours max exam time
    });
  }

  return response;
}

// Monitor active protection
filter: skew_protection = 'active'
// Shows requests successfully routed to pinned deployments

// Monitor version conflicts
filter: skew_protection = 'inactive'
// Shows requests served from latest deployment (normal behavior)

// Alert on protection failures
filter: status_code = 404 AND url CONTAINS '?dpl='
// Indicates deployment aged out or was deleted

// 1. Prebuilt deployments need matching IDs
vercel build                    // ← Build with temp ID
vercel deploy --prebuilt       // ← Deploy assigns different ID
// Result: Skew protection requests fail

// 2. Long max ages + security issues
maxAge: 30 days
// Vulnerable deployment stays accessible for 30 days
// Solution: Set custom threshold to block problematic deployments

// 3. Asset caching conflicts
CDN cache: 7 days
Skew Protection max age: 1 day
// External CDNs cache assets longer than protection window