Vue Storefront middleware: forwarding client timezone headers to commerce backend without leaking auth headers

Safe Header Propagation for Regional Dates

To handle regional date fields without leaking sensitive authentication data, implement a strict whitelist in your middleware.config.js. The only headers required for regional context are Accept-Language and a custom timezone header (e.g., X-Timezone). Avoid forwarding the entire request header object, as this risks leaking Authorization tokens or internal proxy headers to the backend.

Implementation Strategy

In Vue Storefront 2.x, the middleware acts as the bridge. To ensure the commerce backend receives the shopper's region, follow these steps:

1. Define the Whitelist: Configure your proxy settings to explicitly allow Accept-Language and X-Timezone. Ensure that the existing cookie-forwarding logic remains untouched, as this is required for session identity.
2. Client-Side Injection: Since the browser does not send timezone data by default, use a client-side interceptor or a small script to detect the timezone via Intl.DateTimeFormat().resolvedOptions().timeZone and attach it to the X-Timezone header for all outgoing requests.
3. Backend Consumption: The commerce backend must be configured to read X-Timezone and apply the offset to date fields before returning the JSON response.

Solving SSR Hydration Mismatches

Performing date conversion only in the browser leads to hydration mismatches because the server renders a default timezone (often UTC) while the client renders the local time. To prevent this, normalization must happen server-side.

The middleware should extract the X-Timezone header from the incoming request and pass it to the backend. The backend then returns the date already formatted for that timezone. This ensures the HTML generated during SSR matches the state the client expects upon hydration.

Verification and Safety

To verify the implementation without risking production data, use a mock server or proxy logs to inspect the request flow:

• Header Audit: Confirm that Authorization headers are absent from the middleware-to-backend request, while X-Timezone is present.
• Hydration Check: Disable JavaScript in the browser; if the date is correct in the initial HTML, the server-side forwarding is working.
• Value Validation: Ensure the backend validates the X-Timezone string against a known list of IANA timezones to prevent malformed input from causing calculation errors.

Diagnostic Detail Required: Are you using the integrated @vue-storefront/middleware package or a custom Node.js proxy? The specific syntax for header whitelisting differs slightly between the built-in config and a manual http-proxy-middleware setup.