aws cloud frontにアクセスするとループになる

Question

https://qiita.com/shinon_uk/items/2171071b6f6795af726c
こちらのサイトを参考にaws amplifyで作成したwebページに対してcloud frontを設定し、WAFを設定しました。

amplifyにはuserとpasswordを設定し、cloud frontにはアメリカからのアクセス禁止ルールを適用しました。

想定

amplifyからのurlではuserとpasswordを聞かれる
cloudfrontのurlからのアクセスではuserとpasswordは聞かれず、アメリカからのアクセスのみ遮断する

結果

cloud frontのurlにアクセスした際もuserとpasswordを聞かれて、入力してもまたuserとpasswordを聞かれるループに入ります。

amplifyの環境変数で_DISABLE_l2_CACHE=trueも設定しています。

情報も少なく、詰まっています。どなたか解決策をご存じでしたら教えてください。

Answer 1

amplifyにはuserとpasswordを設定

AmplifyConsoleに標準でついているBasic認証の事でしょうか。
CloudFrontのオリジン設定にて以下のカスタムヘッダーを追加して下さい。
ヘッダー名：authorization
値:BASE64でエンコードしたユーザとパスワード

例えばご自身で設定されたID/PASSがadmin/passpassであれば
ヘッダー名：authorization
値:Basic YWRtaW46cGFzc3Bhc3M=
となります。

参考サイトですとカスタムヘッダー名が先頭大文字で記載されていますが
ALL小文字でないといけなかった気がします。

また追加でCloudFrontのビヘイビアのキャッシュポリシーにて
キャッシュキー設定欄から
Authorizationヘッダを含めて頂ければと思います。