Adding HTTP response headers to a Netlify static website
HTTP stands for “Hypertext Transfer Protocol”. Almost everything you see in your browser is transmitted to your computer over HTTP. HTTP headers are the core part of these HTTP requests and responses, and they carry information about the client browser, the requested page, the server and more. The ability to configure your HTTP headers allows you to do things such as define your Cache Control, Content Security Policy your X Frame Options, and all kinds of other important things to help control security of your website.
Netlify allows you to set additional HTTP response headers in a file called
_headers or as part of a
[[headers]] section of your
netlify.toml file. If you decide to add HTTP response headers in
_headers file then put it in your deployed directory. Some static site generators, like Jekyll, may also require additional configuration to avoid exclusion of files that begin with
_. (For Jekyll, this requires adding an include parameter to
netlify.toml file allows you to define headers for different URLs (for example
/about) or URL segments (for example
/* for all URLs) of your website.
Here’s a sample
/* X-Frame-Options: DENY X-XSS-Protection: 1; mode=block Referrer-Policy: no-referrer X-Content-Type-Options: nosniff
[[headers]] for = "/*" # This defines which paths this specific [[headers]] block will cover. [headers.values] X-Frame-Options = "DENY" X-XSS-Protection = "1; mode=block" Referrer-Policy = "no-referrer" X-Content-Type-Options = "nosniff"
Cache-Control for static assets simply add these lines to
[[headers]] for = "*.css" [headers.values] Cache-Control = "max-age=604800, public" [[headers]] for = "*.js" [headers.values] Cache-Control = "max-age=604800, public"
/*.css Cache-Control: public, s-max-age=604800 /*.js Cache-Control: public, s-max-age=604800
This site is ad-free and doesn’t use trackers. If you’d like to support my writing, I’d love if you could buy me a coffee.