CloudFrontとS3のCORS対応

2021/2/6追記: 新コンソールではS3でのCORS設定はJSONで記述する必要がある

CORSとは何か

Cross-Origin Resource Sharing、オリジン間リソース共有。
ブラウザで閲覧しているページと違うドメインからのリソースの取得を許可する仕組み。
ちゃんと知りたい場合は、W3C勧告を読むのが早い。

なぜCORSがあるのか

他のサーバーからデータを取得して、任意のコードを実行される等のセキュリティ上の問題があるから。
ただし、これらはブラウザの実装であり、例えばサーバー同士で直接遣り取りする場合は関係無い。
また、他ドメインからのデータ転送を防いだからと言ってセキュリティ上の問題が無くなるわけでは当然無く、どちらかと言うと「そういう仕組みがあるんだな」という捉え方でいるほうが良いと思われる。
CORS対応はデータを呼ばれる側で行う。

S3のCORS対応

CORS設定したいS3バケットのPermissions > CORS Configurationsに以下のような設定をする。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

上記は全ドメインからのクロスオリジンのGETリクエストを許可するもので、緩めの設定になっている。
リクエスト元URLを指定する場合は、<AllowedOrigin>http://www.example.com</AllowedOrigin>のようになる。
詳しくは公式ヘルプ参照。

ちなみにS3については、ぱっと見ると設定がデフォルトでされているように見えるが、見えているのはサンプルであって、デフォルトでCORSが適用されているわけではない。

サンプル例（※これを設定するのではない）

CloudFrontのCORS対応

CloudFront > CORS設定したいDistribution > Distribution Settings > Behaviors > Editから、以下設定を行う。

• Cache Based on Selected Request HeadersをWhite Listに
• Whitelist HeadersでOriginをAdd

参考

• Cross-Origin Resource Sharing（W3C勧告）
• オリジン間リソース共有 (CORS) - HTTP | MDN
• リクエストヘッダーに基づいてオブジェクトをキャッシュするように CloudFront を設定する - Amazon CloudFront