Content Security Policy

This guide explains how to setup CSP in your application using a configuration provider.

Basic configuration

For security reasons only URLs from the store's domain are authorized through CSP. However, for tracking and third-party dependencies, you will have to authorize additional domains.

If Front-Commerce, the CSP configuration lives in config.contentSecurityPolicy. In the skeleton, we provide a default CSP provider that you can extend to add your own domains:

app/config/cspProvider.ts

const appCSPProvider = () => {
  return {
    name: "cspConfiguration",
    values: {
      contentSecurityPolicy: {
        __dangerouslyDisable: false,
        directives: {
          defaultSrc: [],
          scriptSrc: [],
          frameSrc: [],
          styleSrc: [],
          imgSrc: [],
          fontSrc: [],
          connectSrc: [],
          baseUri: [],
          mediaSrc: [],
          objectSrc: [],
          workerSrc: [],
          manifestSrc: [],
          childSrc: [],
        },
      },
    },
  };
};

export default appCSPProvider;

info

Each extension can also define its own CSP provider. For example, the PayPal extension has its own CSP provider to allow PayPal's domain.

Add your custom domains to each directive as needed. When a CSP violation occurs, your browser will log it in the console and it will be recorded using the security logger.

Enable Report-Only

Loose security policies

This section involves reducing the security of your application. Please carefully consider your requirements before using this feature.

If you are unable to define a restricted list of content providers, you may need to enable all content of a kind.

This will allow all content of a kind and log violations to your configuration without blocking the contents.

In the example below, all frames will be allowed and frames not originating from the domain itself or mysite.com will be logged in the security logger.

app/config/cspProvider.ts

const appCSPProvider = () => {
  return {
    name: "cspConfiguration",
    values: {
      contentSecurityPolicy: {
        __dangerouslyDisable: false,
        directives: {
          scriptSrc: [],
          frameSrc: ["*.mysite.com"],
          styleSrc: [],
          imgSrc: [],
          fontSrc: [],
          connectSrc: [],
          baseUri: [],
        },
        reportOnlyDirectives: {
          frameSrc: true,
        },
      },
    },
  };
};

export default appCSPProvider;