Content Security Policy (CSP) Configuration

Overview

Content Security Policy (CSP) is a security standard that helps prevent cross-site scripting (XSS), clickjacking, and other code injection attacks. When using TinaCMS, you'll need to configure your CSP headers to allow connections to TinaCMS services.

Required CSP Directives

TinaCMS requires the following CSP directives to function properly:

Image Sources

TinaCMS needs access to load images from its asset delivery network:

Connect Sources

TinaCMS requires connections to several services for authentication, content delivery, media uploads, and product analytics:

identity.tinajs.io - Authentication and identity services (v1)
identity-v2.tinajs.io - Authentication and identity services (v2). Both identity.tinajs.io and identity-v2.tinajs.io are required during the v1→v2 rollout; the admin UI calls both depending on the endpoint.
content.tinajs.io - Content API and data layer
assets.tinajs.io - Asset management and delivery
s3.us-east-1.amazonaws.com - Direct media uploads. The TinaCMS media manager PUTs files to a presigned S3 URL on this host. Without it, uploads fail with a CSP connect-src violation in the browser console.
us.i.posthog.com - PostHog event ingestion. The TinaCMS admin UI emits product-analytics events to help us improve the editor. Without it, you will see a CSP connect-src violation in the browser console for each event the editor tries to send.
us-assets.i.posthog.com - PostHog runtime assets (autocapture, session recording, feature flags). Loaded lazily by posthog-js; required even though the library itself is bundled in the admin UI.

Implementation Examples

Next.js App Router (Next.js 13+): Add CSP headers in your next.config.js.
Next.js Pages Router: You can also configure CSP in next.config.js using the same approach shown in the App Router tab. Alternatively, set CSP headers in your middleware.
Netlify: Add CSP headers in your netlify.toml.
Vercel: Add headers in your vercel.json.
Apache: Add to your .htaccess file.
Nginx: Add to your nginx configuration.

Self-Hosted Considerations

If you're using a self-hosted TinaCMS setup, you may need to adjust these CSP directives:

Replace TinaCloud domains with your own backend URLs
Ensure connect-src includes your content API endpoint
Add any custom media storage domains to img-src

Example for self-hosted:

Troubleshooting

CSP Violations in Browser Console

If you see CSP violation errors in your browser console:

Check the error message to identify the blocked resource
Add the appropriate domain to the relevant CSP directive
Test thoroughly to ensure TinaCMS functionality works

Common violations:

Blocked image loads: Add the domain to img-src
Blocked API calls: Add the domain to connect-src
Blocked inline styles: You may need style-src 'unsafe-inline' for certain TinaCMS features

TinaCMS Editor Not Loading

Testing CSP Configuration

You can also use online tools like CSP Evaluator to validate your policy.

Having issues when authenticating with GitHub? It could be your CSP configuration!
Check out this GitHub issue on how it was resolved.

Additional Resources

Best Practices

Start restrictive, then loosen: Begin with a strict CSP and only add exceptions as needed
Use report-only mode: Test CSP changes with Content-Security-Policy-Report-Only before enforcing
Regular audits: Review and update your CSP as your application evolves
Document exceptions: Keep notes on why specific domains are whitelisted
Environment-specific policies: Consider different CSP rules for development vs. production