今年は雪が多すぎて、除雪で身体が日々バキバキです。
そんな中、AWS AppSyncで開発中のAPIが指摘されました。
「除雪ばっかりしてないで、レスポンスヘッダー足りないから付けろ！」
と。

（除雪しないと車が動けない状態になるんです。）
そんなことはさておき、本題です。

脆弱性診断等、実施していくとレスポンスヘッダーが必要なことが
わかってきます。その際の解決方法を探ります。

AWS AppSyncを探る

まずは簡単にできないか
AWS AppSyncの設定画面を眺めてみます。
（2022.2.21時点）

はい、レスポンスヘッダーを追加する箇所はありません。

次は、レスポンスマッピングテンプレートかな。

パッとわからないので、
コンテキストリファレンスを見てみます。

コンテキスト情報は以下になります。

{
   "arguments" : { ... },
   "source" : { ... },
   "result" : { ... },
   "identity" : { ... },
   "request" : { ... },
   "info": { ... }
}

やはり、responseがない。。。

GitHubを探る

いました。
AWS AppSyncとして機能はなく、今後？アップデートされるのかもしれません。期待。

解決方法を探る

GitHubにも記載がありましたが、Amazon CloudFront / Lambda@Edgeでレスポンスヘッダーを追加する方法があります。

こんなイメージですね。

最後のCloudFrontに設定したLambda@Edgeでレスポンスヘッダーを追加するパターンです。
ただ、「Lambdaのソースを管理したくないなー」と思ってしまうめんどくさがり屋です。
2021年11月頃、便利なアップデートが出ていました。Amazon CloudFront単体でレスポンスヘッダーを追加することができるのです。さすがです。

これでAWSの設定だけで解決できちゃいます。
こんなイメージです。

やってみる

AWS AppSyncはすでにある前提です。

まずは、Amazon CloudFrontのディストリビューションを作成します。

ご注意
オリジンドメインの選択肢にAWS AppSyncは出てきませんが、API URLを直接入力します。

TLSの設定等を行った後（項目が多いので割愛します）、「デフォルトのキャッシュビヘイビア」の「レスポンスヘッダーポリシー」を設定します。
今回は、カスタムポリシーとしますので、「ポリシーを作成」を選択します。

ちなみに、マネージドポリシーもあるので、付与したいヘッダーがあれば活用すると良いですね。

レスポンスヘッダーポリシー作成ページで名前や説明、オプションを設定します。
その後、カスタムヘッダーを設定し、作成します。今回は、「x-snow-key」というヘッダーを追加します。
セキュリティヘッダーオプションもあるので、活用していきましょう。

最後に元のページで作成したポリシーを設定します。

確認する

設定したAmazon CloudFront経由でAWS AppSyncにアクセスしてみます。

先ほど設定した「x-snow-key」というレスポンスヘッダーが追加されていることがわかります。
無事、成功です。

まとめ

2022/2/21時点ではAWS AppSync内でレスポンスヘッダーを設定することができませんが、他のサービスを利用することでレスポンスヘッダーを追加することが可能です。さらにLambda@Edgeを準備することなく、CloudFrontの設定で実現できるのはありがたいですね。

同じことで悩んでいる方の少しでもお力になれれば幸いです。

※2022/3/9 追記
レスポンスヘッダーを追加できるようになったので、以下を書きました！