Headers

Attach a header

To attach headers to Cloudflare Pages responses, create a _headers plain text file in the output folder of your project. It is usually the folder that contains the deploy-ready HTML files and assets generated by the build, such as favicons. Changes to headers will be updated to your website at build time. Make sure you commit and push the file to trigger a new build each time you update headers.

Warning

Custom headers defined in the _headers file are not applied to responses from Functions, even if the Function route matches the URL pattern. If your Pages application uses Functions, you must migrate any behaviors from the _headers file to the Response object in the appropriate /functions route. When altering headers for multiple routes, you may be interested in adding middleware for shared behavior.

Header rules are defined in multi-line blocks. The first line of a block is the URL or URL pattern where the rule’s headers should be applied. On the next line, an indented list of header names and header values must be written:

[url]
  [name]: [value]

Using absolute URLs is supported, though be aware that absolute URLs must begin with https and specifying a port is not supported. Cloudflare Pages ignores the incoming request’s port and protocol when matching against an incoming request. For example, a rule like https://example.com/path would match against requests to other://example.com:1234/path.

You can define as many [name]: [value] pairs as you require on subsequent lines. For example:

# This is a comment
/secure/page
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff
  Referrer-Policy: no-referrer

/static/*
  Access-Control-Allow-Origin: *
  X-Robots-Tag: nosnippet

https://myproject.pages.dev/*
  X-Robots-Tag: noindex

An incoming request which matches multiple rules’ URL patterns will inherit all rules’ headers. Using the previous _headers file, the following requests will have the following headers applied:

Request URL	Headers
https://custom.domain/secure/page	X-Frame-Options: DENY X-Content-Type-Options: nosniff Referrer-Policy: no-referrer
https://custom.domain/static/image.jpg	Access-Control-Allow-Origin: * X-Robots-Tag: nosnippet
https://myproject.pages.dev/home	X-Robots-Tag: noindex
https://myproject.pages.dev/secure/page	X-Frame-Options: DENY X-Content-Type-Options: nosniff Referrer-Policy: no-referrer X-Robots-Tag: noindex
https://myproject.pages.dev/static/styles.css	Access-Control-Allow-Origin: * X-Robots-Tag: nosnippet, noindex

A project is limited to 100 header rules. Each line in the _headers file has a 2,000 character limit. The entire line, including spacing, header name, and value, counts towards this limit.

If a header is applied twice in the _headers file, the values are joined with a comma separator. Headers defined in the _headers file override what Cloudflare Pages ordinarily sends, so be aware when setting security headers. Cloudflare reserves the right to attach new headers to Pages projects at any time in order to improve performance or harden the security of your deployments.

Detach a header

You may wish to remove a header which has been added by a more pervasive rule. This can be done by prepending an exclamation mark !.

/*
  Content-Security-Policy: default-src 'self';

/*.jpg
  ! Content-Security-Policy

Match a path

The same URL matching features that _redirects offers is also available to the _headers file. Note, however, that redirects are applied before headers, when a request matches both a redirect and a header, the redirect takes priority.

Splats

When matching, a splat pattern — signified by an asterisk (*) — will greedily match all characters. You may only include a single splat in the URL.

The matched value can be referenced within the header value as the :splat placeholder.

Placeholders

A placeholder can be defined with :placeholder_name. A colon (:) followed by a letter indicates the start of a placeholder and the placeholder name that follows must be composed of alphanumeric characters and underscores (:[A-Za-z]\w*). Every named placeholder can only be referenced once. Placeholders match all characters apart from the delimiter, which when part of the host, is a period (.) or a forward-slash (/) and may only be a forward-slash (/) when part of the path.

Similarly, the matched value can be used in the header values with :placeholder_name.

/movies/:title
  x-movie-name: You are watching ":title"

Examples

Cross-Origin Resource Sharing (CORS)

To enable other domains to fetch every asset from your Pages project, the following can be added to the _headers file:

/*
  Access-Control-Allow-Origin: *

This applies the Access-Control-Allow-Origin header to any incoming URL. To be more restrictive, you can define a URL pattern that applies to a *.pages.dev subdomain, which then only allows access from its staging branch’s subdomain:

https://:project.pages.dev/*
  Access-Control-Allow-Origin: https://staging.:project.pages.dev/

Prevent your pages.dev deployments showing in search results

Google ↗ and other search engines often support the X-Robots-Tag header to instruct its crawlers how your website should be indexed.

For example, to prevent your *.pages.dev deployment from being indexed, add the following to your _headers file:

https://:project.pages.dev/*
  X-Robots-Tag: noindex

Harden security for an application

Note

If you are using Pages Functions and wish to attach security headers in order to control access to or browser behavior of server-side logic, the headers should be sent from in Pages Functions’ Response instead of the _headers file. For example, if you have an API endpoint and want to allow cross-origin requests, you should ensure that your Pages Functions attaches CORS headers to its responses, including to OPTIONS requests. This is to ensure that, in the unlikely event of an incident involving serving static assets, your API security headers will continue to be configured.

You can prevent click-jacking by informing browsers not to embed your application inside another (for example, with an <iframe>) with a X-Frame-Options ↗ header.

X-Content-Type-Options: nosniff ↗ prevents browsers from interpreting a response as any other content-type than what is defined with the Content-Type header.

Referrer-Policy ↗ allows you to customize how much information visitors give about where they are coming from when they navigate away from your page.

Browser features can be disabled to varying degrees with the Permissions-Policy ↗ header (recently renamed from Feature-Policy).

If you need fine-grained control over your application’s content, the Content-Security-Policy ↗ header allows you to configure a number of security settings, including similar controls to the X-Frame-Options header.

/app/*
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff
  Referrer-Policy: no-referrer
  Permissions-Policy: document-domain=()
  Content-Security-Policy: script-src 'self'; frame-ancestors 'none';