1

tengo un problema en cuanto a la seguridad en una aplicación de Angular.

Para iniciar sesión y controlar X datos, estos de guardan en sessionStorage(). Cuando se cierra la sesión en la aplicación, devuelve a la página de 'login' eliminando todo el sessionStorage. El problema de seguridad está en que al darle al botón atrás del navegador un par de veces, vuelve a la página principal de la aplicación sin tener que iniciar sesión y con todos los datos del sessionStorage nuevamente cargados tal y como estaban antes de cerrar la sesión.

He encontrado 2 soluciones:

  1. Deshabilitar el botón de atrás del navegador mediante el siguiente código:
deshabilitaRetroceso(){
    window.location.hash="no-back-button";
    window.location.hash="Again-No-back-button" //chrome
    window.onhashchange=function(){window.location.hash="no-back-button";}
  }
  1. Controlar el botón atrás del navegador redirigiendo a la página de login con el siguiente código:
    this.router.events
      .subscribe((event: NavigationStart) => {
        if (event.navigationTrigger === 'popstate') {
          this.router.navigate(['login']);
        }
    });

Necesito conocer alguna otra forma de controlar que al cerrar la sesión, no se pueda volver a uno de los componentes de la aplicación si no se ha iniciado sesión y que no se recuperen los datos del sessionStorage.

Tengo controlado el routing con el canActivate, pero en este caso no se ejecuta, ya que al darle al botón atrás del navegador, vuelve a la vista pero no recarga el componente, por lo que no ejecuta el canActivate, pero al tener los sessionStorage recuperados, se puede hacer cualquier consulta ya que están los necesarios para esto.

Espero que me podáis ayudar. Gracias, Saludos.

Contenido editado:

Código que tengo en el canActivate:

guard() {
    if (sessionStorage.getItem('ejemplo1') != null && (sessionStorage.getItem('ejemplo2') != null || sessionStorage.getItem('ejemplo3') != null)) {
      return true;
    } else {
      return false;
    }
  }

Esto se ejecuta en todas excepto en la de login y error ya que al ir a estas 2 paginas hay un sessionStorage.clear(), los datos del guard() que se usan para verificar la sesión no estarán y por lo tanto no se podrá verificar el canActivate en estas 2 paginas.

Tras buscar, he encontrado la posible solución. Resulta que es un problema de Angular en versiones inferiores a las 12. En esta versión se solucionó según he leído en este post:

Gracias.

10
  • 1
    Algo no cuadra: el sessionStorage no se recupera al ir para atrás en el historial, o no se está borrando o algún servicio tiene en memoria esos datos y los reescribe Commented el 21 ene. 2022 a las 8:52
  • Hola, gracias por el comentario pero he de decirte que acabo de realizar la prueba añadiendo un sessionStorage en la pagina principal de Google, he realizado una búsqueda y al volver a atrás se recupera ese sessionStorage. Estoy realizando una limpieza con sessionStorage.clear(); al cerrar la sesión y no hay ningún servicio que mantenga en memoria dichos datos, por eso mismo los tengo en el sessionStorage, para que si tengo que hacer una recarga de la página (F5), no se pierdan los datos y se pueda seguir navegando por esta en caso de que sea necesario o el usuario final lo crea conveniente.
    – Joseatr
    Commented el 21 ene. 2022 a las 11:01
  • Mira este pequeño ejemplo: angular-ivy-hxedzr.stackblitz.io Commented el 21 ene. 2022 a las 11:30
  • En ese ejemplo puedes visitar A, luego B, luego A de nuevo, y no podrás ir a B otra vez a menos que limpies el sessionStorage. Si has ido a B y luego a A, al pulsar atrás en el historial verás que el guard se ejecuta Commented el 21 ene. 2022 a las 11:32
  • Del mismo modo, si vas a B, luego a A y borras el sessionStorage, al pulsar atrás podrás ir a B porque has borrado el session, no se recupera su valor Commented el 21 ene. 2022 a las 11:35

1 respuesta 1

0

tienes varias formas de poder hacer eso, uno de ellas es a través de eventos de click, donde llame a una función, borre la sesiónStorage y redirecciones al login, y la otra son con los guards. En este enlace de angular te dicen como se usan los guards. CanActivate angular

Ambas son correctas, pero la mejor es la de los guards.

3
  • Otra cosa mas compañero, no utilizes el objeto windows. en angular, tienes acceso del html a traves de la clase ElementRef. y puedes desactivarlo a traves de los atributos de html con las herramientas angulares como el siguiente ejemplo [attr.disabled]='true' para que el disabled no aparezca, cambiar el true por null Commented el 21 ene. 2022 a las 10:19
  • Hola, gracias por el aporte pero, como he comentado en la pregunta, ya tengo implementado CanActivate de angular. El problema está en que al darle atrás en el navegador, se vuelve a la página anterior sin hacer uso de los componentes de angular, por lo que no se ejecuta el canActivate. No entiendo porque sucede esto exactamente, pero necesito controlar ese cierre de sesión y que no se pueda volver atrás. Por otra parte, gracias por la aclaración del objeto "windows.", esa opción queda eliminada, quedando de momento la opción 2 como viable.
    – Joseatr
    Commented el 21 ene. 2022 a las 10:55
  • Tu respuesta podría mejorarse con información de apoyo adicional. Por favor, pulsa en editar para añadir más detalles, como citas o documentación, para que otros puedan confirmar que tu respuesta es correcta. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 21 ene. 2022 a las 19:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.