Problem
When embedding Upstash Box preview URLs in an iframe (common for AI coding agent platforms), two issues arise:
1. WebSocket not supported
Preview URLs (*.preview.box.upstash.com) don't support WebSocket connections. Next.js dev server uses WebSocket for Hot Module Replacement (HMR). Without it, HMR doesn't work and the browser console fills with connection errors:
WebSocket connection to 'wss://xxx-3000.preview.box.upstash.com/_next/webpack-hmr' failed
2. Empty CORS headers break font loading
Preview URL responses include access-control-allow-origin: (empty value, not *). In browsers, this causes 403 errors for resources loaded with the crossorigin attribute (fonts preloaded by Next.js):
GET https://xxx-3000.preview.box.upstash.com/__nextjs_font/geist-latin.woff2 403 (Forbidden)
Server-side fetch returns 200 — the issue is specifically that the empty CORS header causes browser rejection.
3. IntersectionObserver doesn't work in cross-origin iframes
This is a browser security restriction (W3C spec), not an Upstash bug. But it means scroll-triggered animations (framer-motion whileInView, GSAP ScrollTrigger, etc.) never fire when the preview is in a cross-origin iframe.
Feature request: Would it be possible to support custom preview domains (e.g., preview.automatio.ai) so the iframe can be same-origin with the host application? This would resolve the IntersectionObserver limitation.
Environment
@upstash/box: 0.1.28- Runtime: node
- Use case: AI coding agent preview panel (iframe embedding)
Steps to Reproduce
- Create a box and start a Next.js dev server
- Get preview URL via
box.getPreviewUrl(3000)
- Embed the preview URL in an iframe on a different origin
- Observe: WebSocket errors, font 403, IntersectionObserver always returns
isIntersecting: false
Expected Behavior
- WebSocket connections through preview URLs should work (for HMR)
- CORS headers should be
access-control-allow-origin: * (not empty)
- Ideally: custom preview domains to enable same-origin iframe embedding
Problem
When embedding Upstash Box preview URLs in an iframe (common for AI coding agent platforms), two issues arise:
1. WebSocket not supported
Preview URLs (
*.preview.box.upstash.com) don't support WebSocket connections. Next.js dev server uses WebSocket for Hot Module Replacement (HMR). Without it, HMR doesn't work and the browser console fills with connection errors:2. Empty CORS headers break font loading
Preview URL responses include
access-control-allow-origin:(empty value, not*). In browsers, this causes 403 errors for resources loaded with thecrossoriginattribute (fonts preloaded by Next.js):Server-side fetch returns 200 — the issue is specifically that the empty CORS header causes browser rejection.
3. IntersectionObserver doesn't work in cross-origin iframes
This is a browser security restriction (W3C spec), not an Upstash bug. But it means scroll-triggered animations (framer-motion
whileInView, GSAP ScrollTrigger, etc.) never fire when the preview is in a cross-origin iframe.Feature request: Would it be possible to support custom preview domains (e.g.,
preview.automatio.ai) so the iframe can be same-origin with the host application? This would resolve the IntersectionObserver limitation.Environment
@upstash/box: 0.1.28Steps to Reproduce
box.getPreviewUrl(3000)isIntersecting: falseExpected Behavior
access-control-allow-origin: *(not empty)