NetlifyのJWS実装

設定に際して、日本語ドキュメントが無かったのと、いくつかハマったポイントがあるので紹介する。

軽く仕組みを説明するとこんな感じである。

1. システム開発者はNetlifyの環境変数で共通鍵を登録する
2. Netlifyは、環境変数を元に暗号化された x-nf-signヘッダーを外部エンドポイント(今回はバックエンドAPIサーバー)へのリクエストに付与する
3. APIサーバーは、システム開発者が設定した共通鍵を元に、x-nf-signヘッダーを検証する

手順

フロント側

まずは環境変数に共通鍵をセットする。

変数名はなんでもいいが、後で使うので覚えておくこと。

今回は “JWS_SECRET” とする

 

次に、netlify.toml をプロジェクトルートに追加してデプロイする

# この設定をすることで、フロント(xxx.netlify.app)の/api/にリクエストすると、バックエンドにプロキシされ、ヘッダーが付与される
[[redirects]] 
  from = "/api/*" 
  to = "https://{backend API サーバーのドメイン}/:splat" # splatは予約語。動作確認したい場合は、webhook.siteとかを指定するとヘッダーが追加されているのを見れるのでオススメ
  status = 200
  force = true
  signed = "JWS_SECRET" # 環境変数でセットした変数名を明示する


# (optional)
#   SPAの場合は、 _redirects ファイルを使わずに下記のようににリダイレクト処理を書く。_redirectsがプロジェクト内にある場合は削除すること。
[[redirects]] 
  from = "/*"
  to = "/index.html"
  status = 200

API側

バックエンドでは、jwsを検証する。flaskの例を記載する。

@app.before_request
def verify_jws():
    signature = request.headers.get("x-nf-sign", '')
    try:
        jws.verify(signature, JWS_SECRET, algorithms=["HS256"])
    except JWSError:
        return Response(response={}, status=403)

 

これで、netlifyにデプロイしたフロントエンド以外からのリクエストは403になる。

もしローカルから接続できないと困る場合は、開発用のAPIキーなどを設定してもいいかも。