MichilisandClaude Opus 5
e4eb1617d1
GSAP carries the counter roll-ups, the bandeja card physics, the dialog transitions and the three success moments FLOWS.md allows. Every one of them checks prefers-reduced-motion first and does nothing when it is set. boneyard and canvas-ui are not what SPEC.md's stack table says they are: on npm the names belong to two abandoned projects that do neither job. The skeletons were already ours; the two canvas spots are now sixty lines each with no dependency. DECISIONS.md records the substitution. The app installs, keeps a scan taken with no network in IndexedDB and sends it when there is one, falls back to a page that explains itself, and can push a deadline notice. Reading the log of what is queued is the source of truth, so the notice clears when the capture actually lands. The CSP now allows scripts by per-request nonce rather than by 'unsafe-inline'. That forced /offline to render per request: a prerendered page carries a build-time nonce no live policy matches, so its scripts were blocked and it never hydrated. Two crashes fixed on the way. web-push throws on a VAPID subject that is not https: or mailto:, and the code handed it APP_PUBLIC_URL, so any machine with push keys died at boot; a misconfigured optional channel now switches itself off and says why. And a subscription the push service answers 410 for is deleted rather than retried forever. Lighthouse on the production build: accessibility 100, best practices 96, SEO 100, performance 73. The performance number is not trustworthy on this machine and DECISIONS.md says why; total blocking time did fall from 17.6s to 1.7s once the hero canvas stopped drawing at full resolution every frame and the landing page stopped importing GSAP. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
75 lines
3.0 KiB
TypeScript
75 lines
3.0 KiB
TypeScript
import createMiddleware from 'next-intl/middleware';
|
|
import { type NextRequest, NextResponse } from 'next/server';
|
|
import { routing } from './src/i18n/routing';
|
|
|
|
const intl = createMiddleware(routing);
|
|
|
|
// React reconstructs server stacks with eval in development and never in production.
|
|
const DEV = process.env.NODE_ENV === 'development';
|
|
|
|
/**
|
|
* Security headers (SPEC.md section 14). Everything is served from one origin: the app
|
|
* proxies `/api`, next/font self hosts the typeface and there is no third party script
|
|
* anywhere, so the policy names `'self'` and stops.
|
|
*
|
|
* Scripts are allowed by nonce rather than by `'unsafe-inline'`. A fresh nonce per request
|
|
* means an injected `<script>` cannot guess its way in, and `'strict-dynamic'` lets the one
|
|
* nonced bootstrap load the chunks it needs without listing them.
|
|
*/
|
|
function policy(nonce: string): string {
|
|
return [
|
|
"default-src 'self'",
|
|
// 'wasm-unsafe-eval' is the QR decoder: zxing runs as WebAssembly, self hosted.
|
|
`script-src 'self' 'nonce-${nonce}' 'strict-dynamic' 'wasm-unsafe-eval'${DEV ? " 'unsafe-eval'" : ''}`,
|
|
// Styles stay inline-allowed: Tailwind ships a stylesheet, but React writes inline
|
|
// style attributes for things like a dragged card, and those are not noncable.
|
|
"style-src 'self' 'unsafe-inline'",
|
|
"img-src 'self' data: blob:",
|
|
"font-src 'self'",
|
|
// The dev server pushes updates over a websocket to the same origin.
|
|
`connect-src 'self'${DEV ? ' ws:' : ''}`,
|
|
"worker-src 'self' blob:",
|
|
"object-src 'none'",
|
|
"base-uri 'self'",
|
|
"form-action 'self'",
|
|
"frame-ancestors 'none'",
|
|
'upgrade-insecure-requests',
|
|
].join('; ');
|
|
}
|
|
|
|
const STATIC_HEADERS: Record<string, string> = {
|
|
'x-content-type-options': 'nosniff',
|
|
'referrer-policy': 'strict-origin-when-cross-origin',
|
|
// The scanner needs the camera; nothing else needs anything.
|
|
'permissions-policy': 'camera=(self), microphone=(), geolocation=(), payment=()',
|
|
};
|
|
|
|
export default function proxy(request: NextRequest) {
|
|
const nonce = crypto.randomUUID();
|
|
const csp = policy(nonce);
|
|
|
|
// Next reads the nonce off the request headers and stamps it on the scripts it renders.
|
|
// Setting them on the incoming request is what carries them through next-intl's rewrite.
|
|
request.headers.set('x-nonce', nonce);
|
|
request.headers.set('content-security-policy', csp);
|
|
|
|
/**
|
|
* `/offline` is one page for every language: the service worker caches exactly one URL,
|
|
* so locale routing must leave it alone. It still gets the headers.
|
|
*/
|
|
const response =
|
|
request.nextUrl.pathname === '/offline'
|
|
? NextResponse.next({ request: { headers: request.headers } })
|
|
: intl(request);
|
|
|
|
response.headers.set('content-security-policy', csp);
|
|
for (const [key, value] of Object.entries(STATIC_HEADERS)) response.headers.set(key, value);
|
|
return response;
|
|
}
|
|
|
|
export const config = {
|
|
// Everything except /api (forwarded to the API by the route handler), Next internals and
|
|
// static files.
|
|
matcher: ['/((?!api|healthz|_next|_vercel|.*\\..*).*)'],
|
|
};
|