Содержание

HTML атрибут: crossorigin (перекрестное происхождение)

Атрибут crossorigin , действительный для элементов <audio>, <img>, <link>, <script> и <video>, обеспечивает поддержку CORS определяя, как элемент обрабатывает запросы из разных источников, тем самым позволяя настраивать запросы CORS для извлеченных данных элемента. В зависимости от элемента атрибут может быть атрибутом настроек CORS.

Атрибут контента crossorigin в элементах мультимедиа является атрибутом настроек CORS.

Эти атрибуты перечисляются и имеют следующие возможные значения:

anonymousВ запросе используются заголовки CORS, а флаг учетных данных установлен в значение 'same-origin'. Обмен учетными данными пользователя через файлы cookie, SSL-сертификаты на стороне клиента или HTTP-аутентификацию не осуществляется , если пункт назначения не совпадает с источником.
use-credentialsВ запросе используются заголовки CORS, установлен флаг учетных данных 'include' и учетные данные пользователя всегда включены.
""Установка имени атрибута в пустое значение, например crossorigin или crossorigin=«», аналогично anonymous.

Недопустимое ключевое слово и пустая строка будут обрабатываться как anonymous ключевое слово.

По умолчанию (то есть, когда атрибут не указан) CORS вообще не используется. Пользовательский агент не будет запрашивать разрешение на полный доступ к ресурсу, и в случае запроса между источниками будут применяться определенные ограничения в зависимости от типа соответствующего элемента:

ЭлементОграничения
<img>, <audio>, <video>Когда ресурс помещается в <canvas>, элемент помечается как испорченный.
scriptДоступ к журналу ошибок через window.onerror будет ограничен.
linkЗапрос без соответствующего crossorigin заголовка может быть отклонен.

Примечание. Этот crossorigin атрибут не поддерживается rel="icon" в браузерах на базе Chromium. См. открытый выпуск Chromium.

Пример: crossorigin с <script> элементом

Вы можете использовать следующий <script> элемент, чтобы указать браузеру выполнить сценарий файла script-defer.js находящегося в папке «js» для смены цвета прямоугольника при наведении мыши. Ниже приведен код файла script-defer.js

JavaScript
example.onmouseover = function() {
example.style.background= "red";
};
 
example.onmouseleave = function() {
example.style.background= "yellow";
};

Пример: веб-манифест с учетными данными

Это use-credentials значение необходимо использовать при получении манифеста , требующего учетных данных, даже если файл имеет то же происхождение.

Пример: <video> и <audio> с перекрестным происхождением

Теги <video> и <audio> с атрибутом Crossorigin