Skip to main content
Version: 5.7

Content-Security-Policy (CSP)

Content-Security-Policy (CSP) is an HTTP security header that defines where a website is allowed to load scripts, styles, images, fonts, and other content from.

What CSP is​

CSP is a set of rules that defines a list of trusted sources (domains) for the browser.

If a page tries to load content from a source that is not allowed by CSP, the browser blocks it.

Why CSP is important​

  • Reduces the risk of XSS (Cross-Site Scripting) attacks.
  • Limits potential damage if unwanted script code appears on a page.
  • Protects users and the admin interface from loading malicious content from unknown domains.
  • Helps use analytics and marketing tools safely by allowing only explicitly approved sources.

Where CSP is configured​

In the website administration, in the security header settings (Security Policies), in the Content-Security-Policy field.

Menu location: Configuration -> SEO -> Default/Domain Configuration.

CSP is configured using directives, i.e., individual rules. Each directive defines what type of content can be loaded and from which sources (domains).

Examples of the most common directives:

  • default-src: default rule for content that has no specific directive.
  • script-src: where JavaScript can be loaded from.
  • style-src: where CSS can be loaded from.
  • img-src: where images can be loaded from.
  • connect-src: where the page can connect to (e.g., API calls, fetch requests, WebSocket).
  • frame-src: which external pages can be embedded in an iframe.

Important rule for third-party scripts​

If an editor adds a third-party script to the website (e.g., analytics, chat, video widget, maps), the provider domain must be allowed in CSP.

Most often this is about the script-src directive, but depending on the integration type, you may also need to update connect-src, img-src, or frame-src.

Without this step, the integration will be blocked in the browser even if the code is inserted correctly on the page.

Practical workflow​

  1. Add or modify the external service on the page.
  2. Open browser developer tools (DevTools) and check for CSP violation errors.
  3. Identify the blocked domain and directive from the error message.
  4. Add the domain to the corresponding CSP directive.
  5. Test the page again.

Recommendations​

  • Allow only specific domains that you actually use.
  • Avoid overly broad exceptions.
  • For every new external integration, verify that CSP still works as expected.