HTTP Security Headers

Assemble Web applies HTTP security headers to application responses via src/proxy.ts. The headers differ between development and production environments to balance strict security with a comfortable developer experience.

Configuration Location

All security headers are defined in src/proxy.ts, which uses src/utils/constants.ts SECURITY_HEADERS values for configurable policy items. Middleware implementation follows Recommended nonce CSP defined within the Next.js Documentation value together with other security headers such as:

• X-Frame-Options
• X-Content-Type-Options
• Referrer-Policy
• Permissions-Policy
• Strict-Transport-Security

X-XSS-Protection is intentionally not set. Modern browsers deprecated this header and CSP is the primary XSS mitigation.

Implementation allows developers to set CONTENT_SECURITY_POLICY_REPORT_ONLY environment variable to switch from Content-Security-Policy to Content-Security-Policy-Report-Only so issues can be fixed without blocking application traffic.

When CONTENT_SECURITY_POLICY_REPORT_URI is defined, proxy appends report-uri and report-to directives and also sets the Report-To header so CSP violations can be collected by a reporting backend.

Provider Arrays

Before the headers are built, four arrays from the SECURITY_HEADERS.CSP define the allowed external origins. These are the primary lists to update when a new third-party service is integrated.

Array	CSP directive it feeds	Purpose
providers	connect-src	REST/WebSocket endpoints (APIs, telemetry)
media	media-src	Video/audio asset CDNs
script	script-src	Allowed external script origins
image	img-src	Image proxy / CDN hosts

Headers Reference

Development vs. Production

The middleware checks process.env.NODE_ENV === 'development' and returns a relaxed policy set in development or a strict one in production.

How to Update for a New Project

1. Adding a new API or WebSocket origin

Add the URL to the providers array:

providers: [
  // … existing entries …
  'https://api.my-new-service.com',
  'wss://realtime.my-new-service.com',
];

2. Adding a new video/audio CDN

Add the CDN origin to media:

media: [
  // … existing entries …
  'https://cdn.my-video-provider.com',
];

3. Adding an external script (e.g., analytics or monitoring)

Add the script origin to script:

script: [
  // … existing entries …
  'https://cdn.analytics-provider.com',
];

4. Adding an image CDN

Add the CDN origin to SECURITY_HEADERS.CSP.image, and also add its hostname to images.remotePatterns in next.config so the Next.js <Image> component can load images from that host:

image: [
  // … existing entries …
  'https://images.my-cdn.com',
];

// Also update the Next.js images config:
images: {
  remotePatterns: [
    { hostname: 'image-proxy.ps.accedo.tv' },
    { hostname: 'cdn.one.accedo.tv' },
    { hostname: 'images.my-cdn.com' }, // ← add here too
  ],
};

note

CSP source lists default to explicit secure schemes (https:/wss:). Add exceptions only when technically required and documented.

tip

Keep providers, media, script, and image as specific as possible. Wildcard subdomains (*.example.com) are acceptable when the subdomain space is controlled by a trusted party, but avoid overly broad patterns like https: or *.

Verifying Headers in the Browser

1. Open DevTools → Network tab.
2. Reload the page and select the main document request.
3. Check the Response Headers panel for the headers listed above.