Что такое перекрестная ссылка?

1.7 Middle🔥 131 комментариев

#JavaScript Core

Комментарии (1)

🐱

deepseek-v3.2PrepBro AI7 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Что такое перекрестная ссылка (Cross-Origin Reference) в веб-разработке?

Перекрестная ссылка — это общий термин, который в контексте Frontend-разработки и безопасности веб-приложений чаще всего относится к межсайтовым запросам или взаимодействию между разными источниками (origin). Если говорить точнее, обычно подразумевается ситуация, когда ресурс (скрипт, CSS, изображение, iframe) или запрос (XMLHttpRequest, Fetch) на веб-странице обращается к домену, протоколу или порту, отличным от тех, с которых была загружена сама страница. Это напрямую связано с Политикой единого источника (Same-Origin Policy, SOP) — ключевым механизмом безопасности браузеров.

Основные аспекты и примеры

Same-Origin Policy строго ограничивает возможность JavaScript-кода взаимодействовать с ресурсами, загруженными с другого источника (origin). Источник определяется комбинацией:

Протокола (например, http:// или https://)
Домена (например, site.com)
Порта (например, :8080)

// Пример: Страница загружена с https://myapp.com:443

// Перекрестная ссылка (Cross-Origin) - ДРУГОЙ домен:
fetch('https://api.external-service.com/data'); // Блокируется SOP по умолчанию

// Не перекрестная ссылка (Same-Origin) - тот же источник:
fetch('https://myapp.com:443/api/data'); // Разрешено

Проблемы безопасности и механизмы обхода (контролируемые)

Без SOP злонамеренный скрипт на одной вкладке мог бы украсть данные с другого сайта (например, с банковской страницы). Однако современным веб-приложениям необходимо легитимное межсайтовое взаимодействие — для загрузки шрифтов, вызовов API, встраивания виджетов. Для этого были разработаны контролируемые механизмы:

CORS (Cross-Origin Resource Sharing) — основной современный механизм. Сервер явно указывает, с каких источников разрешено чтение его ресурсов, с помощью специальных HTTP-заголовков.
```
// Ответ сервера api.external.com:
Access-Control-Allow-Origin: https://myapp.com
Access-Control-Allow-Methods: GET, POST
```
JSONP (JSON with Padding) — устаревший обход SOP, использующий тег <script> (на который SOP не распространяется), но небезопасный и с ограниченной функциональностью (только GET).
```
<script src="https://api.example.com/data?callback=handleResponse"></script>
```
```
function handleResponse(data) {
  console.log(data);
}
```
Проксирование на стороне сервера — когда backend вашего приложения выступает посредником, запрашивая внешние данные и отдавая их клиенту с одного origin.
Настройка document.domain — устаревший способ для поддоменов одного домена.

Почему это важно для Frontend Developer?

Разработка: При работе с микросервисной архитектурой, сторонними API или CDN вы постоянно сталкиваетесь с CORS. Непонимание приводит к ошибкам типа "No 'Access-Control-Allow-Origin' header is present".
Безопасность: Вы должны осознавать риски, связанные с некорректной настройкой CORS (например, Access-Control-Allow-Origin: * для приватных данных) или использованием опасных практик вроде eval() для обработки внешних данных.
Производительность: Запросы, требующие предварительной проверки CORS (preflight), выполняются дольше из-за дополнительного запроса OPTIONS.

Практический пример настройки CORS

Представим, что фронтенд на https://frontend.com хочет отправить POST-запрос с JSON на https://api.backend.com.

Без CORS запрос будет заблокирован браузером.

С CORS сервер api.backend.com должен ответить с заголовками:

Access-Control-Allow-Origin: https://frontend.com
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Credentials: true // Если используются куки/авторизация

А код на фронтенде будет выглядеть так:

// Явное указание необходимости отправки учетных данных (если нужно)
fetch('https://api.backend.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ key: 'value' }),
  credentials: 'include' // Отправляем куки, если сервер разрешил
})
.then(response => response.json())
.then(data => console.log(data));

Итог: Понимание концепции перекрестных ссылок, SOP и CORS критически важно для создания современных, безопасных и функциональных веб-приложений, взаимодействующих с множеством внешних сервисов. Это не просто теория, а ежедневная практика, влияющая на архитектуру решений, отладку и финальную безопасность продукта.