Security headers

Easel sends Strict-Transport-Security on every response; see HTTPS. Other browser security policies depend on what your app loads and embeds, so your app sends them.

Recommended baseline

Start from these headers and adjust them to your app:

Content-Security-Policy: default-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'none'
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: camera=(), microphone=(), geolocation=()

• frame-ancestors and X-Frame-Options stop other sites from framing your pages. If you embed your own pages, use SAMEORIGIN or list the allowed origins in frame-ancestors.
• Permissions-Policy turns off browser features your app doesn't use.

Roll out a Content Security Policy

A real CSP has to cover your app's scripts, styles, images, fonts, frames, and API origins, so enforcing one straight away usually breaks something.

1. Send it as Content-Security-Policy-Report-Only first.
2. Collect violation reports and remove or allow each source.
3. Switch to Content-Security-Policy once the reports are clean.

Avoid *, 'unsafe-inline', and 'unsafe-eval' unless you accept the tradeoff.

Set headers

Set headers with your framework, such as headers in next.config for Next.js. For the headers Easel adds itself, see Headers.