3

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

anonymous

use-credentials 

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

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

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

2 ответа 2

4

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.
Источник

2
  • что-то нифига не понял. Так правильно ли я понимаю, что его можно использовать для того, чтобы загрузить картинку с чужого сайта на свой сайт? Что мне для этого нужно, в src указать адрес этой картинки и использовать атрибут crossorigin? 12 авг 2016 в 4:46
  • Работает, но что если необходимо чтобы сайт с которого подгружаем изображение или указываем url, произвел манипуляции с куками на стороне пользователя. Есть решение, 27 авг 2022 в 15:06
2

crossorigin нужен, когда ты хочешь подгрузить изображение с чужого сайта для использования его в элементе canvas, что позволяет делать с изображением различные манипуляции. Например библиотека, для создания скришотов в браузере, html2canvas не сможет захватить картинки на странице если они лежат на другом сайте, вот тут и может помочь этот атрибут, но ресурс на котором лежат изображения должен передавать и ними заголовок Access-Control-Allow-Origin.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.