Атрибут crossorigin является частью технологии CORS и применяется при загрузке аудио со стороннего сайта для использования в элементе <canvas>.
CORS (Cross-origin resource sharing, совместное использование ресурсов между разными источниками) — это механизм, который позволяет веб-страницам делать запросы к ресурсам с другого домена.
По умолчанию браузеры блокируют запросы к таким ресурсам из соображений безопасности, это называется «политика одного источника». CORS позволяет серверу разрешить запросы с разных доменов путём отправки специальных HTTP-заголовков «Access-Control-Allow-Origin». К примеру, если на сервере разрешён доступ с любого стороннего ресурса, то сервер вернёт следующий заголовок:
Access-Control-Allow-Origin: *
Браузер автоматически добавляет заголовок «Origin» в запрос, указывая источник запроса.
Если сервер отправляет заголовок «Access-Control-Allow-Origin» со значением, совпадающим с «Origin» (или с маской «*», как показано выше), запрос разрешается.
Origin: webref.ru
Если у элемента <audio> не указан атрибут crossorigin, то посылается запрос, не относящийся к CORS (без заголовка Origin), при этом браузер помечает аудио как испорченное (оно не считается безопасным) и ограничивает доступ к его данным, не позволяя использовать аудио в элементах <canvas>.
Если атрибут crossorigin указан, то посылается CORS-запрос (с заголовком Origin), но если сервер не соглашается разрешить сторонний доступ, то браузер блокирует загрузку аудио и фиксирует ошибку в панели разработчика.
Синтаксис
<audio crossorigin="anonymous | use-credentials">
Значения
- anonymous
- Запрос к серверу отправляется без учётной записи пользователя (не передаются куки браузера, сертификат X.509, логин и пароль).
- use-credentials
- Запрос включает все учётные данные пользователя (куки браузера, сертификат X.509, логин, пароль и запрос на авторизацию).
Пустое или некорректно значение считается как anonymous.
Браузеры
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.