Почему Safari бросает ошибку CORS при настройке данных base64 на изображение crossOrigin = 'Anonymous'?

У меня возникла проблема, когда установка изображения src (изображение, созданного с помощью new Image), на кодированное изображение с базой 64 не выполняется, бросая: Cross-origin image load denied by Cross-Origin Resource Sharing policy.

У меня уже image.crossOrigin = 'Anonymous'.

См. следующий код: http://codepen.io/bedeoverend/pen/aORQzg. Он работает в Chrome, но не в Safari. Черно-белое изображение круговой диаграммы должно отображаться внизу, если оно работает.

Почему это происходит и как оно может быть разрешено?

UPDATE:

Чтобы уточнить, я сделал более целенаправленную кодировку здесь: http://codepen.io/bedeoverend/pen/BNGarr

Кажется, что установка crossOrigin = 'Anonymous' на изображении, а загрузка в base64 не выполняется для Safari. Оба текста изменяются на Worked... на Chrome 44, но в Safari 8.0.3 ошибка перекрестного источника анонимного не выполняется. EDIT: также не удается выполнить Firefox 35 и 39.

Итак, теперь вопрос заключается в том, почему, когда для свойства Image CrossOrigin установлено значение "Аноним", Safari не загружает изображения base64 в?

Ответ 1

MDN утверждает, что "у вас должен быть сервер, содержащий изображения с соответствующим заголовком Access-Control-Allow-Origin".

По в спецификации,
_{подчеркнуть мой}

Это, к сожалению, можно использовать для выполнения рудиментарного сканирования портов локальной сети пользователя [...] Пользовательские агенты могут реализовывать политики контроля доступа с несколькими исходными кодами, которые более строгие, чем те, которые описаны выше для смягчения этой атаки, но, к сожалению, такие политики обычно не совместимы с существующим веб-контентом ".

Вы можете просто обходным путем, проверив строку url, если она начинается с data:, то она, вероятно, не будет использоваться с заголовком перекрестного происхождения, тогда вы можете вернуть свойство crossOrigin обратно в null.