JavaScript: Cómo redirigir a otra página web

En este tutorial, veremos ejemplos, pros y contras de varios enfoques sobre cómo redirigir a un usuario a otra página o URL en JavaScript.

Introducción

A menudo, necesitamos redirigir a los usuarios a otro sitio web o a otra página web en el mismo sitio. Hay varias formas de redirigir, que incluyen redireccionamiento de JavaScript, redireccionamiento del lado del servidor y redireccionamiento de metaactualización de HTML. La redirección es básicamente un mecanismo para enviar a los usuarios a otra dirección URL.

La motivación para usar la redirección puede variar, en la mayoría de los casos, es porque:

  • Se mudó a otro dominio por algún motivo, por lo que puede redirigir a los usuarios al nuevo dominio cuando acceden al contenido en un dominio anterior.

  • Tiene varias páginas cuyo contenido varía según la ubicación, el idioma, los navegadores u otros factores en función de los cuales redirija a los usuarios a la página más adecuada.

  • Redirige las solicitudes de los usuarios no autenticados o no autorizados a los recursos a una página de inicio de sesión.

  • Envías a los usuarios a otras páginas correlacionadas con el contenido del sitio actual.

Todo esto se logra prácticamente a través del objeto ‘Ubicación’ que contiene información de URL. Hay algunas formas de hacer esto, jugando con diferentes propiedades del objeto ‘Ubicación’. En este tutorial, veremos cómo redirigir a un usuario a una página web diferente en JavaScript y qué buscar para minimizar el posible impacto negativo de SEO.

La propiedad ventana.ubicación

El objeto ventana.ubicación denota la ubicación actual, o más bien, la URL de la ventana/usuario. Es técnicamente una propiedad de solo lectura, aunque, sin embargo, podemos manipularla asignando nuevos valores (DOMStrings) a sus propiedades. El prefijo windows en el objeto windows.ubicación se puede omitir ya que está ubicado jerárquicamente en la parte superior del alcance.

Redirigir usuarios con ubicación.href

La propiedad ubicación.href denota la URL actual como una cadena. Cambiar la propiedad href también llevará automáticamente al usuario al nuevo valor href. Cambiar la propiedad href es tan fácil como simplemente asignarle un nuevo valor:

1
location.href = "https://wikihtp.com/";

Nota: Una línea de código funcionalmente equivalente es:

1
windows.location = "https://wikihtp.com";

Vale la pena señalar que puede redirigir a un usuario a un dominio diferente del dominio en el que se encuentra actualmente con este enfoque; sin embargo, pueden surgir problemas de seguridad a partir de esto, por lo que la práctica debe evitarse si es posible.

La redirección típicamente está ligada a algún tipo de evento, como presionar un botón que redirige a un usuario a una página web diferente, u otros eventos, como que un usuario realice alguna operación en un sitio web (cargar una imagen en las redes sociales, después de lo cual son redirigidos a esa publicación, por ejemplo). Escribamos una función simple que redirige a un usuario con el clic de un botón:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Redirection</title>
    <script type = "text/javascript">
        function Redirect() {
         window.location.href = "https://wikihtp.com/";
        }
    </script>
</head>
<body>
    <input type="button" value="Redirect Me" onclick="Redirect()"/>
</body>
</html>

Establecer la propiedad href es similar a lo que haría un clic del mouse.

Redirigir usuarios con ubicación.asignar()

El método ubicación.assign(url) carga el recurso en la url proporcionada y lo muestra en la ventana. Este es en realidad el enfoque preferido para redirigir a los usuarios en comparación con la configuración de la propiedad href, ya que también verifica la seguridad de la url proporcionada, lanzando una excepción si no es un destino seguro. Otro beneficio es que crea una nueva entrada en el historial del navegador, lo que permite al usuario volver "Atrás" si así lo desea.

También vale la pena señalar que ubicación.assign() no permite la redirección de origen cruzado. Solo puede redirigir al mismo dominio en el que se realiza la llamada, lo que tiene un impacto positivo en la seguridad.

