title: CORS policy on cached Image
body: <p>In chrome 22 &amp; safari 6.</p>
  
  <p>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:</p>
  
  <pre><code>&lt;!-- In the html --&gt;
  &lt;img src="http://s3....../bob.jpg" /&gt; 
  
  // In the javascript, executed after the dom is rendered
  this.img = new Image();
  this.img.crossOrigin = 'anonymous';
  this.img.src = "http://s3....../bob.jpg";
  </code></pre>
  
  <p>I have observed the following:</p>
  
  <ol>
  <li>Disable caches</li>
  <li>Everything works fine, both images load</li>
  </ol>
  
  <p>Then trying it with caches enabled:</p>
  
  <ol>
  <li>Enable caches</li>
  <li>DOM image loads, canvas image creates a dom security exception</li>
  </ol>
  
  <p>If I modify the javascript portion of the code to append a query string, like so:</p>
  
  <pre><code>this.img = new Image();
  this.img.crossOrigin = 'anonymous';
  this.img.src = "http://s3....../bob.jpg?_";
  </code></pre>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Is this intended behavior?</p>
  
  <p>Edit: Works in firefox.</p>
  
  <p>Edit2: Cors policy on s3 bucket</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"&gt;
      &lt;CORSRule&gt;
          &lt;AllowedOrigin&gt;*&lt;/AllowedOrigin&gt;
          &lt;AllowedMethod&gt;GET&lt;/AllowedMethod&gt;
      &lt;/CORSRule&gt;
  &lt;/CORSConfiguration&gt;
  </code></pre>
  
  <p>I'm using wide open because I'm just testing from my local box right now. This isn't in production yet.</p>
  
  <p>Edit3:  Updated cors policy to specify an origin</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"&gt;
      &lt;CORSRule&gt;
          &lt;AllowedOrigin&gt;http://localhost:5000&lt;/AllowedOrigin&gt;
          &lt;AllowedMethod&gt;GET&lt;/AllowedMethod&gt;
      &lt;/CORSRule&gt;
  &lt;/CORSConfiguration&gt;
  </code></pre>
  
  <p>Verified outgoing headers:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>Incoming headers:</p>
  
  <pre><code>Access-Control-Allow-Origin http://localhost:5000
  Access-Control-Allow-Methods    GET
  Access-Control-Allow-Credentials    true
  </code></pre>
  
  <p>Still fails in chrome if I don't bust the cache when loading into the canvas.</p>
  
  <p>Edit 4:</p>
  
  <p>Just noticed this in the failure case.</p>
  
  <p>Outgoing headers:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>Incoming headers:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>I <em>think</em> this is the first request, triggered by the dom. I don't know that it isn't the javascript request though.</p>