Amplifyでセキュリティヘッダ（Strict-Transport-Security, X-Frame-Options, X-XSS-Protection, X-Content-Type-Options, Content-Security-Policy）を追加する

Amplifyでセキュリティ対策（カスタムヘッダを追加）した際のメモです。
CloudFrontよりお手軽に設定できます。

方法

以下2点のいずれかの方法で設定しましょう。

1. 設定ファイル追加（customHttp.yml）
2. Amplify Console

1. 設定ファイル追加（customHttp.yml）

レポジトリのルートディレクトリにcustomHttp.ymlファイルを追加し、commit & push します。
Amplify Consoleでのデプロイアクションの後、指定したヘッダが追加されているのが確認できるでしょう。

./customHttp.yml

customHeaders:
  - pattern: '**/*'
    headers:
      - key: 'Strict-Transport-Security'
        value: 'max-age=31536000; includeSubDomains'
      - key: 'X-Frame-Options'
        value: 'SAMEORIGIN'
      - key: 'X-XSS-Protection'
        value: '1; mode=block'
      - key: 'X-Content-Type-Options'
        value: 'nosniff'
      - key: 'Content-Security-Policy'
        value: 'default-src self'

2. Amplify Console

Amplify Console -> Custom headersに移動します。

上記、yamlと同等の内容を追加して、保存します。

（参考） CloudFrontの場合

Lambda@Edgeで対応できますが、Amplifyより手間がかかります。

[CloudFront] Lambda@EdgeでHTTPセキュリティヘッダーを追加する方法

参考サイト

• （公式ドキュメント） AWS Amplify - Custom headers