Content Security Policy

This guide explains how to setup

CSP in your config/website.js configuration.

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 more domains. Use the following config and add your custom domain in each:

my-module/config/website.js

{
  ...
  contentSecurityPolicy: {
    directives: {
      defaultSrc: [],
      scriptSrc: [],
      frameSrc: [],
      styleSrc: [],
      imgSrc: [],
      fontSrc: [],
      connectSrc: [],
      baseUri: [],
      mediaSrc:[]
      objectSrc: [],
      workerSrc: [],
      manifestSrc: [],
      childSrc: [],
    }
  }
}

When a CSP is missing, your browser will let you know in its console and log it using the security logger.

Enable Report-Only

Loose security policies

This chapter implies lowering the security of your application, please fully consider your needs before using this feature.

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

This will allow all content of a kind and log violation 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.

my-module/config/website.js

{
  ...
  contentSecurityPolicy: {
    directives: {
      scriptSrc: [],
      frameSrc: ["*.mysite.com"],
      styleSrc: [],
      imgSrc: [],
      fontSrc: [],
      connectSrc: [],
      baseUri: []
    },
    reportOnlyDirectives: {
      frameSrc: true,
    }
  }
}