Атрибут crossorigin тега <link>
Описание
Атрибут crossorigin для тега <link> указывает, должен ли запрос ресурса использовать CORS (Cross-Origin Resource Sharing). Особенно важен для загрузки шрифтов и других ресурсов с разных доменов.
<!-- Загрузка шрифта с другого домена -->
<link rel="stylesheet" href="https://fonts.example.com/font.css" crossorigin>
<!-- Предзагрузка шрифта -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
Допустимые значения:
| Значение | Описание | Когда использовать |
|---|---|---|
anonymous |
Запрос без учетных данных | Для общедоступных ресурсов |
use-credentials |
Запрос с учетными данными | Для защищенных ресурсов |
| Пустая строка | Эквивалентно anonymous |
Стандартное использование |
Особенности работы:
- Обязателен для шрифтов - без него браузер может блокировать загрузку
- Влияет на заголовки HTTP-запроса:
- Добавляет
Origin - Контролирует отправку cookies
- Добавляет
- Для
rel="preload"требуется правильное сочетание сas
Пример с разными ресурсами:
<!-- Шрифты -->
<link rel="preload" href="https://cdn.example.com/font.woff2" as="font" crossorigin>
<!-- Стили -->
<link rel="stylesheet" href="https://cdn.example.com/styles.css" crossorigin>
<!-- Скрипты -->
<link rel="preload" href="https://api.example.com/data.js" as="script" crossorigin>
Ошибки и проверка:
<!-- Неправильно: отсутствует crossorigin для шрифта -->
<link rel="preload" href="font.woff2" as="font">
<!-- Неправильно: несоответствующий тип -->
<link rel="preload" href="image.png" as="font" crossorigin>
<!-- Правильно -->
<link rel="preload" href="font.woff2" as="font" crossorigin>
Рекомендации по использованию:
- Всегда используйте для веб-шрифтов, даже с того же домена
- Для CDN-ресурсов указывайте явно
- Проверяйте CORS-заголовки на сервере (
Access-Control-Allow-Origin) - Для отладки проверяйте консоль браузера на ошибки CORS
Совместимость и производительность:
- Поддерживается всеми современными браузерами
- Правильное использование предотвращает блокировку ресурсов
- Уменьшает количество ошибок загрузки
- Особенно важен для PWA и оффлайн-приложений
Примечание: Атрибут crossorigin критически важен для современных веб-приложений, использующих ресурсы с разных доменов. Для сложных сценариев CORS может потребоваться дополнительная настройка сервера.