Атрибут crossorigin

Атрибут crossorigin указывает браузеру, как обращаться с внешними (кроссдоменными) ресурсами, чтобы соблюсти политику Cross-Origin Resource Sharing. Используется, например, с изображениями, шрифтами, видео, аудио, скриптами и стилями, подключёнными с других доменов.

        
          
          <!-- Подключаем шрифт с другого домена --><link  rel="stylesheet"  href="https://fonts.googleapis.com/css2?family=Manrope&display=swap"  crossorigin="anonymous"><!-- Видео с другого домена, требующее авторизации --><video controls crossorigin="use-credentials">  <source src="https://example.com/secure/video.mp4" type="video/mp4"></video>
          <!-- Подключаем шрифт с другого домена -->
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Manrope&display=swap"
  crossorigin="anonymous"
>

<!-- Видео с другого домена, требующее авторизации -->
<video controls crossorigin="use-credentials">
  <source src="https://example.com/secure/video.mp4" type="video/mp4">
</video>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Атрибут crossorigin может принимать несколько значений:

• anonymous (значение по умолчанию) — отправляет запрос без учётных данных (куки, заголовков авторизации, клиентских сертификатов). Ответ должен содержать заголовок Access-Control-Allow-Origin.
• use-credentials — отправляет запрос с учётными данными.

В случае использования use-credentials ответ от сервера должен включать:

        
          
          Access-Control-Allow-Origin: [точный домен]Access-Control-Allow-Credentials: true
          Access-Control-Allow-Origin: [точный домен]
Access-Control-Allow-Credentials: true

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Применяется в таких тегах, как: <img>, <script>, <link>, <audio>, <video>, <iframe>, <use> (в SVG).

Браузер защищает сайты от того, чтобы внешние ресурсы получали доступ к приватной информации пользователя, например, к куки или токенам. Атрибут crossorigin явно говорит браузеру, как вести себя при загрузке ресурсов с других источников, особенно когда результат нужен для JavaScript. К примеру, для отрисовки изображения на <canvas> или доступа к видео.

Если политика не соблюдена — может не загрузиться ресурс или возникнуть CORS-ошибка в консоли.

💡 Если вы подключаете ресурсы из CDN (сети доставки содержимого) и они не загружаются, попробуйте добавить crossorigin="anonymous".
💡 Без crossorigin некоторые теги работают, но доступа к данным ресурса через JavaScript не будет. К примеру, скрипт для анализа аудио.
💡 Неправильное ключевое слово или пустая строка, будет обработано как anonymous.
💡 Проверяйте консоль браузера: она подскажет, если нарушена политика CORS.