Content Security Policy

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

What is CSP?

Content Security Policy (CSP) is a security standard that helps prevent various types of attacks including Cross-Site Scripting (XSS) and other code injection attacks. It works by allowing you to specify which content sources are trusted and allowed to be loaded by your web application.

CSP is implemented through HTTP headers that tell browsers which resources (scripts, styles, images, etc.) are allowed to be loaded and from where.

For example, a basic CSP header might look like this:

Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline';

This policy would:

• Only allow resources from the same origin ('self')
• Allow inline scripts and eval() (though this is generally discouraged)
• Allow inline styles
• Block all other types of content from external sources

When implementing CSP, you might encounter these typical errors in your browser's console:

Refused to load the script 'https://third-party.com/script.js' because it violates the following Content Security Policy directive: "script-src 'self'"

This occurs when trying to load external resource (here, a JavaScript file) without adding their domain to the related directive (here, script-src).

In Front-Commerce, CSP is configured through a provider system that allows you to fine-tune these security policies for your specific needs. Typical CSP usage includes:

• Allowing payment providers (PayPal, Stripe, etc.)
• Allowing tracking providers (Google Analytics, etc.)
• Allowing fonts from third parties
• Allowing images from third parties
• etc.

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;