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.

Default Headers

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.

Content Security Policy Directives

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.

Add Headers for an External Integration

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.

Important

1// config.server.ts
2import { defaultCspDirectives } from "@salesforce/storefront-next-runtime/security";
3
4export default defineConfig<Config>({
5  app: {
6    security: {
7      headers: {
8        csp: {
9          directives: {
10            ...defaultCspDirectives,
11            "script-src": [...defaultCspDirectives["script-src"]!, "https://cdn.example.com"],
12            "connect-src": [...defaultCspDirectives["connect-src"]!, "https://api.example.com"],
13          },
14        },
15      },
16    },
17  },
18});

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.

Warning

Override Headers with an Environment Variable

To change a header without a code change, use the PUBLIC__ environment-variable override. The variable path uses double-underscore (__) separators.

1# Turn on CSP report-only mode:
2PUBLIC__app__security__headers__csp__reportOnly=true
3
4# Turn off the Strict-Transport-Security header:
5PUBLIC__app__security__headers__hsts=false

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.

1# Replace the entire CSP directives map (this replaces all defaults):
2PUBLIC__app__security__headers__csp__directives='{"default-src":["'"'"'self'"'"'"],"script-src":["'"'"'self'"'"'","https://cdn.example.com"]}'

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.

Security Response Headers

Default Headers

Content Security Policy Directives

Add Headers for an External Integration

Override Headers with an Environment Variable

Related Topics