Vercel の Response header に X-Frame-Optionsを追加する

はじめに

Vercel を使っているプロジェクトでQAの方にセキュリティチェックを実施していただいたところ、X-Frame-Options header is not included in the HTTP response to protect against 'ClickJacking' attacks という内容のチェックに引っかかりました。

Vercelにデプロイした場合、デフォルトだとレスポンスヘッダーに X-Frame-Options が含まれないようです。

そこで、X-Frame-Options: DENY の追加を試みました。

Vercel の Response header に X-Frame-Optionsを追加する

前提：AngularのプロジェクトをVercelにデプロイしています。

1. プロジェクト直下に vercel.json を新規作成します。
2. vercel.jsonの内容は以下のようにします。

{
  "headers": [
    {
      "source": "/(.*)",
      "headers" : [
        {
          "key" : "X-Frame-Options",
          "value" : "DENY"
        }
      ]
    }
  ]
}

これでデプロイすればOKです。 簡単でした。

参考：

vercel.com

最後に

現状（2021年4月27日時点）だとVercelを使っている場合、デフォルトでは X-Frame-Options が付与されていないようなので、気をつけておくと良さそうです。