エラー403 AWS S3でホストされている静的なWebサイト読み込みイメージでCORSを使用しようとしています

Question

私のルートフォルダ（AWS S3のenglifyバケットにもあります）にindex.htmlファイルをダンプし、画像フォルダ。私のCORSの構成は次のように設定されています

<?xml version="1.0" encoding="UTF-8"?> 
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> 
    <CORSRule> 
     <AllowedOrigin>englify.s3-website-ap-southeast-1.amazonaws.com</AllowedOrigin> 
     <AllowedMethod>GET</AllowedMethod> 
     <AllowedMethod>PUT</AllowedMethod> 
     <AllowedMethod>POST</AllowedMethod> 
     <AllowedMethod>DELETE</AllowedMethod> 
     <AllowedHeader>*</AllowedHeader> 
    </CORSRule> 
</CORSConfiguration> 

と私のリクエストヘッダのような、次のとおりです。

Accept:image/webp,image/*,*/*;q=0.8 
Accept-Encoding:gzip, deflate, sdch, br 
Accept-Language:en-GB,en-US;q=0.8,en;q=0.6 
Cache-Control:max-age=0 
Connection:keep-alive 
Host:s3-ap-southeast-1.amazonaws.com 
If-Modified-Since:Wed, 26 Oct 2016 17:25:03 GMT 
If-None-Match:"f599a968271741f977379e125797434e" 
Referer:http://englify.s3-website-ap-southeast-1.amazonaws.com/ 
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36 

は私がCORSヘッダに「起源」を探していることを理解するが、私はそれを設定しない方法についてhtml <img>タグですか？私の唯一の回避策は、画像を公開することでした。

Answer 1

ここにいくつかのコンセプトを混在させているようです。

1. ウェブページは、他のドメインの静的コンテンツ（画像、動画など）を埋め込むことができます。ブラウザは通常、喜んであなたをお送りします。
2. AJAX呼び出しのような動的なものについては、ブラウザはデフォルトで他のドメインへの呼び出しを防ぎます。その理由は、たとえば、クロスサイトスクリプティング攻撃の被害を受けた後、悪質なAJAXコールからあなたを守ることです。サーバーAの許可元を持つCORSヘッダーは、ブラウザーにサーバーAのサイトをレンダリングし、サーバーBへのAJAX呼び出しを許可するように指示します。
3. S3はインターネットに提供するファイルに対してアクセス制御を行います。

あなたのケースでは、S3にホストされている静止画像を埋め込みます。 S3は403で応答しています。CORS保護はブラウザレベルで行われます。 A 403はHTTPレベルで発生します。だからS3は実際にあなたの画像を取得することが許可されていないことをあなたのブラウザに伝えています。 これを確認する方法：ブラウザのS3から直接画像をリクエストしてください。同じエラーが表示されます。そうすれば、CORSの問題は解決できます。

あなたはすでに問題の解決策を見つけました。画像を公開してください。その後S3は喜んで奉仕するでしょう。

イメージを公開したくない場合は、S3ドキュメントでそのイメージを保護する方法を確認できます。しかし、一般的に、画像はセッションを持っているユーザ/ AWSにログインしているユーザだけが利用できます。もう1つのオプションはCloudFrontを見ることです。ここでは、特定のCloudFrontリソース（S3でバックアップ可能）へのアクセスを提供するWebアプリケーションのトークンを生成するポリシーを定義できます。