Obtener la URL anterior con JavaScript JavaScript

Conocer la URL anterior que ha visitado un usuario puede ser muy útil en multitud de situaciones. Especialmente en aplicaciones web tipo single page application y similares.

Por ejemplo, puede que quieras enviar al usuario hacia atrás, pero solo si la página anterior era de tu propio sitio.

La forma más rápida de conocer la URL previa con JavaScript es utilizar document.referrer:

let prevUrl = document.referrer;

Podemos comparar la URL devuelta con window.location.host (dominio o host actual) para saber si la URL anterior pertenecía o no a nuestra web:

let prevUrl = document.referrer;
if(prevUrl.indexOf(window.location.host) !== -1) {
    // Ir a la página anterior
    window.history.back();
}

Sin embargo, document.referrer solo guarda la URL anterior si el usuario navegó haciendo click en un enlace y no si ha llegado de algún otro modo (por ejemplo, escribiendo la URL directamente en el navegador), por lo que no siempre es de fiar.

Lo mismo ocurre con $_SERVER['HTTP_REFERER'] en PHP. No contiene la URL de referencia si el usuario ha llegado directamente a tu web.

Para solucionar este problema se pueden utilizar técnicas de manejo de sesión, como las cookies, y así te aseguras de conocer la URL de tu sitio que se ha visitado previamente:

Si estás desarrollando una web app en las que tú te encargas del routing, puedes almacenar la URL anterior en la información de estado al lanzar history.pushState:

window.history.pushState({ prevUrl: window.location.href }, null, "/new/route");

Y luego acceder desde history.state:

window.history.state.prevUrl;