JS властивість Location.origin

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

Властивість origin в об'єкті Location в JavaScript є важливою для розуміння і використання при розробці веб-додатків. Вона повертає початковий URI (Uniform Resource Identifier) поточного документа, який складається з протоколу, імені хоста та порту. Ця властивість важлива для визначення походження документа, що особливо корисно в контексті безпеки, наприклад, при роботі з CORS (Cross-Origin Resource Sharing) або для перевірки дозволів при взаємодії між доменами.

origin є тільки для читання і повертає строку, що вказує на походження документа. Наприклад, для URL https://www.example.com:443/path/file.html, origin поверне https://www.example.com.

Приклади використання:

Визначення походження документа: Основне застосування origin полягає у визначенні походження поточного документа:
```
 let currentOrigin = window.location.origin;
 console.log(currentOrigin);
```
Цей код виведе на консоль початковий URI поточної веб-сторінки.
Перевірка походження при обробці запитів: При роботі з AJAX-запитами або при інтеграції з іншими API, origin може використовуватися для перевірки, чи запит прийшов з дозволеного джерела:
```
 if (window.location.origin === 'https://www.trusted-source.com') {
	 // Обробка запиту від довіреного джерела
 }
```
Цей підхід допомагає запобігти потенційно шкідливим взаємодіям із недовіреними джерелами.
Використання в безпеці веб-додатків: origin є ключовим у реалізації політик безпеки, таких як CORS, де необхідно забезпечити, що запити до ресурсів здійснюються з безпечних джерел:
```
 fetch('https://api.example.com/data', {
	 method: 'GET',
	 mode: 'cors',
	 headers: {
			 'Origin': window.location.origin
	 }
 })
 .then(response => response.json())
 .then(data => console.log(data));
```
Тут origin використовується для включення правильного заголовка в запит до сервера.

У підсумку, location.origin є важливим інструментом для розробників веб-додатків, що дозволяє безпечно визначати та використовувати походження документа. Використання цієї властивості є ключовим для забезпечення безпеки і правильної функціональності сучасних веб-додатків.

Порада:	Використовуйте `location.origin` для перевірки походження веб-сторінки, особливо коли працюєте з перехресними запитами або інтеграцією з іншими веб-сервісами. Це дозволить забезпечити, що запити відправляються або обробляються тільки з довірених джерел, підвищуючи безпеку вашого додатку.
Порада:	При створенні абсолютних URL-адрес для AJAX-запитів або при встановленні посилань, використовуйте `location.origin` як базову частину URL. Це гарантує, що ваші посилання та запити завжди відносяться до поточного домену, що особливо важливо при роботі з різними середовищами, такими як розробка, тестування та продакшн.
Порада:	Будьте обережні, коли використовуєте `location.origin` у контексті безпеки, оскільки зловмисники можуть маніпулювати походженням через атаки типу "man-in-the-middle". Тому, перед використанням цього значення для важливих перевірок безпеки, переконайтеся, що використовуєте додаткові заходи, такі як HTTPS.
Порада:	Для розробників, які працюють з iframes або вбудованими ресурсами, `location.origin` може бути корисним для перевірки, чи iframe або ресурс належить тому ж походженню, що й батьківська сторінка. Це допомагає уникнути проблем з безпекою і забезпечує коректну інтеграцію контенту.

Синтаксис

location.origin

Значення

Return

Переглядачі

Переглядач
	8	21	5.1	15	12

Переглядач
	3	18	21	5

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

Приклади

У цьому прикладі, ми створили кнопку "Показати Origin", яка дозволяє користувачеві взаємодіяти з веб-сторінкою. Натискання на цю кнопку активує обробник подій, який використовує window.location.origin для отримання оригіналу поточної сторінки та відображає його у параграфі з ідентифікатором "originInfo". Цей приклад показує, як використовувати властивість origin для отримання базової інформації про домен і протокол поточної веб-сторінки.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/eYXyXNY">
  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>.

У цьому більш складному прикладі ми використовуємо location.origin для валідації оригіналу при виконанні AJAX запитів. Це особливо корисно при розробці безпечних веб-застосунків, де важливо переконатися, що запити відправляються та приймаються з довірених джерел.

// Функція для відправлення AJAX запиту
function sendAjaxRequest(url) {
    // Перевірка, чи URL запиту відповідає оригіналу поточної сторінки
    if (new URL(url).origin === window.location.origin) {
        // Виконання AJAX запиту
        fetch(url)
            .then(response => response.json())
            .then(data => console.log(data))
            .catch(error => console.error('Помилка:', error));
    } else {
        console.error('Запит відхилений: невідповідний оригінал');
    }
}

// Приклад виклику функції
sendAjaxRequest('https://www.example.com/data');

У цьому прикладі ми демонструємо базове використання властивості location.origin для отримання оригіналу (походження) поточної веб-сторінки. Це може бути корисним для визначення основного домену та протоколу, на яких знаходиться сторінка, що важливо для розробки безпечних веб-застосунків.

// Отримання оригіналу поточної веб-сторінки
let currentOrigin = window.location.origin;
console.log(currentOrigin);

JS довідник

JavaScript

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