Security Response Headers
Storefront Next sends security response headers by default. Every storefront that you generate from the template inherits these headers. The headers help protect shoppers from common web attacks, such as cross-site scripting (XSS), clickjacking, and protocol downgrade.
Unlike Composable Storefront (PWA Kit), which sets headers explicitly in your storefront code, Storefront Next manages these headers for you. The defaults ship from the @salesforce/storefront-next-runtime package, so you don’t maintain them yourself. To support an external integration, extend the defaults through config.server.ts or an environment variable.
The table lists the headers that Storefront Next sends with every page response.
| Header | Default Value |
|---|---|
Content-Security-Policy | See Content Security Policy Directives. |
Strict-Transport-Security | max-age=15552000; includeSubDomains (sent on Managed Runtime only, and suppressed during local development) |
X-Frame-Options | SAMEORIGIN |
X-Content-Type-Options | nosniff |
Referrer-Policy | strict-origin-when-cross-origin |
Permissions-Policy | camera=(), microphone=(), geolocation=() |
The headers apply to pages that your storefront renders. They don’t apply to the Managed Runtime health check, the B2C Commerce API (SCAPI) proxy path, or static assets, because other layers serve those responses.
The Content Security Policy (CSP) controls which origins a page loads content from. The default policy is tuned for the Storefront Next stack: server-side rendering, Dynamic Imaging Service (DIS) images, Cloudflare Turnstile, Tailwind CSS inline styles, and SCAPI as the only outbound API origin.
| Directive | Default Value | Description |
|---|---|---|
default-src | 'self' | Restricts every fetch type that no other directive covers. |
script-src | 'self' https://challenges.cloudflare.com 'nonce-<per-request>' | Permits scripts from your own origin and the Turnstile widget. A per-request nonce authorizes the storefront’s inline configuration script. |
style-src | 'self' 'unsafe-inline' | Permits inline styles, which Tailwind CSS relies on. |
img-src | 'self' data: https://*.commercecloud.salesforce.com https://*.demandware.net | Permits DIS and B2C Commerce image URLs. |
font-src | 'self' data: | Permits self-hosted web fonts. |
connect-src | 'self' https://*.commercecloud.salesforce.com https://*.demandware.net https://challenges.cloudflare.com | Permits SCAPI calls and requests from the Turnstile widget. |
frame-src | https://challenges.cloudflare.com | Permits the Turnstile widget iframe. |
frame-ancestors | 'self' | Restricts which origins can embed your storefront in a frame. |
form-action | 'self' | Restricts the origins that forms submit to. |
base-uri | 'self' | Prevents injection of a <base> element. |
object-src | 'none' | Blocks plugin content, such as Flash. |
upgrade-insecure-requests | Enabled | Upgrades HTTP subresource requests to HTTPS. |
To add an origin for an external integration, such as an analytics provider or a third-party widget, extend the defaults in config.server.ts. Import defaultCspDirectives, spread it, and add your origin to the relevant directive.
Each directive that you set replaces the default for that directive. Spread defaultCspDirectives and add your origin so that your storefront keeps the values that Storefront Next requires.
To add an identity provider for social login, extend connect-src with the provider’s origins. For more information, see Implement Social Login for Storefront Next.
Report-only mode doesn’t block content, so it provides no protection. Don’t use report-only mode for a production deployment. To discover the origins that an integration uses, deploy with csp: { reportOnly: true } in a test environment, where the browser reports violations to the DevTools console. After you add the origins, set reportOnly to false to enforce the policy.
To change a header without a code change, use the PUBLIC__ environment-variable override. The variable path uses double-underscore (__) separators.
An environment variable replaces the entire directives map, not an individual directive, because the variable path uses __ as its separator and directive names contain hyphens, such as script-src. Provide the full map as a JSON value.
Because an environment-variable override replaces all defaults, reserve it for unusual cases. For most changes, edit config.server.ts and spread defaultCspDirectives. For more information about environment-variable overrides, see Project Configuration.