Canvas video and CORS issue in IE and Safari

Question

I have a canvas element, which uses getImageData()and putImageData()on canvas. My item <video>has a property crossorigin="anonymous".

The video comes from S3 / Cloudfront. My bucket has this CORS configuration right now:

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

This works great in Chrome and Firefox. I successfully draw a video on canvas.

My problem is with Safari and IE (especially in IE, but due to the fact that I understand this is IE10 + problem).

When I try to do this in IE or Safari, I get this error:

Unable to get image data from canvas because the canvas has been tainted by cross-origin data.

I understand the error, because before I installed CORS, chrome and firefox gave the same error. Adding CORS fixed it for chrome and firefox, but not for IE and Safari.

I noticed that the headers of the video responses were different from chrome to IE.