Aparte de eso, se puede usar de la misma manera que se asigna un nuevo valor a ubicación.href. Reescribamos nuestra página para usar la función assign() en su lugar:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Assigning</title>
    <script type = "text/javascript">
        function Assign() {
         window.location.assign("https://wikihtp.com/");
        }
    </script>
</head>
<body>
    <input type="button" value="Redirect Me" onclick="Assign()" />
</body>
</html>

Redirigir usuarios con ubicación.reemplazar()

El método replace(url) se puede usar para reemplazar el recurso actual en la ventana, con el recurso cargado desde la url. Realmente no redirige a un usuario y no se almacena en el historial del navegador. Existen las mismas restricciones de seguridad que con el método assign(), lo que lo convierte en un método deseable si desea reemplazar el contenido por otra página:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Replacing</title>
    <script type = "text/javascript">
        function Replace() {
         window.location.Replace("https://wikihtp.com");
        }
    </script>
</head>
<body>
    <input type="button" value="Redirect Me" onclick="Replace()" />
</body>
</html>

También vale la pena señalar que el método assign() tiene un serio y potencial contra. Si el usuario va a volver a una página que ejecuta automáticamente el método assign(), será redirigido de nuevo a la página desde la que intentó volver. Luego entrarían en un ciclo de “regresar” a través del Botón Atrás, pero serían redirigidos a otra página debido al método assign().

Si está utilizando assign(), asegúrese de que no se llame automáticamente en la página, y que su invocación requiera la acción de un usuario, como invocarlo al presionar un botón. Si no, usa ubicación.reemplazar().

Además, ubicación.reemplazar() es lo más parecido a un redireccionamiento HTTP, ya que el enlace original no se agrega al historial del navegador.

Implicaciones de seguridad y efectos secundarios

La seguridad mencionada se aplica a todos los métodos anteriores y se refiere a los siguientes aspectos:

  • Si el origen del script que está llamando al método no es el mismo que el origen de la página actual, se tratará como una violación de seguridad y [Excepción DOM] (https://developer.mozilla.org/ en-US/docs/Web/API/DOMException) del tipo SECURITY_ERROR. Es decir, las bibliotecas y los servicios externos integrados en su propia página no podrán redirigir a los usuarios.
  • Si la URL almacenada no es válida, se lanzará una DOMException.
  • Si está redirigiendo a un usuario a un dominio que no sea el dominio en el que ya estaba, [CORS] (https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) puede activarse y prevenirlo.

Algunos de los posibles efectos secundarios que podrían ocurrir debido a problemas de diseño inducidos por humanos son:

  • Cuando la redirección (que no sea replace()) ocurre demasiado rápido (es decir, en menos de 3 segundos), puede romper el botón Atrás en un navegador. Esto significa que cada vez que intente regresar a la página anterior, la redirección ocurrirá una vez más casi de inmediato, creando un bucle infinito.
  • Se puede considerar como Doorway Page (es decir, páginas creadas para la manipulación de índices SEO) que no se recomienda
  • Las redirecciones mal planificadas y utilizadas pueden provocar redirecciones en cadena, redireccionando entre dos o más páginas.

Influencia en el SEO

Hay muchos factores que afectan el SEO, y muchos de ellos no se conocen públicamente, para que no se abuse de ellos. Sin embargo, lo que es seguro es que un código mal optimizado puede tener un impacto negativo en el SEO. Puede dar lugar a largos tiempos de carga, cadenas de redireccionamientos o incluso bucles. Muchos rastreadores web no ejecutarán código JavaScript que pueda afectar negativamente la clasificación de la página.

La mejor manera de superar estos problemas puede ser:

  • Para emitir correctamente una redirección HTTP en el lado del servidor con cualquiera de los códigos de estado de redirección (301..308) o para emitir un 404 para las páginas que ya no desea alojar o redirigir a.

  • Para informar a los motores de búsqueda de una página duplicada agregando <link rel="canonical" href="https://original_link"/> en la sección <head></head>. Esto es más fácil de implementar que hacer cualquier trabajo adicional en el lado del servidor, pero tenga en cuenta que no todos los rastreadores web lo apreciarán.

Conclusión

En este tutorial, hemos repasado cómo realizar un redireccionamiento usando JavaScript, así como las implicaciones de seguridad y la posible influencia en el SEO.