こんにちは！今日はCloudfront の設定をしているとよく引っかかるCORS などについて解説していきたいと思います。構築シリーズをよくしていましたが、今回は仕組みについて書いていきます！
CORS とは
CORS は日本語では、オリジン間リソース共有といいます。英語のフルでは、Cross-Origin Resource Sharing です。二つのオリジンの間でアクセスができるようにする仕組みです。
図を使って説明していきます。
構成図
よくある構成図ですね。コンテンツはEC2 から取得して、画像に関しては、S3 から取得するシステムになっています。今回は前提として、
- ALB にアクセスする側のドメイン
- example.com
- S3 の画像にアクセスするドメイン
- img.example.com
として設定します。どういう役割のドメインなのかを分ける形がhtml に書くときにもきっとわかりやすいですね。
オリジンはどこ？
ここでのCloudfront からみたオリジンはどこでしょうか？
- ALB (example.com)
- S3 (img.example.com)
この二つがオリジンになります。ということはS3 にイメージファイルを配置していて、
ALB 配下のhtml から返す場合はこれはオリジンの間でのリソース共有が必要になります。
なので、もしCORS の許可ポリシーをCloudfront 側で設定しない場合はエラーが発生します。
下記のようなエラーですね。
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.他のオリジンからアクセスされているのがわかる？
ちょっとややこしいので、これもまた図式化が必要です。
下の図でも示していることを見ていきます！
リクエストの流れについて
① ユーザが example.com にリクエストします
② Request Header の情報にorigin がexample.com であることが伝えられます
③ それに対してResponse header にユーザがアクセスしたサイト内容を返します
④同時にimg.example.com の画像も必要なので、画像を返そうとします
その時にexample.com と img.example.com はheader 上のオリジンが違うので、ブラウザ側でブロックされてしまいます。
許可するにはどうしたらいいですか？
異なるオリジンを許可、つまりimg のドメインからレスポンスを返すためには、CORSを許可してあげる必要があります。それが、Access Controll Allow Origin というのをヘッダーに追加してあげることです。ヘッダーを追加してあげるのは、img のドメインの方です。
Access-Control-Allow-Origin: https://example.comそうすると、img ファイルは異なるオリジンだけど、このオリジンからは許可しますよ！っていう設定になります。アスタリスクにすると他のドメインへのアクセスも許可することになるので、セキュリティ上は一部のドメインに絞ることをおすすめします。
今回だと上のように example.com のみに絞ることをお勧めします！意図して許可する分には問題ないと思いますが、一度システムの仕組みなどを見てみることを非常におすすめします！
ちなみにCloudfront だとどの設定を使う？
上のブラウザの設定だとCloudfront の設定は説明しずらいですが、Cloudfrontは基本的に下記の構成の場合、ヘッダーの橋渡しの役割をします。なので、
- オリジンリクエストポリシー：CORS-S3Origin
- S3にもAccess Control header を渡してあげる(Method も一緒に渡ります)
- レスポンスヘッダー：SimpleCORS
- S3 からレスポンスでAccess Control header を返す
などといった設定がお勧めです。ここをベースにして、セキュリティをどう考えていくか決めて行くといいんじゃないかと思います！
まとめ
Cloudfront とブラウザを用いた説明をしました。この記事でCORSのことをよく知って、普段のエンジニアリングに生かしていただけますと幸いです！
参考サイト
＼ 最新情報をチェック ／
コメント