Коротка відповідь
middleSame-origin policy — це механізм безпеки, який обмежує доступ скриптів до ресурсів лише того домену, з якого вони були завантажені. Він застосовується до DOM‑об’єктів, XHR/fetch запитів, WebSocket, IndexedDB, localStorage та інших браузерних API. При спробі доступу до ресурсів іншого origin браузер блокує запит і генерує помилку "Same-origin policy violation".
Повне пояснення
Що це і навіщо
Same-origin policy (SOP) — ключовий захист веб‑програми, що запобігає виконанню скриптів з одного домену доступ до даних, що належать іншому. Це запобігає XSS‑атак і витоку конфіденційної інформації.
Ключові принципи
- Origin — комбінація протоколу, домену і порту. Якщо вони збігаються, доступ дозволений.
- Політика — «запретити» доступ, якщо origin не збігається.
Як це працює
При виконанні DOM‑операцій, HTTP‑запитів або доступу до сховищ браузер перевіряє origin ресурсу. Якщо він не співпадає з origin сторінки, браузер генерує помилку і блокує операцію.
Практика та реалізація
- DOM:
document.cookie,localStorage.getItem()– доступ обмежений до того origin, що відкрив сторінку. - XHR / fetch:
fetch('https://api.example.com')з іншого origin блокується, якщо не налаштовано CORS. - WebSocket:
new WebSocket('wss://socket.example.com')– перевірка origin на сервері. - IndexedDB:
indexedDB.open('db')створює базу, доступну лише з того origin.
Тестування
// Jest + jsdom
import { JSDOM } from 'jsdom';
const dom = new JSDOM(`<!DOCTYPE html><p>Hello</p>`, { url: 'https://a.com' });
expect(() => dom.window.localStorage.setItem('x', '1')).not.toThrow();
Безпека
SOP працює в парі з CORS, який дозволяє явно розширити доступ. Без налаштування CORS будь-який cross‑origin запит буде заблокований.
Підсумок
Same-origin policy — це фундаментальний захист, що поширюється на більшість браузерних API: DOM, XHR/fetch, WebSocket, IndexedDB, localStorage, sessionStorage і інші. Він гарантує, що скрипти не можуть читати чи писати дані з інших origin без явного дозволу.