In chrome 22 & safari 6.
Loading images from s3 for usage in a canvas (with extraction as a primary intent) using a CORS enabled S3 bucket, with the following code:
<!-- 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";
I have observed the following:
- Disable caches
- Everything works fine, both images load
Then trying it with caches enabled:
- Enable caches
- DOM image loads, canvas image creates a dom security exception
If I modify the javascript portion of the code to append a query string, like so:
this.img = new Image();
this.img.crossOrigin = 'anonymous';
this.img.src = "http://s3....../bob.jpg?_";
Everything works, even with caching enabled fully. I got on to the caching being a problem by using an http proxy and observing that in the failure case, the image isn't actually being requested from the server.
The conclusion I'm forced to draw is that the image cache is saving the original request headers, which are then being used for the subsequent CORS enabled request - and the security exception is being generated due to violation of the same origin policy.
Is this intended behavior?
Edit: Works in firefox.
Edit2: Cors policy on s3 bucket
<?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>
I'm using wide open because I'm just testing from my local box right now. This isn't in production yet.
Edit3: Updated cors policy to sp