Что означает атрибут crossorigin у элемента img?

241

10 декабря 2016, 10:31

Как я понял атрибут crossorigin - для обработки запросов с других источников. Перечитал интернет, так толком и не понял смысл атрибута. Он нужен, если я хочу взять и загрузить картинку с чужого сайта на свой сайт? Что мне для этого нужно, в src указать адрес этой картинки и использовать атрибут crossorigin? Значения атрибута совсем не понимаю, что означают:

anonymous
use-credentials

Кто-нибудь может объяснить принцип работы атрибута?

Например, код, почему не отображается картинка с другого сайта? Какое значение нужно добавить в атрибут, чтобы картинка появилась?

 <body>
    <div>
        <img src="http://russian7.ru/wp-content/uploads/2014/07/20130215184904.jpg" crossorigin="">
    </div>
 </body>

Answer 1

crossorigin
Этот атрибут определяет, используется ли CORS при загрузке изображения. Изображения, загруженные с помощью CORS, могут использоваться в элементах , не ограничивая функциональность последних (англ. tainted canvas).
У этого атрибута есть 2 допустимых значения:
anonymous
В этом случае перед загрузкой изображения выполняется cross-origin запрос (т.е., используется Origin: HTTP header). Однако, при этом не передаются параметры доступа (ни cookie, ни сертификат X.509, ни логин/пароль для базовой аутентификации по HTTP). В ответе сервера должен присутствовать заголовок Access-Control-Allow-Origin: HTTP header, иначе использование изображения в ограничивается.
use-credentials
Перед загрузкой изображения выполняется cross-origin запрос (Origin: HTTP header) с указанием параметров доступа (в виде cookie, сертификата или пары логин/пароль). В ответе сервера должен присутствовать заголовок Access-Control-Allow-Origin: HTTP header, иначе использование изображения в ограничивается. Если данный атрибут не задан, CORS при загрузке изображения не используется (нет заголовка Origin: HTTP header), и использование изображения в ограничивается всегда. При неверном значении атрибута (например, при опечатке), используется значение anonymous. Для дополнительной информации обратитесь к статье CORS settings attributes.
Источник