Comment vérifier avec javascript si la connexion est un hôte local?


100

Je veux vérifier dans mon javascript si la page de chargement est sur ma machine locale.

La raison pour laquelle je veux faire cela est que lorsque je développe, j'aime m'assurer que la validation côté serveur (C #) fonctionne correctement. Donc j'aime voir apparaître les erreurs côté client et côté serveur.

Ainsi, pendant que je teste, j'ai un indicateur dans mon jquery validate truc qui laisse toujours passer les données invalides. De cette façon, je vois les erreurs côté client et serveur d'un seul coup.

Cependant, pour le moment, je dois manuellement faire des allers-retours entre le développement et la production.


3
Je conseillerais simplement à quiconque utilisant l'une de ces méthodes dans l'une de ces réponses d '"ajouter" une fonctionnalité au système, en particulier si cette fonctionnalité pourrait être utilisée pour exposer des informations ou des données autrement sécurisées dans votre système. L'utilisation de cette technique pour «supprimer» des fonctionnalités a cependant du sens. Par exemple, si vous souhaitez supprimer le suivi des analyses de déclenchement dans votre environnement de développement, même si vous le faites dans votre environnement de production. Réfléchissez bien à ce que vous exposez via une fonction conditionnelle ou à bascule côté navigateur et comment cela pourrait devenir une vulnérabilité de sécurité.
Javid Jamae

Réponses:


208

La location.hostnamevariable vous donne l'hôte actuel. Cela devrait vous suffire pour déterminer dans quel environnement vous vous trouvez.

if (location.hostname === "localhost" || location.hostname === "127.0.0.1")
    alert("It's a local server!");

14
N'existe-t-il pas une solution plus générale / «fourre-tout» qui couvrirait également les cas d'utilisation de 127.0.0.1, etc.?
jacobq

8
C'est tout simplement faux. beaucoup de gens modifient leur fichier hôte afin que le mot «localhost» ne soit pas trouvé
vsync

4
je suis d'accord. C'est faux. Ne fonctionnera pas non plus lors de l'accès à un fichier «local» via un lecteur réseau.
ProblemsOfSumit

1
@Sumit via l'interface de fichier, vous pouvez vérifier que le nom d'hôte est vide
chacham15

1
Euh, je ne sais pas pourquoi tout le monde dit que c'est faux. Ce simple découpé fonctionne parfaitement pour moi sur l'hôte local et la production. Mon logiciel connaît la météo pour diffuser des publicités - ou non, avec une simple ligne de code. Merci OP.
Andy

30

si le lancement de HTML statique dans le navigateur, par exemple depuis un emplacement comme la file:///C:/Documents and Settings/Administrator/Desktop/détection de "localhost" ne fonctionnera pas. location.hostnamerenverra une chaîne vide. alors

if (location.hostname === "localhost" || location.hostname === "127.0.0.1" || location.hostname === "")
    alert("It's a local server!");

Je suis tombé sur ce problème exact et même si j'ai trouvé la solution moi-même, cette réponse devrait encore être plus élevée.
domsson

6

Ce n'est toujours pas un fourre-tout, mais cela pourrait être une petite amélioration. Vous pouvez maintenant créer un tableau de domaines et utiliser .includes

const LOCAL_DOMAINS = ["localhost", "127.0.0.1", ...];

if (LOCAL_DOMAINS.includes(window.location.hostname))
  alert("It's a local server!");

3

C'est ainsi qu'il est vérifié dans React, enregistrez le service worker , un bon moyen de vérifier si vous êtes sur localhost en vérifiant le nom d'hôte, y compris localhost et IPv6 , et la correspondance commence par 127 :

const isLocalhost = Boolean(
    window.location.hostname === 'localhost' ||
    // [::1] is the IPv6 localhost address.
    window.location.hostname === '[::1]' ||
    // 127.0.0.1/8 is considered localhost for IPv4.
    window.location.hostname.match(
        /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
    )
);

2

Un moyen simple de le faire serait de simplement vérifier le nom d'hôte par rapport à localhost ou de vérifier votre nom de domaine personnalisé par rapport à une sous-chaîne, dans ce cas des URL ".local", telles que http: //testsite.local

var myUrlPattern = '.local';
if (window.location.hostname === "localhost" || location.hostname === "127.0.0.1" || window.location.hostname.indexOf(myUrlPattern) >= 0) {
    alert("It's a local server!");
}

2

Forme la plus courte utilisant le même mécanisme que les autres scripts:

if ( ["localhost", "127.0.0.1", ""].includes(window.location.hostname) ) {
     console.log("It's local host !");
}

2

Celui-ci couvre également certains cas courants où les adresses IP du réseau local commencent par 10.0.ou 192.168.ou Bonjour comme le domaine se terminant par .local:

export function isLocalNetwork(hostname = window.location.hostname) {
  return (
    (['localhost', '127.0.0.1', '', '::1'].includes(hostname))
    || (hostname.startsWith('192.168.'))
    || (hostname.startsWith('10.0.'))
    || (hostname.endsWith('.local'))
  )
}

1

Vous pouvez détecter dans l'un de vos codes derrière les pages avec c #, comme ceci:

if ((Request.Url.Host.ToLower() == "localhost"))
{
    // ..., maybe set an asp:Literal value that's in the js
}

Ou si vous souhaitez le faire à partir du script client, vous pouvez vérifier la valeur de window.location.host.

if (window.location.host == "localhost")
{
    // Do whatever
}

J'espère que cela t'aides.


3
location.host inclut le nom d'hôte ET le port. Utilisez plutôt location.hostname.
pmont

1
const LOCAL_DOMAINS = [ "localhost", "127.0.0.1" ];

/* offline || development */
if ( LOCAL_DOMAINS.includes(location.hostname) )
{
    BASE_URL_PUBLIC = location.hostname + "/folder/website/"; // your project folder
}

/* online || production */
else
{
    BASE_URL_PUBLIC = location.hostname;
}

0

Les réponses ci-dessus résolvent principalement le problème, mais ...

  • Et si localhost n'est pas nécessairement «localhost /»?
  • Que faire si vous souhaitez effectuer une validation FE pendant le développement?
  • Que faire si vous voulez des comportements différents pendant le développement
    ( fe validation, be validation, pas de validation )

Une solution consiste à définir le hachage de l'emplacement et à le vérifier.

http://myname.foo.com/form.html#devValidation

Vous pouvez ajouter des options illimitées avec un commutateur

switch(location.hash) {}
    case '#devValidation':
        // log the results and post the form
        break;
    case '#beValidation':
        // skip front end validation entirely
        break;
    case '#noValidation':
        // skip all validation $('[name=validationType']).val('novalidation');
        break;
    case '#feValidation':
    default:
        // do fe validation
        break;
}

