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.
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?
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?
MDN states that "You must have a server hosting images with the appropriate Access-Control-Allow-Origin header."
According to specs,
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
©2020 All rights reserved.