Что такое Same-Origin Policy?

Same-Origin Policy (SOP) — это механизм безопасности, реализованный в веб-браузерах, который ограничивает взаимодействие между ресурсами, загруженными с разных источников. Это важно для защиты данных и предотвращения различных видов атак, таких как Cross-Site Scripting (XSS) и Cross-Site Request Forgery (CSRF).

Определение "Origin"

"Origin" в данном контексте включает в себя три компонента:

Только если все три компонента совпадают, источники считаются одинаковыми. Например:

• https://example.com и https://example.com — совпадают.
• https://example.com и http://example.com — не совпадают (разные протоколы).
• https://example.com:443 и https://example.com — совпадают (443 — это стандартный порт для HTTPS).
• https://example.com и https://example.com:3000 — не совпадают (разные порты).

Почему это важно?

House может загрузить контент только с того же источника, с которого он загружен, если не применяется специальное разрешение, например, CORS (Cross-Origin Resource Sharing). Это предотвращает сценарии, в которых malicious сайт мог бы извлечь информацию из другого сайта (например, ваши учетные данные или личные данные).

Примеры SOP

Пример 1: Успешный запрос с одинаковым источником

<script>
    fetch("https://example.com/api/data")
            .then(response => response.json())
            .then(data => console.log(data))
            .catch(error => console.error("Ошибка:", error));
</script>

Если скрипт загружается со страницы https://example.com, такой запрос пройдет успешно.

Пример 2: Затруднительный запрос с другого источника

<script>
    fetch("https://another-example.com/api/data")
            .then(response => response.json())
            .then(data => console.log(data))
            .catch(error => console.error("Ошибка:", error));
</script>

Если ваш скрипт находится на https://example.com, такой запрос будет заблокирован из-за нарушения SOP. Вы увидите ошибку в консоли.

Как обойти Same-Origin Policy?

Если вы, как разработчик, хотите разрешить доступ к ресурсам с других источников, вам нужно использовать CORS. Это позволяет серверу указать, какие источники могут успешно взаимодействовать с его ресурсами.

Пример CORS

На стороне сервера вы можете добавить заголовки, позволяющие доступ:

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST

Это позволит вашему фронтенду на https://example.com отправлять запросы к серверу, расположенному на другом источнике.

Заключение

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