How to use Custom Headers

What are Custom Headers?

Custom headers are HTTP response headers sent from the server to the browser when someone visits your site. They control how browsers interact with your website, including security policies and cross-origin resource sharing. Common use cases include security headers like X-Frame-Options to prevent clickjacking attacks, Content Security Policies to protect against XSS attacks, and custom cache behavior.

How to add Custom Headers

Add a new header

Go to the Framer dashboard, select your domain in the sidebar, and navigate to the Headers tab.

1. Click the + icon to add a new header

2. Define the path where the header should apply (e.g., /, /blog/*, /login)

3. Select the header name (e.g., X-Frame-Options)

4. Enter the header value (e.g., DENY, SAMEORIGIN)

5. Save your changes

6. Open your project and re-publish

You may need to clear your browser cache or wait for CDN caches to expire to see the changes.

Path matching

Custom headers support flexible path matching:

/ applies to the homepage only
/blog applies to the exact path
/blog/* applies to all pages under /blog
/* applies to all pages on your site

Header priority and ordering

You can reorder your custom headers by dragging them in the list. The order determines which header takes precedence when multiple rules match the same path.

Default headers

Framer automatically sets certain default headers for all sites. You can view these in the Headers tab under the "Default" section. Custom headers you add will supplement or override these defaults where applicable.

Example configurations

Prevent embedding on external sites

Header: X-Frame-Options
Value: DENY
Path: /*

This prevents your site from being embedded in iframes on other domains.

Allow embedding only on same origin

Header: X-Frame-Options
Value: SAMEORIGIN
Path: /*

This allows your site to be embedded in iframes, but only on your own domain.

Working with Multi Site rewrites

When you use custom headers alongside rewrites (Multi Site configuration), you configure headers on your main project (the one with the custom domain). You can set headers for any path on your domain, including paths that are rewritten to other locations.

Important: Only custom headers set on your main project are applied to responses. If a path is rewritten to another Framer project or external origin, any custom headers configured on those target projects are not forwarded.

Let's say you have:

• Project A with domain example.com (your main project)

• Project B with domain proxy.com

• A rewrite rule on Project A: /blog/* → proxy.com

When a visitor accesses example.com/blog/post:

• Custom headers you set on Project A for /blog/* will be applied

• Custom headers set on Project B will NOT be forwarded

This applies to both Framer project rewrites and external origin rewrites. Always configure your custom headers on the main project where your domain is connected.

Pricing

Custom headers are available as add-on, which requires a Pro, Scale or Enterprise plan.
View pricing