Разница между location.host и location.hostname в JS

Быстрый ответ

Воспользуйтесь location.hostname для получения имени домена без порта и location.host, если у вас есть необходимость учесть порт. Оба варианта работают во всех современных браузерах.

// Предположим, что у нас есть URL: http://flipflop.tiktak.com:5000/flappyskrittle.html
console.log(location.hostname); // "flipflop.tiktak.com" — получаем только домен.
console.log(location.host);     // "flipflop.tiktak.com:5000" — здесь домен выдаётся с указанием порта.

Когда стоит выбирать location.host или location.hostname

Ваш выбор между location.host и location.hostname будет определяться поставленной перед вами задачей. Если вам нужно проверить доменное имя на валидность или выполнить проверку безопасности, основывающуюся только на названии домена, то ваш выбор — location.hostname. Для задач, в которых необходимо учитывать порт (в некоторых сетевых приложениях), лучше использовать location.host.

При попытках обеспечить безопасность особенно важно корректно идентифицировать домены, чтобы не запутаться в фейковых сайтах. В таких случаях поможет использование регулярных выражений, например, /(^|\.)domain\.com$/.

Чтобы получить полную структуру URL, рекомендуется использовать window.location.origin, но при работе со старыми версиями Internet Explorer потребуется формировать URL вручную из составляющих: протокола, имени хоста и порта.

Визуализация

Рассмотрим разницу между location.host и location.hostname на примере ASCII-картинки:

**Полный адрес (📫):** 
Адрес: 1234.helloworld.com:3000

location.host = Почтовое отделение верхнего уровня 📫

📫: 1234.helloworld.com:3000
# location.host включает в себя имя ДОМЕНА и ПОРТ, это как адрес с ящиком для корреспонденции.

location.hostname = Почтовое отделение на уровне улицы 📭

📭 : 1234.helloworld.com
# location.hostname отвечает только за ДОМЕН, оставляя ПОРТ в стороне.

Совместимость со старыми и новыми версиями браузеров

Чтобы ваше приложение работало во всех уголках интернета, важно обеспечить его совместимость с разными браузерами. К счастью для разработчиков, как location.host, так и location.hostname проверены временем: они доступны начиная с Internet Explorer 6 и отлично функционируют в новых версиях браузеров.

Не забывайте, что URL могут иногда вести себя неожиданным образом из-за работы прокси-серверов и других сетевых особенностей. В таких ситуациях потребуются дополнительные проверки.

Безопасность — превыше всего

Будьте внимательны к попыткам фишинга и сайтам с похожими названиями. Обезопасьте свое приложение с помощью тщательной валидации адресов.

window.location.origin может не поддерживаться в IE10 и более ранних версиях. В таких случаях данные URL необходимо формировать вручную, используя window.location.protocol, window.location.hostname и window.location.port.

Запомните: безопасность — это всегда результат основательного подхода и труда, где нет места небрежности. Проверки URL на клиентской стороне важны, но они не могут заменить серверную валидацию.

Полезные материалы

1. Location – Web APIs | MDN — надежный источник информации о Location API.
2. Window Location Object — понятное описание объекта window.location с примерами.
3. javascript – Detecting a mobile browser – Stack Overflow — практические примеры использования location.host и location.hostname.
4. Can I use... Support tables for HTML5, CSS3, etc — инструмент для определения кроссбраузерной совместимости.
5. Using the HTML5 History API | CSS-Tricks — руководство по работе с History API в HTML5.
6. URL Standard — подробное описание стандартов URL.
7. RFC 6454 – The Web Origin Concept — документ, обосновывающий концепцию происхождения веб-страниц (web origins).