Estamos desarrollando una aplicación web en react js y usando Odoo como backend.
Mi aplicación web estará alojada en abc.com y el backend está en xyz.com.
Ahora, cuando llamo a la API de inicio de sesión en mi backend, está dando un token JWT en respuesta. Ahora mi pregunta es dónde debemos almacenar este token JWT para su uso posterior.
Encontré algunas preguntas similares, pero no estoy seguro de dónde deberían almacenarse en mi caso de uso. ¿Puede alguien sugerirme dónde deberíamos almacenarlo en el lado del cliente?
¡Muchas gracias por adelantado!
Tiene algunas opciones donde puede almacenar el token. Cada opción tiene sus defectos, y cuál debe elegir depende de sus necesidades concretas y casos de uso. También es bueno saber que no existe una forma segura de almacenar tokens en el navegador.
Almacenamiento en memoria. Puede mantener el token en una variable en la memoria del script. Será difícil robar el token con un ataque XSS, pero necesitará un nuevo token cada vez que el usuario actualice la página.
Almacenamiento en almacenamiento local. Esto le brinda la posibilidad de reutilizar el token cuando el usuario actualiza la página. Sin embargo, con esta opción, es mucho más fácil que un ataque XSS robe sus tokens.
Almacenamiento en una cookie del mismo sitio, segura y solo http. Actualmente, esta se considera la opción más segura para los SPA, pero en este escenario no podrá configurar el encabezado de Authorization directamente desde el SPA, solo puede confiar en que el navegador agregará la cookie segura a su solicitud. Esto significa que es posible que necesite algunos componentes de back-end adicionales, que extraerán tokens de las cookies (y tal vez los coloquen en esas cookies, en primer lugar). Esto generalmente se conoce como un componente Token Handler o Backend-for-Frontend. Si este es el nivel de seguridad que necesita, puede echar un vistazo a una implementación de ejemplo de dicho BFF, que hicimos en Curity: https://curity.io/resources/learn/token-handler-spa-example/
Eche un vistazo también a este gran video de Philippe de Ryck sobre la seguridad de los tokens en el navegador: https://pragmaticwebsecurity.com/talks/xssoauth.html
Puede almacenar el token obtenido en una cookie. Si está utilizando la biblioteca axios para su solicitud, puede configurar el token para que se maneje en los interceptores de axios
export function getToken() { for (const i in TokenKey) { if (Cookies.get(TokenKey[i])) return Cookies.get(TokenKey[i]) } service.interceptors.request.use( config => { const token = getToken() || store.getters.token if (token) { config.headers['Authorization'] = token } return config }, error => { // Do something with request error console.log(error) // for debug Promise.reject(error) })