Атрибут crossorigin

Атрибут crossorigin является частью технологии CORS и применяется при загрузке таблицы стилей или иконки со стороннего сайта.

CORS (Cross-origin resource sharing, совместное использование ресурсов между разными источниками) — это механизм, который позволяет веб-страницам делать запросы к ресурсам с другого домена.

По умолчанию браузеры блокируют запросы к таким ресурсам из соображений безопасности, это называется «политика одного источника». CORS позволяет серверу разрешить запросы с разных доменов путём отправки специальных HTTP-заголовков «Access-Control-Allow-Origin». К примеру, если на сервере разрешён доступ с любого стороннего ресурса, то сервер вернёт следующий заголовок:

Access-Control-Allow-Origin: *

Браузер автоматически добавляет заголовок «Origin» в запрос, указывая источник запроса. Если сервер отправляет заголовок «Access-Control-Allow-Origin» со значением, совпадающим с «Origin» (или с маской «*», как показано выше), запрос разрешается.

Origin: webref.ru

Синтаксис

<link href="<адрес>" crossorigin="anonymous | use-credentials">

Значения

anonymous: Запрос к серверу отправляется без учётной записи пользователя (не передаются куки браузера, сертификат X.509, логин и пароль).
use-credentials: Запрос включает все учётные данные пользователя (куки браузера, сертификат X.509, логин, пароль и запрос на авторизацию).

Пустое или некорректно значение считается как anonymous.

Пример

Код примера скопирован в буфер

<!DOCTYPE html>
<html lang="ru">
 <head>
  <title>link</title>
  <meta charset="utf-8">
  <link href="https://htmlbook.ru/example/style/header.css"
   rel="stylesheet" crossorigin="anonymous">
 </head>
 <body>
  <h2>Заголовок</h2>
 </body>
</html>

В данном примере если загрузка со стороннего ресурса не блокируется политикой CORS, то цвет заголовка станет красным. В противном случае цвет останется исходным.

Браузеры


11	12	13	15	6	8


4.4	8	14	6