× press ESC to close

Netlify builds, deploys, and hosts your front end.

Headers and Basic Authentication

These features are only available in paid plans and our Open Source plan. See our pricing plans for more details.

You can configure custom headers and basic auth for your Netlify site by adding a _headers file to the root of your site folder.

Custom headers

The format is very simple. You can specify one or several URL paths with their additional headers:

## A path:
  # Headers for that path:
  X-Frame-Options: DENY
  X-XSS-Protection: 1; mode=block
  X-Frame-Options: SAMEORIGIN

Paths can contain * or :placeholders. A :placeholder matches anything except / while a * matches anything.

Here’s an example of settings the X-Frame-Options and X-XSS-Protection headers for all pages on your site:

  X-Frame-Options: DENY
  X-XSS-Protection: 1; mode=block

Basic auth

The headers file can also be used to set basic auth headers. It’s a simple way to limit access to particular parts of your site. Basic Auth headers are not enabled for sites in our Open Source plan.

  Basic-Auth: someuser:somepassword anotheruser:anotherpassword

This will trigger the built-in basic browser authentication for any URL under /something. There’s two users defined here, one with the username “someuser” and password “somepassword”, the other with “anotheruser” and “anotherpassword”.

Unlike other headers in the _headers file, the Basic-Auth header will obviously not be sent as a standard HTTP header but used to control the appropriate HTTP headers for basic authentication.

Basic-Auth is only available if you’re on a Basic or higher plan.

Multi-key header rules

The _headers file can include multiple headers with the same name. In that case, Netlify, will concatenate the values of those headers into a single header as described in the RCF 7230.

For example, you can include several Link header fields in the file, like this:

  Link: </style.css>; rel=preload; as=stylesheet
  Link: </main.js>; rel=preload; as=script
  Link: </image.jpg>; rel=preload; as=image

And they will be collapsed into one header following the HTTP 1.1 specification:

Link: </style.css>; rel=preload; as=stylesheet, </main.js>; rel=preload; as=script, </image.jpg>; rel=preload; as=image

Testing header rules

You can test if the rules in your _headers file are correct at Netlify’s Playground. Copy your rules there and click Test rules. The playground will list all the invalid rules in your file if there is any.

Netlify Playground is open source and freely distributable. You can read more about it in our blog.

Want to get started quick?