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.

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

1. Визначення походження документа: Основне застосування origin полягає у визначенні походження поточного документа:

    let currentOrigin = window.location.origin;
    console.log(currentOrigin);
   

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

2. Перевірка походження при обробці запитів: При роботі з AJAX-запитами або при інтеграції з іншими API, origin може використовуватися для перевірки, чи запит прийшов з дозволеного джерела:

    if (window.location.origin === 'https://www.trusted-source.com') {
   	 // Обробка запиту від довіреного джерела
    }
   

   Цей підхід допомагає запобігти потенційно шкідливим взаємодіям із недовіреними джерелами.

3. Використання в безпеці веб-додатків: 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 для перевірки походження веб-сторінки, особливо коли працюєте з перехресними запитами або інтеграцією з іншими веб-сервісами. Це дозволить забезпечити, що запити відправляються або обробляються тільки з довірених джерел, підвищуючи безпеку вашого додатку.

автор: Bond правити

Порада

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

автор: Bond правити

Порада

Будьте обережні, коли використовуєте location.origin у контексті безпеки, оскільки зловмисники можуть маніпулювати походженням через атаки типу "man-in-the-middle". Тому, перед використанням цього значення для важливих перевірок безпеки, переконайтеся, що використовуєте додаткові заходи, такі як HTTPS.

автор: Bond правити

Порада

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

location.origin

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

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

Підтримка: мобільні переглядачі

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

Підтримка: серверні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

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

// Функція для відправлення 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');