Configure a Content Security Policy (CSP)

In this article

• Understand how a CSP protects your content
• Add a custom CSP header to your domain
• Apply Foleon's baseline configuration
• Test your CSP before you enforce it
• Update your CSP when you add new external sources

Understand how a CSP protects your content

A CSP is a browser security feature. It works like an allowlist: only the external sources you specify, such as scripts, styles, images, fonts, and videos, are allowed to load on your page. Anything not on the list gets blocked automatically. Your Foleon Doc is hosted by Foleon, so you apply your CSP by adding a custom header in your domain settings, and browsers enforce it as soon as your Doc loads. 

Add a custom CSP header to your domain

1. Open Admin Console > Domains.
2. Hover over Actions next to your domain, then click Custom Headers.
3. Paste your policy into the Content-Security-Policy field.
4. Click Save.

Apply Foleon's baseline configuration

For your Foleon Doc to load correctly, your CSP must allow Foleon's own platform domains. These differ depending on whether your account is hosted in the EU or US environment. Check with Foleon Support if you're not sure which applies to your account.

Putting that together, here is a working starting point. The 'unsafe-inline' allowances for scripts and styles are required by the Foleon Doc runtime.

EU baseline CSP

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'unsafe-inline' https://assets.foleon.com https://cdn.analytics.foleon.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https://assets.foleon.com https://echo.foleon.com;
  font-src 'self' data: https://assets.foleon.com;
  media-src 'self' blob: https://video.foleon.com;
  connect-src 'self' https://echo.foleon.com https://api.foleon.com https://video.foleon.com;
  form-action 'self' https://api.foleon.com;
  object-src 'none';
  base-uri 'self';
  upgrade-insecure-requests;

US baseline CSP

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'unsafe-inline' https://assets.us.foleon.com https://cdn.analytics.foleon.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https://assets.us.foleon.com https://echo.us.foleon.com;
  font-src 'self' data: https://assets.us.foleon.com;
  media-src 'self' blob: https://video.us.foleon.com;
  connect-src 'self' https://echo.us.foleon.com https://api.us.foleon.com https://video.us.foleon.com;
  form-action 'self' https://api.us.foleon.com;
  object-src 'none';
  base-uri 'self';
  upgrade-insecure-requests;

Test your CSP before you enforce it

1. Open Custom Headers for your domain, as described above.
2. Paste your policy into the Content-Security-Policy-Report-Only field (instead of the Content-Security-Policy field).
3. Click Save.
4. Open your published Doc and check your browser's developer console for blocked-resource warnings.
5. Move the same policy into the Content-Security-Policy field.
6. Click Save again to enforce it.

Update your CSP when you add new external sources

A CSP is an allowlist, so every time you add a new external source to your Foleon Doc, you need to update your CSP to include it. Otherwise, the browser blocks it and that feature quietly stops working. 

External sources include things like: 

• Custom fonts (e.g. *Adobe Fonts / Typekit*, Google Fonts)

• Analytics and tag managers (e.g. Google Analytics, Google Tag Manager)

• Embedded videos (e.g. YouTube, Vimeo, Wistia)

• Forms and chat widgets (e.g. HubSpot, Typeform, Intercom)

• Any other third-party script, image, style, or integration

For example, if you add an *Adobe Fonts (Typekit)* font, Typekit loads a stylesheet and script from `use.typekit.net`, font files from `p.typekit.net`, and sends performance beacons to `performance.typekit.net`. Add those domains to the matching directives: 

  script-src  ... https://use.typekit.net;
  style-src   ... https://use.typekit.net;
  font-src    ... https://use.typekit.net https://p.typekit.net;
  connect-src ... https://performance.typekit.net;