Static-web-apps: Support for custom headers

[jordanfinners]

It would be great to support setting of custom headers on the static website.
This would be useful so that people can set security headers etc on their sites, for example some standard security headers below.
It might be good to set default security headers on static websites as best practice to achieve a good score on https://securityheaders.com/ .

          {
            "key": "X-Content-Type-Options",
            "value": "nosniff"
          },
          {
            "key": "Strict-Transport-Security",
            "value": "max-age=10886400; includeSubDomains; preload"
          },
          {
            "key": "Referrer-Policy",
            "value": "same-origin"
          },
          {
            "key": "X-DNS-Prefetch-Control",
            "value": "off"
          },
          {
            "key": "X-XSS-Protection",
            "value": "1; mode=block"
          },
          {
            "key": "Feature-Policy",
            "value": "accelerometer 'none'; camera 'self'; geolocation 'none'; gyroscope 'none'; magnetometer 'none'; microphone 'self'; payment 'none'; usb 'none'"
          },

[DaveA-W]

Along similar lines

1. X-Powered-By and Server headers should be removable (or removed by default)
2. Cache-Control would be handy to be customisable
   For example, if a static content generator already fingerprints filenames, we can give a larger max-age and omit the ETag

[vantascloud]

Along similar lines

1. X-Powered-By and Server headers should be removable (or removed by default)
2. Cache-Control would be handy to be customisable
   For example, if a static content generator already fingerprints filenames, we can give a larger max-age and omit the ETag

Being able to set via blob metadata would be useful, offers means to control it

[pedrolamas]

This is something I'm very interested too!

Netlify currently supports this on their deployments and GatsbyJs even have a plugin that automatically creates a headers file!

https://docs.netlify.com/routing/headers/#syntax-for-the-headers-file

https://www.gatsbyjs.org/packages/gatsby-plugin-netlify/

[miwebst]

Hey @jordanfinners , thanks for the great feedback! We've added a few default headers while we add the ability for users to add custom headers. Appreciate your feedback!

[sinedied]

Besides adding custom headers, removing default headers should be supported too:

While it's nice to have such security options enabled by default, I would really like being to tune them as needed.

[richardrobberse]

I agree, I'm now building an app that requires geolocation access but this is disabled by default :(
I guess there's no way to get around this, right?

[miwebst]

Yes currently there is no way around them, our support for custom headers got delayed slightly but is still on the way. In the meantime we will soften our default security headers to avoid causing issues for you all!

[richardrobberse]

@miwebst good to hear it's on the roadmap!
Does 'soften our default security headers' mean that you'll allow geolocation access at least for the 'self' scope or are they already 'softened' at the moment?

[miwebst]

We have added the ability to add DefaultHeaders to responses, you can find the documentation here: https://docs.microsoft.com/en-us/azure/static-web-apps/routes#default-headers

For now this is part of the routes.json, in the future this file is likely to change to something more generic.

[richardrobberse]

@miwebst That's great news, just managed to add a Feature-Policy header for geolocation access 👍
Thanks for the update!