¿Cómo verificar con javascript si la conexión es un host local?


101

Quiero tener una verificación en mi javascript si la página que se carga está en mi máquina local.

La razón por la que quiero hacer eso es que cuando desarrollo me gusta asegurarme de que tanto la validación del lado del servidor (C #) esté funcionando correctamente. Así que me gusta ver que aparecen los errores del lado del cliente y del lado del servidor.

Entonces, mientras estoy probando, tengo una bandera en mi jquery validate que siempre deja pasar datos no válidos. De esta manera veo los errores del lado del cliente y del servidor de una sola vez.

Sin embargo, ahora tengo que ir y cambiar manualmente de un lado a otro al pasar del desarrollo a la producción.


3
Solo advertiría a cualquiera que use cualquiera de estos métodos en cualquiera de estas respuestas que "agregue" funcionalidad al sistema, especialmente si dicha funcionalidad podría usarse para exponer información o datos seguros en su sistema. Sin embargo, el uso de esta técnica para "eliminar" la funcionalidad tiene sentido. Por ejemplo, si desea suprimir el seguimiento de análisis de activación en su entorno de desarrollo, aunque lo haga en su entorno de producción. Solo piense detenidamente sobre lo que está exponiendo a través de un condicional o alternar del lado del navegador y cómo podría convertirse en una vulnerabilidad de seguridad.
Javid Jamae

Respuestas:


209

La location.hostnamevariable le da el host actual. Eso debería ser suficiente para que pueda determinar en qué entorno se encuentra.

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

14
¿No hay una solución más general / "general" que también cubriría casos de uso de 127.0.0.1, etc.?
jacobq

8
Esto está simplemente mal. muchas personas editan su archivo de host para que no se encuentre la palabra 'localhost'
vsync

4
estoy de acuerdo. Esto está mal. Tampoco funcionará al acceder a un archivo "local" a través de una unidad de red.
ProblemsOfSumit

1
@Sumit a través de la interfaz de archivo puede verificar que el nombre de host esté vacío
chacham15

1
No estoy seguro de por qué todos dicen que esto está mal. Este simple recorte funciona perfecto para mí en localhost y producción. Mi software conoce el clima para publicar anuncios, o no, con una simple línea de código. Gracias OP.
Andy

30

si inicia html estático en el navegador, por ejemplo, desde una ubicación como la file:///C:/Documents and Settings/Administrator/Desktop/detección de "localhost" no funcionará. location.hostnamedevolverá una cadena vacía. entonces

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

Me encontré con este problema exacto y, aunque descubrí la solución yo mismo, esta respuesta debería estar más arriba.
domsson

6

Todavía no es una trampa para todos, pero podría ser una pequeña mejora. Ahora puede crear una matriz de dominios y usar .includes

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

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

3

Así es como se verifica en React, registrar service worker , una buena manera de verificar si está en localhost al verificar el nombre de host, incluidos localhost e IPv6 , y comenzar con 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

Una manera fácil de hacer esto sería simplemente comparar el nombre de host con el localhost o comparar su nombre de dominio personalizado con una subcadena, en este caso, URL ".local", como 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

Forma más corta usando la misma mecánica que otros scripts:

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

2

Este también cubre algunos casos comunes en los que las IP de la red local comienzan con 10.0.o 192.168.o Bonjour como dominio que termina en .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

Podría detectar en uno de sus códigos detrás de las páginas con c #, así:

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

O si desea hacerlo desde el script del cliente, puede verificar el valor de window.location.host.

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

Espero que esto ayude.


3
location.host incluye el nombre de host Y el puerto. Utilice location.hostname en su lugar.
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

Las respuestas anteriores resuelven principalmente el problema, pero ...

  • ¿Qué pasa si localhost no es necesariamente 'localhost /'?
  • ¿Qué sucede si desea realizar la validación de EF durante el desarrollo?
  • ¿Qué sucede si desea diferentes comportamientos durante el desarrollo
    ( validación fe, validación, no validación )

Una solución es configurar el hash de ubicación y verificarlo.

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

Puede agregar opciones ilimitadas con un interruptor

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;
}

Esta solución todavía tiene algo de trabajo manual y se puede alterar.
A1rPun

Creo que el "trabajo manual" es insignificante, la manipulación también, ya que podemos enviar lo que queramos sin la aprobación de javascript y la mayoría de los marcos tienen filtros que mitigan los ataques antes de que la solicitud llegue a la aplicación. Quizás permitir que el OP omita la validación del lado del servidor sea un riesgo, pero solo se agregó para mostrar la utilidad de usar una clave en el hash.
Shanimal

Nunca uso localhost o el loopback porque la lista blanca de docenas de clientes internacionalizados (clinetA.com, clientA.de, clientB.com, clientB.au, etc ...) se convertiría rápidamente en una pesadilla. Decidí ofrecer esta solución porque no le importa el dominio y se puede verificar en un sitio en vivo sin un parche.
Shanimal

0

La expresión regular es más lenta *, pero corta y ordenada. Además, nadie aquí verifica IPv6 localhost (:: 1)

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

Comprueba el host local general, el dominio .local y el archivo: (nombre de host vacío).

*) En Chrome, el rendimiento de [].includes(...)es el mejor (42 ms), seguido de un bucle simple (for, while) con verificación de elementos de matriz (119 ms), luego [].indexOf(...) > -1(289 ms) y finalmente la expresión regular (566 ms). Pero esas medidas son de alguna manera relativas, porque los diferentes navegadores se optimizan de manera diferente. En FF 52 ESR includesy indexOftienen resultados similares, la expresión regular es 2 × más lenta y el bucle 6 × más lento.


0

Según los comentarios anteriores, la siguiente expresión regular me ha ayudado a verificar si la URL es 'localhost', cualquier dirección IP IPv4 o 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)
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.