# 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](#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-'` | 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 `` 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. :::important 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. ::: ```typescript // config.server.ts import { defaultCspDirectives } from "@salesforce/storefront-next-runtime/security"; export default defineConfig({ app: { security: { headers: { csp: { directives: { ...defaultCspDirectives, "script-src": [...defaultCspDirectives["script-src"]!, "https://cdn.example.com"], "connect-src": [...defaultCspDirectives["connect-src"]!, "https://api.example.com"], }, }, }, }, }, }); ``` 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](/docs/commerce/b2c-commerce/guide/sfnext-social-login.md). :::warning 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. ::: ## 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. ```bash # Turn on CSP report-only mode: PUBLIC__app__security__headers__csp__reportOnly=true # Turn off the Strict-Transport-Security header: PUBLIC__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. ```bash # Replace the entire CSP directives map (this replaces all defaults): PUBLIC__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](/docs/commerce/b2c-commerce/guide/sfnext-project-config.md). ## Related Topics - [Project Configuration](/docs/commerce/b2c-commerce/guide/sfnext-project-config.md) - [Implement Social Login for Storefront Next](/docs/commerce/b2c-commerce/guide/sfnext-social-login.md) - [Limit Access to a Storefront Under Development](/docs/commerce/b2c-commerce/guide/sfnext-protect-storefront.md)