クロム 22 & サファリ 6。
次のコードを使用して、CORS 対応の S3 バケットを使用して、キャンバスで使用するために s3 から画像をロードします (主な目的として抽出を使用)。
<!-- In the html -->
<img src="http://s3....../bob.jpg" />
// In the javascript, executed after the dom is rendered
this.img = new Image();
this.img.crossOrigin = 'anonymous';
this.img.src = "http://s3....../bob.jpg";
私は次のことを観察しました：
- キャッシュを無効にする
- すべて正常に動作し、両方の画像が読み込まれます
次に、キャッシュを有効にして試してみます。
- キャッシュを有効にする
- DOM イメージが読み込まれ、キャンバス イメージが dom セキュリティ例外を作成する
コードの JavaScript 部分を変更してクエリ文字列を追加すると、次のようになります。
this.img = new Image();
this.img.crossOrigin = 'anonymous';
this.img.src = "http://s3....../bob.jpg?_";
キャッシュを完全に有効にしても、すべてが機能します。http プロキシを使用し、失敗した場合、画像が実際にはサーバーから要求されていないことを観察することで、キャッシングが問題であることに気付きました。
私が引き出さなければならない結論は、イメージキャッシュが元のリクエストヘッダーを保存しており、それが後続の CORS 対応リクエストに使用されているということです。同じオリジンポリシーに違反しているため、セキュリティ例外が生成されています。
これは意図した動作ですか?
編集：Firefoxで動作します。
Edit2: s3 バケットの Cors ポリシー
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
現在、ローカルボックスからテストしているだけなので、ワイドオープンを使用しています。これはまだ生産されていません。
Edit3: オリジンを指定するように cors ポリシーを更新しました
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>http://localhost:5000</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
確認済みの送信ヘッダー:
Origin http://localhost:5000
Accept */*
Referer http://localhost:5000/builder
Accept-Encoding gzip,deflate,sdch
Accept-Language en-US,en;q=0.8
Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.3
着信ヘッダー:
Access-Control-Allow-Origin http://localhost:5000
Access-Control-Allow-Methods GET
Access-Control-Allow-Credentials true
キャンバスにロードするときにキャッシュを無効にしないと、クロムでも失敗します。
編集4：
失敗のケースでこれに気づきました。
送信ヘッダー:
GET /373c88b12c7ba7c513081c333d914e8cbd2cf318b713d5fb993ec1e7 HTTP/1.1
Host amir.s3.amazonaws.com
User-Agent Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.91 Safari/537.4
Accept */*
Referer http://localhost:5000/builder
Accept-Encoding gzip,deflate,sdch
Accept-Language en-US,en;q=0.8
Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.3
If-None-Match "99c958e2196c60aa8db385b4be562a92"
If-Modified-Since Sat, 29 Sep 2012 13:53:34 GMT
着信ヘッダー:
HTTP/1.1 304 Not Modified
x-amz-id-2 3bzllzox/vZPGSn45Y21/vh1Gm/GiCEoIWdDxbhlfXAD7kWIhMKqiSEVG/Q5HqQi
x-amz-request-id 48DBC4559B5B840D
Date Sat, 29 Sep 2012 13:55:21 GMT
Last-Modified Sat, 29 Sep 2012 13:53:34 GMT
ETag "99c958e2196c60aa8db385b4be562a92"
Server AmazonS3
これは、dom によってトリガーされた最初の要求だと思います。ただし、それがjavascriptリクエストではないことはわかりません。