Headers
Attaching headers
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. The _headers
file should not always be in the root directory of the repository. Changes to headers will be updated to your website at build time, so make sure you commit and push the file to trigger a new build each time you update headers.
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]
You can define as many [name]: [value]
pairs as you require on subsequent lines. For example:
---
filename: _headers
---
# 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 |
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.
Matching
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 (:
) indicates the start of a placeholder and the name that follows must be composed of alphanumeric characters and underscores (:\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
.
---
filename: _headers
---
/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:
---
filename: _headers
---
/*
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:
---
filename: _headers
---
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:
---
filename: _headers
---
https://:project.pages.dev/*
X-Robots-Tag: noindex
Harden security for an application
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.
---
filename: _headers
---
/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';