Origin API
08.02.2026 • dom
Вступление
В кроссайтовом взаимодействии используются разные домены, поддомены, а то и вовсе чужие сайты (всевозможные виджеты, например). Браузеры во многих механизмах используют проверки origin, однако до сих пор возможности по работе с ним были сильно ограничены.
Можно вспомнить и location.origin, и window.origin, однако на практике это ASCII-представление origin. Например, если взять домен в зоне .рф, то в этих origin будет “заэнкоженная” версия домена, а не оригинальная.
В текущий момент проблема решается с помощью собственных проверок, однако на практике это может приводить к дырявым регэкспам, либо получить результат, отличный от логики браузера.
Для проверки origin без этих проблем в браузерах реализовали новое апи: Origin.
Origin API
Origin API позволяет создавать объекты Origin с помощью new или статического метода Origin.from:
const someOrigin = new Origin('https://something');
const anotherOrigin = Origin.from('https://another');Помимо строки, можно передать некоторые объекты из DOM API, например, contentWindow ифреймов:
const iframeOrigin = Origin.from(iframe.contentWindow);У Origin есть один геттер и два полезных метода. Метод isSameOrigin проверяет, является ли другой origin равным текущему, а метод isSameSite проверяет, равны ли сайты. В чём разница? В трактовании доменов и поддоменов, в том числе с использованием Public Suffix List.
const aSmth = Origin.from('https://a.smth.com');
const bSmth = Origin.from('https://b.smth.com');
aSmth.isSameOrigin(bSmth);
// false, хостнеймы разные
aSmth.isSameSite(bSmth);
// true, поддомены одного сайта
// НО!
const aGithub = Origin.from('https://a.github.io');
const bGithub = Origin.from('https://b.github.io');
aGithub.isSameOrigin(bGithub);
// false, хостнеймы разные
aGithub.isSameSite(bGithub);
// false, домен из Public Suffix ListГеттер opaque позволяет узнать, что браузер “скрывает” соответствующий origin. Это актуально для документов, созданных программно, протокола file:, а также некоторых случаев использования ифреймов с атрибутом sandbox. Непрозрачные (opaque) origin’ы нужны для изоляции и безопасности, и opaque origin никогда не равны никакому другому origin.
if (someOrigin.opaque) {
...
}Браузерная поддержка
На текущий момент поддержка есть в стабильном Хроме 145 и в нестабильном Safari Technology Preview. В Файерфоксе позитивно смотрят на новое апи и, вероятно, не потребуется много усилий для его реализации. Остаётся только ждать, что браузеры свежих версий доберутся до пользователей.
Итого
Origin API отлично решает вопросы безопасности, которые встают в сложных задачах по кроссдоменному взаимодействию сайтов. Это тот кирпичик, о необходимости которого редко задумываешься, но когда он появляется, остаётся только воскликнуть “Почему только сейчас?” и “Как мы без этого жили?“.
Не забывайте проверять источник данных, это всегда было актуально как для пользовательского ввода, так и для postMessage с ифреймами. Даже если у вас ровно одно событие и ровно один ифрейм – кто знает, что добавится на сайт завтра.
