Что такое политика одинакового источника (Same Origin Policy) и какие ограничения она накладывает на фронтенд?

1️⃣ Как кратко ответить

Политика одинакового источника (Same Origin Policy) — это механизм безопасности в веб-браузерах, который ограничивает взаимодействие между документами и скриптами, загруженными с разных источников. Она предотвращает доступ к DOM и данным, если протокол, домен и порт не совпадают, защищая от атак типа XSS и CSRF.

2️⃣ Подробное объяснение темы

Политика одинакового источника (Same Origin Policy, SOP) — это фундаментальный механизм безопасности, используемый веб-браузерами для защиты данных пользователя. Она ограничивает взаимодействие между ресурсами, загруженными с разных источников, чтобы предотвратить потенциально вредоносные действия.

Что такое "одинаковый источник"?

Источник определяется тремя компонентами:

• Протокол (например, http или https)
• Домен (например, example.com)
• Порт (например, 80, 443)

Два URL считаются одинаковыми, если все три компонента совпадают. Например, http://example.com:80/page1 и http://example.com:80/page2 имеют одинаковый источник, но http://example.com:80/page1 и https://example.com:443/page1 — нет, из-за различий в протоколе и порте.

Ограничения, накладываемые SOP:

1. Доступ к DOM: Скрипты с одного источника не могут взаимодействовать с DOM документами, загруженными с другого источника. Это предотвращает возможность изменения или кражи данных.

2. Чтение данных: Скрипты не могут читать данные, такие как cookies, localStorage или sessionStorage, если они принадлежат другому источнику.

3. AJAX-запросы: XMLHttpRequest и Fetch API не могут быть использованы для получения данных с другого источника без специальных разрешений (например, CORS).

Пример ограничения:

// Предположим, что этот скрипт загружен с http://example.com
fetch('http://anotherdomain.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Ошибка:', error));

• В этом примере скрипт пытается выполнить запрос к http://anotherdomain.com. Без разрешений CORS браузер заблокирует этот запрос, так как источники различаются.

Зачем это нужно?

SOP защищает пользователей от атак, таких как:

• XSS (Cross-Site Scripting): Злоумышленник может внедрить скрипт, который попытается украсть данные с другого источника.
• CSRF (Cross-Site Request Forgery): Злоумышленник может попытаться заставить браузер пользователя выполнить нежелательные действия на другом сайте.

Как обойти ограничения?

Для легитимного обмена данными между разными источниками используется механизм CORS (Cross-Origin Resource Sharing). Сервер может настроить заголовки, чтобы разрешить доступ к своим ресурсам из других источников.

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

На сервере можно добавить заголовок:

Access-Control-Allow-Origin: http://example.com

• Этот заголовок разрешает http://example.com доступ к ресурсам сервера, тем самым обходя ограничения SOP.

Политика одинакового источника — это важный механизм, который помогает защитить данные пользователей и обеспечивает безопасность веб-приложений.