SHOPin Logo
Skip to main documentation content

Content Security Policy (CSP)

Authentication · CSP

It is important to read the sections Why this shape and Reference example and production readiness on Authentication before relying on this page. They explain why the default BFF-centred pattern exists, how you can extend or replace it, and what the reference implementation does and does not promise for production.

If you tighten auth pages, a document Content Security Policy limits which scripts run, where forms may post, and which origins the page may fetch. The SHOPin storefront accelerator does not include a default CSP for HTML documents—you add it in your project (for example Next.js headers or your CDN).

Image pipeline vs document: next.config.ts images.contentSecurityPolicy applies to the image optimisation pipeline, not the full HTML document. For sign-in and sign-up routes under apps/presentation/app, configure a document CSP separately.

Why use CSP on auth routes

  • Script sources — Prefer nonces or hashes instead of broad unsafe-inline where you can.
  • Form postsform-action can restrict posts to your BFF origin so credentials are not sent to arbitrary hosts.
  • Clickjackingframe-ancestors 'none' (or a small allowlist) on auth pages.
  • Fetch targetsconnect-src should list origins the presentation app really uses (Communication between presentation and BFF); when hostnames differ in production, align with Deploy project apps.

Treat CSP as defence-in-depth: it does not replace BFF validation or careful handling of user input, and it does not cover every XSS scenario.

Example policy shape

Adapt domains, nonces, and directives to your stack:

text
default-src 'self';
script-src 'self' 'nonce-{random}';
style-src 'self' 'nonce-{random}';
connect-src 'self' https://your-bff-domain.example;
form-action 'self' https://your-bff-domain.example;
frame-ancestors 'none';
base-uri 'self';
object-src 'none';

Summary

ItemNote
Default in repoNo document CSP for auth
ConfigureNext/hosting headers per environment
BFF originMatch connect-src / form-action to real BFF URLs

Related

External references

Back to Authentication · Back to How to work with SHOPin