CSP Configuration

If your infrastructure enforces Content Security Policy (CSP), you'll need to allowlist Waldium's resources for your blog to function correctly. This guide covers the domains and directives needed for proper operation.

CSP configuration is only necessary if your proxy or firewall enforces security headers that override defaults. Most setups work without additional configuration.

What is CSP?

Content Security Policy is a security standard that controls which resources a web page can load. It helps prevent cross-site scripting (XSS) attacks by whitelisting trusted sources. If your infrastructure adds CSP headers, you must include Waldium's domains for the blog to work.

CSP Directives

These directives control different resource types:

Directive	Purpose
`script-src`	JavaScript files that can execute
`style-src`	Stylesheets that can be loaded
`font-src`	Font files that can be loaded
`img-src`	Images, icons, and logos
`connect-src`	URLs for API calls and WebSockets
`frame-src`	URLs that can be embedded in iframes
`default-src`	Fallback for unspecified directives

Required Domains

Add these domains to your CSP for full Waldium functionality:

Domain	Purpose	Directives	Required
`*.waldium.app`	Blog content and API	`connect-src`, `frame-src`	Yes
`*.waldium.com`	Dashboard and analytics	`connect-src`	Yes
`fonts.googleapis.com`	Google Fonts	`style-src`, `font-src`	If using custom fonts
`fonts.gstatic.com`	Google Fonts files	`font-src`	If using custom fonts

Optional Integrations

If you've enabled analytics or other integrations, include their domains:

Domain	Purpose	Directives
`www.googletagmanager.com`	Google Analytics/GTM	`script-src`, `connect-src`
`www.google-analytics.com`	Google Analytics	`script-src`, `connect-src`

Example CSP Header

A complete CSP for Waldium blogs:

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'unsafe-inline' 'unsafe-eval';
  style-src 'self' 'unsafe-inline' fonts.googleapis.com;
  font-src 'self' fonts.googleapis.com fonts.gstatic.com;
  img-src 'self' data: blob: *.waldium.app *.waldium.com;
  connect-src 'self' *.waldium.app *.waldium.com;
  frame-src 'self' *.waldium.app;

Only include domains for services you actually use. Remove analytics domains if you haven't configured them.

Platform-Specific Configuration

Cloudflare

Create a Response Header Transform Rule:

Go to Rules > Overview in Cloudflare
Click Create rule > Response Header Transform Rule
Configure:
- Modify response header: Set static
- Header name: Content-Security-Policy
- Header value: Your CSP policy
Deploy the rule

Vercel

Add to your vercel.json:

{
  "headers": [
    {
      "source": "/blog/(.*)",
      "headers": [
        {
          "key": "Content-Security-Policy",
          "value": "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline' fonts.googleapis.com; font-src 'self' fonts.googleapis.com fonts.gstatic.com; img-src 'self' data: blob: *.waldium.app *.waldium.com; connect-src 'self' *.waldium.app *.waldium.com; frame-src 'self' *.waldium.app;"
        }
      ]
    }
  ]
}

AWS CloudFront

Add a response headers policy:

{
  "ResponseHeadersPolicy": {
    "Name": "WaldiumCSP",
    "Config": {
      "SecurityHeadersConfig": {
        "ContentSecurityPolicy": {
          "ContentSecurityPolicy": "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline' fonts.googleapis.com; font-src 'self' fonts.googleapis.com fonts.gstatic.com; img-src 'self' data: blob: *.waldium.app *.waldium.com; connect-src 'self' *.waldium.app *.waldium.com; frame-src 'self' *.waldium.app;",
          "Override": true
        }
      }
    }
  }
}

Nginx

Add to your server block:

add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline' fonts.googleapis.com; font-src 'self' fonts.googleapis.com fonts.gstatic.com; img-src 'self' data: blob: *.waldium.app *.waldium.com; connect-src 'self' *.waldium.app *.waldium.com; frame-src 'self' *.waldium.app;";

Troubleshooting

Identifying CSP Violations

CSP violations appear in your browser's developer console:

Open Developer Tools (F12 or right-click > Inspect)
Go to the Console tab
Look for errors containing:
- "Content Security Policy: The page's settings blocked..."
- "Refused to load the script/stylesheet..."
- "Refused to connect to..."

Common Issues

Fonts not loading:

Add fonts.googleapis.com to style-src and font-src
Add fonts.gstatic.com to font-src

Images broken:

Add *.waldium.app and *.waldium.com to img-src
Include data: and blob: for inline images

API calls failing:

Add *.waldium.app to connect-src
Check for additional API domains in console errors

Interactive features broken:

Ensure 'unsafe-inline' and 'unsafe-eval' are in script-src
Add any third-party domains shown in console errors