Add Security Header on Netlify

It’s straightforward to add a security header on Nginx, however if you host on Netlify it’s even more straightforward. If you’re still on development environment, in this case using Hugo hugo server you can refer to Configure Server Hugo  for development only.

Having said that, once your web is ready for production, please refer to Custom headers Netlify . Based on Netlify web :

You can configure custom headers for your Netlify site in two ways:

• Save a plain text file called _headers to the publish directory of your site. You can find _headers file syntax details below.
• Add one or more headers tables to your Netlify configuration file. This method allows for more structured configuration and additional capabilities, as described in the Netlify configuration file syntax section below.

Here I’m gonna use Syntax for the Netlify configuration file, you can add this on netlify.toml under your root directory.

[[headers]]
  for = "/*"
  [headers.values]
    Content-Security-Policy = "upgrade-insecure-requests; default-src 'self'; child-src 'self'; font-src 'self'; frame-ancestors 'none'; form-action 'self'; frame-src 'self'; img-src 'self'; object-src 'none'; style-src 'self'; script-src 'self'; base-uri 'none';"
    Referrer-Policy = 'strict-origin-when-cross-origin'
    Cross-Origin-Resource-Policy = 'cross-origin'
    X-Content-Type-Options = 'nosniff'
    X-Frame-Options = 'DENY'
    X-XSS-Protection = '1; mode=block'
    Cache-Control = 'public, max-age=31536000'
    Access-Control-Allow-Origin = 'https://*.example.com'
    Permissions-Policy= 'geolocation=(), camera=(), microphone=()'
    Strict-Transport-Security= 'max-age=63072000; includeSubDomains; preload'