A Diferença Entre location.host e location.hostname em JS
Resumo Rápido
Use location.hostname para obter o nome do domínio sem a porta e location.host se você precisar incluir a porta. Ambas as opções funcionam em todos os navegadores modernos.
// Suponha que temos uma URL: http://flipflop.tiktak.com:5000/flappyskrittle.html
console.log(location.hostname); // "flipflop.tiktak.com" — obtemos apenas o domínio.
console.log(location.host); // "flipflop.tiktak.com:5000" — aqui o domínio é retornado com a porta.Quando Escolher location.host ou location.hostname
Sua escolha entre location.host e location.hostname dependerá da tarefa específica que você está realizando. Se precisar validar um nome de domínio ou realizar uma verificação de segurança com base apenas no nome do domínio, então sua escolha deve ser location.hostname. Para tarefas que exigem levar em conta a porta (em algumas aplicações de rede), é melhor usar location.host.
Ao garantir a segurança, é particularmente importante identificar corretamente os domínios para evitar confusões com sites falsos. Nesses casos, o uso de expressões regulares pode ajudar, por exemplo, /(^|\\.)dominio\\.com$/.
Para obter a estrutura completa da URL, é aconselhável usar window.location.origin, mas ao trabalhar com versões mais antigas do Internet Explorer, você precisará montar manualmente a URL a partir de seus componentes: protocolo, hostname e porta.
Visualização
Vamos olhar a diferença entre location.host e location.hostname usando um diagrama ASCII:
**Endereço Completo (📫):**
Endereço: 1234.helloworld.com:3000location.host = Caixa de Correio de Nível Superior 📫
📫: 1234.helloworld.com:3000
# location.host inclui o NOME do DOMÍNIO e a PORTA, é como um endereço com uma caixa de correio para correspondências.location.hostname = Caixa de Correio de Nível de Rua 📭
📭 : 1234.helloworld.com
# location.hostname é responsável apenas pelo DOMÍNIO, deixando a PORTA de lado.Compatibilidade com Versões Antigas e Novas de Navegadores
Para garantir que sua aplicação funcione pela internet, é essencial torná-la compatível com diferentes navegadores. Felizmente para os desenvolvedores, tanto location.host quanto location.hostname resistiram ao teste do tempo: eles estão disponíveis desde o Internet Explorer 6 e funcionam perfeitamente nas versões mais novas dos navegadores.
Lembre-se de que as URLs podem às vezes se comportar de maneira inesperada devido a servidores proxy e outras peculiaridades de rede. Nesses casos, podem ser necessárias verificações adicionais.
Segurança - Acima de Tudo
Fique atento a tentativas de phishing e sites com nomes semelhantes. Proteja sua aplicação validando minuciosamente os endereços.
window.location.origin pode não ser suportado no IE10 e versões anteriores. Nesses casos, você precisará montar manualmente a URL usando window.location.protocol, window.location.hostname e window.location.port.
Lembre-se: a segurança é sempre o resultado de uma abordagem minuciosa e trabalho árduo, sem espaço para negligência. Verificações de URL no lado do cliente são importantes, mas não podem substituir a validação no lado do servidor.
Recursos Úteis
- Location - Web APIs | MDN — uma fonte confiável de informações sobre a API Location.
- Objeto Window Location — uma descrição clara do objeto
window.locationcom exemplos. - javascript - Detectando um navegador móvel - Stack Overflow — exemplos práticos de uso de
location.hostelocation.hostname. - Can I use... Tabelas de suporte para HTML5, CSS3, etc — uma ferramenta para determinar a compatibilidade entre navegadores.
- Usando a API de Histórico do HTML5 | CSS-Tricks — um guia para trabalhar com a API de Histórico no HTML5.
- Padrão URL — uma descrição detalhada dos padrões de URL.
- RFC 6454 - O Conceito de Origem da Web — um documento que justifica o conceito de origens da web.