Cette solution a encore du travail manuel et peut être altérée.
A1rPun

Je pense que le "travail manuel" est insignifiant, falsification également puisque nous pouvons soumettre ce que nous voulons sans l'approbation de javascript et la plupart des frameworks ont des filtres qui atténuent les attaques avant que la demande n'atteigne l'application. Peut-être que permettre à l'OP de sauter la validation côté serveur est un risque, mais cela n'a été ajouté que pour montrer l'utilité d'utiliser une clé dans le hachage.
Shanimal

Je n'utilise jamais localhost ou le loopback car la mise en liste blanche de dizaines de clients internationalisés (clinetA.com, clientA.de, clientB.com, clientB.au, etc ...) deviendrait rapidement un cauchemar. J'ai décidé de proposer cette solution car elle ne se soucie pas du domaine et peut être vérifiée sur un site en direct sans patch.
Shanimal

0

L'expression régulière est plus lente *, mais courte et nette. De plus, personne ici ne vérifie l'hôte local IPv6 (:: 1)

/localhost|127\.0\.0\.1|::1|\.local|^$/i.test(location.hostname)

Il vérifie l'hôte local général, le domaine .local et le fichier: (nom d'hôte vide).

*) Dans Chrome, les performances de [].includes(...)sont les meilleures (42 ms), suivies d'une boucle simple (for, while) avec vérification des éléments du tableau (119 ms), puis [].indexOf(...) > -1(289 ms) et enfin de l'expression rationnelle (566 ms). Mais ces mesures sont en quelque sorte relatives, car différents navigateurs sont optimisés différemment. Dans FF 52 ESR includeset indexOfont des résultats similaires, l'expression régulière est 2 fois plus lente et la boucle 6 fois plus lente.


0

Sur la base des commentaires ci-dessus, l'expression régulière suivante m'a aidé à vérifier si l'url est 'localhost', une adresse IP IPv4 ou IPv6.

window.location.hostname.match(/localhost|[0-9]{2,3}\.[0-9]{2,3}\.[0-9]{2,3}\.[0-9]{2,3}|::1|\.local|^$/gi)
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.