JS властивість Document.domain

Загальний опис

Властивість domain в об'єкті Document відіграє важливу роль у контексті безпеки та взаємодії між документами на веб-сторінках. Вона дозволяє отримати або встановити домен поточного документа, що є особливо корисним у сценаріях, коли потрібно здійснити міждоменні запити або взаємодіяти з іфреймами чи скриптами, що завантажуються з інших доменів. Управління доменом документа важливо для обходу політики однакового походження (same-origin policy), яка обмежує, як документи з різних доменів можуть взаємодіяти між собою, забезпечуючи таким чином безпеку веб-додатків.

На початковому рівні, domain можна використовувати для отримання доменного імені поточного документа. Це може бути корисно для логування, аудиту безпеки або умовної логіки в коді, яка залежить від домену, на якому виконується документ:

console.log(document.domain);

Цей код просто виводить домен поточної веб-сторінки в консоль.

На більш складному рівні, змінюючи властивість domain, розробники можуть дозволити сторінкам, що належать до одного домену але різних піддоменів, взаємодіяти між собою. Наприклад, якщо існує скрипт на піддомені sub.example.com, який потребує доступу до документа на another.sub.example.com, обидва документи можуть встановити свою властивість domain на example.com для обходу політики однакового походження:

document.domain = "example.com";

Таке встановлення сприяє спільному доступу до ресурсів між піддоменами, дозволяючи реалізувати більш інтегровані веб-додатки без порушення правил безпеки.

Обмеження та міркування безпеки

Під час роботи з document.domain важливо розуміти обмеження та міркування безпеки. Властивість може бути змінена лише на домен верхнього рівня (TLD) поточного домену або на більш загальний домен, але не на домен, що є більш специфічним. Також, після зміни domain, ви не зможете відновити його оригінальне значення, що може вплинути на подальшу взаємодію між документами.

Змінюючи document.domain, розробники повинні бути обережними, щоб не створити уразливості для атак типу "міжсайтовий скриптинг" (XSS), дозволяючи скриптам з менш довірених доменів доступ до даних чи функціоналу. Тому перед зміною цієї властивості слід ретельно оцінити потенційні ризики та переконатися, що такі дії відповідають політиці безпеки веб-додатку.

Порада:	Перед встановленням `document.domain` уважно перевіряйте, що нове значення відповідає основному домену поточного документа, оскільки неправильне використання може призвести до проблем з безпекою або доступністю ресурсів. Зміна `document.domain` на значення, яке не відповідає верхньому рівню домену, може відключити доступ до інших фреймів або ресурсів на сторінці.
Порада:	У сценаріях, де потрібно взаємодіяти з іншими фреймами або вікнами в межах того ж домену, встановлення `document.domain` до спільного основного домену дозволяє обходити обмеження політики одного джерела (same-origin policy), спрощуючи доступ до DOM елементів цих фреймів.
Порада:	Пам’ятайте, що зміна `document.domain` може вплинути на куки, локальне сховище та інші механізми зберігання, асоційовані з доменом. Тому перед виконанням таких змін важливо врахувати потенційний вплив на автентифікацію користувача, збереження стану сесії та інші функціональні аспекти веб-додатка, що залежать від цих технологій.

Синтаксис

Document.domain

Значення

Return

Переглядачі

Переглядач
	1	1	1	12.1	12

Переглядач
	4.4	18	4	1

Переглядач
	-	-

Приклади

У цьому прикладі користувачі можуть побачити поточний домен сторінки та спробувати змінити його на інший, вводячи нове значення у текстове поле та натискаючи кнопку "Змінити домен". Хоча реальна зміна домену обмежена з міркувань безпеки та не буде демонструватися на платформі CodePen, цей приклад допомагає зрозуміти, як можна працювати з властивістю document.domain у JavaScript.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/YzgMzVp">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі, перед виконанням AJAX запиту до API, яке знаходиться на піддомені api.subdomain.maindomain.com, скрипт спочатку змінює document.domain на відповідний піддомен. Це дозволяє обійти політику одного походження (Same-Origin Policy) і успішно виконати запит.

// Перевірка поточного домену і зміна його для дозволу AJAX запитів на піддомен
if (document.domain === "maindomain.com") {
  document.domain = "api.subdomain.maindomain.com";
}

// Виконання AJAX запиту до API, розташованого на піддомені
fetch("https://api.subdomain.maindomain.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Помилка при запиті:', error));

Цей приклад демонструє, як можна встановити document.domain на основний домен для дозволу спільного доступу до cookies між піддоменами. Такий підхід дозволяє реалізувати спільну аутентифікацію користувачів або зберігання загального стану сесії для кількох частин одного веб-додатку.

// Встановлення document.domain для дозволу спільного використання cookies між піддоменами
document.domain = "maindomain.com";

// Припустимо, що цей код виконується на піддомені service.maindomain.com
// Встановлення cookie, яке буде доступне на інших піддоменах maindomain.com
document.cookie = "sharedCookie=123;domain=.maindomain.com;path=/";

// Тепер cookie "sharedCookie" буде доступне на всіх піддоменах maindomain.com

JS довідник

JavaScript

Наповнення JS розділу