BLOG // May 3, 2021

Setting up Security Headers with Vercel

Vercel provides an easy way to configure your Security Headers for browsers. This is great with any site deployed via Vercel really, but especially with website front-ends.

vercel.json

Vercel provides support for reading vercel.json from your root directory with a bunch of config options in it. We're going to exclusively use it for setting security headers. You can find out more information from Vercel on their docs.

Our config

We have decided to set a very standard set of headers, that should work with basically any site. You can copy our vercel.json file below.

{
  "headers": [
    {
      "source": "/(.*)",
      "headers" : [
        {
          "key" : "X-Content-Type-Options",
          "value" : "nosniff"
        },
        {
          "key" : "X-Frame-Options",
          "value" : "DENY"
        },
        {
          "key" : "X-XSS-Protection",
          "value" : "1; mode=block"
        },
        {
          "key" : "Referrer-Policy",
          "value" : "strict-origin"
        },
        {
          "key" : "Permissions-Policy",
          "value" : "geolocation=(self), microphone=()"
        }
      ]
    }
  ]
}

Should you wish to alter or add anything, do so, and then commit and push your files to git. Vercel will automatically configure you security headers.

Testing

You can test your headers by going to SecurityHeaders.com and trying your site! You should now have a shiny green A!

Something I haven't covered here is your Content-Security-Policy, which in my opinion should be handled by your application. But otherwise, it's sorted!

Comments

Subscribe to new articles

If you enjoy my content, consider subscribing. You will only receive new blog stories, no other email.