Why does Safari throw CORS error when setting base64 data on a crossOrigin = 'Anonymous' image?

Question

I'm having an issue where setting an image src (image created with new Image) to a base64 encoded image fails by throwing: Cross-origin image load denied by Cross-Origin Resource Sharing policy.

I have image.crossOrigin = 'Anonymous' already.

See the following codepen: http://codepen.io/bedeoverend/pen/aORQzg. It works in Chrome, but not in Safari. The black and white pie chart image should show up down the bottom if it worked.

Why does this happen and how can it be resolved?

UPDATE:

To clarify, I've made a more focused codepen here: http://codepen.io/bedeoverend/pen/BNGarr

It seems that setting crossOrigin = 'Anonymous' on an image then loading in base64 fails for Safari. Both text changes to Worked... on Chrome 44, but on Safari 8.0.3, the cross origin Anonymous one fails. EDIT: Also fails on Firefox 35 & 39.

So the question is essentially now, why, when an Image's crossOrigin property is set to 'Anonymous', does Safari fail to load base64 images in?

Answer 1

MDN states that "You must have a server hosting images with the appropriate Access-Control-Allow-Origin header."

According to specs,
_{emphasize mine}

This, unfortunately, can be used to perform a rudimentary port scan of the user's local network [...] User agents may implement cross-origin access control policies that are stricter than those described above to mitigate this attack, but unfortunately such policies are typically not compatible with existing Web content."

You could simply workaround it by checking the url string, if it starts with data: then it probably won't be served with the cross origin header, then you can set the crossOrigin property back to null.