Same-Origin Policy (SOP) — фундаментальная модель безопасности веб-платформы, ограничивающая взаимодействие между ресурсами, загруженными из разных источников. Политика определяет правила доступа скриптов к данным и объектам браузера, если они принадлежат различным доменам.
Источником (origin) считается комбинация трёх компонентов:
http,
httpsЕсли хотя бы один из этих компонентов отличается, браузер рассматривает ресурсы как находящиеся в разных источниках.
Примеры:
| URL | Origin |
|---|---|
https://example.com |
https, example.com, 443 |
http://example.com |
http, example.com, 80 |
https://example.com:8080 |
https, example.com, 8080 |
https://api.example.com |
https, api.example.com,
443 |
Следовательно:
https://example.com и
https://example.com/page — один
originhttps://example.com и http://example.com —
разные originhttps://example.com и
https://api.example.com — разные
originПолитика применяется браузером автоматически и предотвращает множество типов атак, включая кражу пользовательских данных и выполнение вредоносных скриптов.
Веб-страницы могут содержать сторонние скрипты, рекламные виджеты, фреймы и внешние ресурсы. Без ограничений такие элементы получили бы возможность свободно читать и изменять данные других сайтов.
Типичный сценарий угрозы:
Same-Origin Policy блокирует подобный доступ. Скрипты вредоносной страницы не могут получить доступ к:
Политика применяется к нескольким важным механизмам браузера.
JavaScript-код может свободно взаимодействовать только с документами того же origin.
Пример ограничения:
const iframe = document.querySelector("iframe");
console.log(iframe.contentWindow.document);Если iframe загружает страницу с другого домена, браузер
выбрасывает исключение:
Blocked a frame with origin from accessing a cross-origin frameЭто предотвращает манипуляции с чужими документами.
Запросы к API также контролируются Same-Origin Policy.
fetch("https://api.other-site.com/data")Без дополнительных разрешений браузер блокирует доступ к ответу, даже если запрос был отправлен.
Запрос может выполниться, но JavaScript не сможет прочитать результат.
SOP изолирует пользовательские данные:
localStoragesessionStorageКаждый origin имеет собственное пространство хранения.
localStorage.setItem("token", "123");Скрипт другого сайта не сможет получить этот токен.
Некоторые ресурсы разрешено загружать между доменами без ограничений, однако доступ к их содержимому ограничен.
Разрешённые загрузки:
img)link)script)Пример:
<img src="https://cdn.example.com/image.png">Изображение будет отображаться, однако JavaScript страницы не получит доступ к пикселям изображения без дополнительных разрешений.
Canvas предоставляет доступ к пикселям изображений. Поэтому действует дополнительное правило безопасности.
Если изображение загружено с другого origin без разрешения CORS, Canvas становится tainted (загрязнённым).
Пример:
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const img = new Image();
img.src = "https://external-site.com/image.png";
img.onl oad = () => {
ctx.drawImage(img, 0, 0);
canvas.toDataURL();
};Попытка получить данные приведёт к ошибке:
SecurityError: Tainted canvases may not be exportedДля легального взаимодействия между доменами используется механизм CORS (Cross-Origin Resource Sharing).
Сервер может явно разрешить доступ, отправив специальные HTTP-заголовки.
Пример ответа сервера:
Access-Control-Allow-Origin: https://example.comПосле этого браузер позволит странице example.com читать
ответ.
Fetch-запрос:
fetch("https://api.service.com/data")
.then(response => response.json())
.then(data => console.log(data));Если сервер правильно настроен, запрос будет успешно обработан.
Некоторые cross-origin операции считаются потенциально опасными. Перед их выполнением браузер отправляет предварительный запрос (preflight).
Используется метод OPTIONS.
Пример:
OPTIONS /data HTTP/1.1
Origin: https://example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-TypeСервер отвечает:
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Content-TypeТолько после успешного ответа основной запрос будет выполнен.
Несмотря на строгие ограничения, браузеры поддерживают механизмы безопасного взаимодействия между origin.
Основные методы:
Позволяет безопасно передавать данные между окнами и iframe.
iframe.contentWindow.postMessage(
{ type: "DATA", value: 42 },
"https://example.com"
);Получение сообщения:
window.addEventListener("message", (event) => {
if (event.origin !== "https://example.com") return;
console.log(event.data);
});Проверка origin обязательна для предотвращения атак.
Исторический механизм, позволяющий объединять субдомены.
document.domain = "example.com";Тогда страницы:
app.example.comadmin.example.comмогут взаимодействовать друг с другом.
Этот подход считается устаревшим и постепенно выводится из использования.
До появления CORS применялся обходной механизм через тег
script.
<script src="https://api.example.com/data?callback=handleData"></script>Ответ сервера:
handleData({ value: 123 });Поскольку скрипты могут загружаться из любого источника, данные передавались через выполнение функции.
Метод имеет серьёзные ограничения и практически не используется в современных системах.
При использовании axe-core политика Same-Origin влияет на анализ содержимого страниц.
Библиотека работает внутри DOM текущего документа и не имеет доступа к содержимому:
Пример:
axe.run(document);Если страница содержит внешний iframe:
<iframe src="https://external-site.com/widget"></iframe>axe-core сможет проверить:
titleно не сможет анализировать DOM внутри него, поскольку браузер блокирует доступ.
При тестировании доступности необходимо учитывать изоляцию origin.
Сценарии:
axe-core может выполнить анализ содержимого.
const frame = document.querySelector("iframe");
axe.run(frame.contentDocument);DOM недоступен.
Единственное решение — запускать axe внутри самой страницы iframe.
Same-Origin Policy влияет на архитектуру инструментов проверки доступности:
Типичные ограничения:
Поэтому системы тестирования доступности часто используют:
Попытки обхода Same-Origin Policy считаются серьёзной уязвимостью. Современные браузеры дополнительно усиливают изоляцию:
Эти механизмы усиливают защиту от атак:
В результате взаимодействие между различными источниками становится строго контролируемым.
Same-Origin Policy влияет на проектирование систем:
При разработке инструментов анализа доступности, включая axe-core, необходимо учитывать:
Same-Origin Policy остаётся одним из ключевых механизмов безопасности веб-платформы, определяющим правила взаимодействия между ресурсами и скриптами различных источников.