CORS policy on cached Image

Question

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:<

Answer 1

Described behavior seems logical since cache entry key is a target URI (see 7234 Hypertext Transfer Protocol (HTTP/1.1): Caching). To fix the issue and effectively use cache you need to make image hosting server give same response in both cases.

One option is to make user agent send Origin HTTP header in first request too (given that response with key targetUri is not in a cache already):

Another option is to configure image hosting server to send CORS related HTTP headers regardless of whether request contains Origin HTTP header. For more information see S3 CORS, always send Vary: Origin discussion on StackOverflow.

Also you can inform user agent that responses are sensitive to Origin request HTTP header using Vary response HTTP header. The downside is that probably user agent will use Vary header only as a response validator (and not as a part of a cache entry key) and store only single response instance for a target URI which makes harder to effectively use cache. For more information check The State of Browser Caching, Revisited article by Mark Nottingham.