Javascript Image () missing `Origin` header when loading src

Question

Have fun with the canvas and, in particular, Google Chrome. Right now I am uploading an image through Javascript, which should be used in a canvas wrapped with EaselJS. This is how I upload an image (hosted on S3):

imageLoad: function(imageUrl, imageId) { var image = new Image(); image.crossOrigin = "Anonymous"; image.imageId = imageId image.onload = this.handleImageLoad; image.src = imageUrl; } 

Images are stored in an Amazon S3 bucket with the following CORS properties:

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

Problem

The browser does not seem to set the Origin header when loading the image above. This especially happens if the image is already loaded outside of javascript and cached by the browser. However - and here, where it gets weird - after the second attempt to upload the image using Javascript, the CORS security problems go away (and apparently the browser sets the Origin header).

We tested this behavior several times, and also confirmed it by setting up a server that forces CORS headers with each response. It appears that the browser does not add Origin headers even with a direct request.

Question

So, given all this information, what can we do to solve this problem? Can Amazon CloudFront always add CORS headers? Is there a problem with image.crossOrigin = "Anonymous" ?

Answer 1

The solution to this problem was to simply put Fastly CDN ( http://fastly.com ) in front of our S3 bucket. Not a very nice way to do something, but we were able to add custom headers in the "Settings" section of our service.

This was the solution to this particular problem.