react localstorage how cookie reactjs local-storage jwt

reactjs - how - localstorage react js



¿Es seguro almacenar un jwt en localStorage con reactjs? (6)

¿No son aceptables ni localStorage ni httpOnly cookies? En lo que respecta a una biblioteca de terceros comprometida, la única solución que conozco que reducirá / evitará el robo de información confidencial sería la Integridad de los recursos secundarios .

Subresource Integrity (SRI) es una característica de seguridad que permite a los navegadores verificar que los recursos que obtienen (por ejemplo, de un CDN) se entregan sin manipulación inesperada. Funciona al permitirle proporcionar un hash criptográfico que debe coincidir con un recurso obtenido.

Mientras la biblioteca de terceros comprometida esté activa en su sitio web, un keylogger puede comenzar a recopilar información como nombre de usuario, contraseña y cualquier otra cosa que ingrese en el sitio.

Una cookie httpOnly impedirá el acceso desde otra computadora, pero no hará nada para evitar que el hacker manipule la computadora del usuario.

Actualmente estoy construyendo una aplicación de página única usando reactjs. Leí que muchas de las razones para no usar localStorage se deben a las vulnerabilidades de XSS. Dado que React escapa a toda entrada del usuario, ¿sería seguro usar localStorage?


Básicamente está bien almacenar su JWT en su almacenamiento local.

Y creo que esta es una buena manera. Si estamos hablando de XSS, XSS usando CDN, también es un riesgo potencial de que su cliente también inicie sesión / pase. Almacenar datos en el almacenamiento local evitará al menos los ataques CSRF.

Debe ser consciente de ambos y elegir lo que desee. Ambos ataques no son todo lo que necesita saber, solo recuerde: ESTÁ SEGURO COMO UN PUNTO MENOS SEGURO DE SU APLICACIÓN.

Una vez más, el almacenamiento está bien, sea vulnerable a XSS, CSRF, ... no lo es


En la mayoría de las aplicaciones modernas de una sola página, tenemos que almacenar el token en algún lugar del lado del cliente (caso de uso más común, para mantener al usuario conectado después de una actualización de la página).

Hay un total de 2 opciones disponibles: almacenamiento web (almacenamiento de sesión, almacenamiento local) y una cookie del lado del cliente. Ambas opciones son ampliamente utilizadas, pero esto no significa que sean muy seguras.

Tom Abbott resume bien la seguridad de la sesión JWT sessionStorage y localStorage :

Se puede acceder al almacenamiento web (localStorage / sessionStorage) a través de JavaScript en el mismo dominio. Esto significa que cualquier JavaScript que se ejecute en su sitio tendrá acceso al almacenamiento web, y debido a esto puede ser vulnerable a los ataques de scripting entre sitios (XSS) . En pocas palabras, XSS es un tipo de vulnerabilidad en la que un atacante puede inyectar JavaScript que se ejecutará en su página. Los ataques básicos de XSS intentan inyectar JavaScript a través de entradas de formulario, donde el atacante coloca la <script>alert(''You are Hacked'');</script> en un formulario para ver si es ejecutado por el navegador y puede ser visto por otros usuarios .

Para evitar XSS, la respuesta común es escapar y codificar todos los datos no confiables. ¡Reaccionar (principalmente) hace eso por ti! Aquí hay una gran discusión sobre la cantidad de protección contra vulnerabilidades XSS de la que es responsable React .

¡Pero eso no cubre todas las vulnerabilidades posibles! Otra amenaza potencial es el uso de JavaScript alojado en CDN o infraestructura externa .

Aquí está Tom nuevamente:

Las aplicaciones web modernas incluyen bibliotecas JavaScript de terceros para pruebas A / B, embudo / análisis de mercado y anuncios. Utilizamos administradores de paquetes como Bower para importar el código de otras personas en nuestras aplicaciones.

¿Qué sucede si solo uno de los scripts que usa está comprometido? JavaScript malicioso se puede incrustar en la página y el almacenamiento web se ve comprometido. Estos tipos de ataques XSS pueden obtener el almacenamiento web de todos los que visitan su sitio, sin su conocimiento. Esta es probablemente la razón por la cual un grupo de organizaciones aconseja no almacenar nada de valor ni confiar en ninguna información en el almacenamiento web. Esto incluye identificadores de sesión y tokens.

Por lo tanto, mi conclusión es que, como mecanismo de almacenamiento, el almacenamiento web no aplica ningún estándar seguro durante la transferencia . Quien lea el almacenamiento web y lo use debe hacer su debida diligencia para asegurarse de que siempre envíen el JWT a través de HTTPS y nunca HTTP.


Localstorage está diseñado para ser accesible por javascript, por lo que no proporciona ninguna protección XSS. Como se menciona en otras respuestas, hay muchas formas posibles de hacer un ataque XSS, desde el cual el almacenamiento local no está protegido de forma predeterminada.

Sin embargo, las cookies tienen banderas de seguridad que protegen de los ataques XSS y CSRF. El indicador HttpOnly evita que javascript del lado del cliente acceda a la cookie, el indicador Secure solo permite que el navegador transfiera la cookie a través de ssl, y el indicador SameSite asegura que la cookie se envíe solo al origen. Aunque acabo de comprobarlo y SameSite actualmente solo es compatible con Opera y Chrome, por lo que para protegerse de CSRF es mejor usar otras estrategias. Por ejemplo, enviar un token cifrado en otra cookie con algunos datos públicos del usuario.

Por lo tanto, las cookies son una opción más segura para almacenar datos de autenticación.


No es seguro si usa CDN:

JavaScript malicioso se puede incrustar en la página y el almacenamiento web se ve comprometido. Estos tipos de ataques XSS pueden obtener el almacenamiento web de todos los que visitan su sitio, sin su conocimiento. Esta es probablemente la razón por la cual un grupo de organizaciones aconseja no almacenar nada de valor ni confiar en ninguna información en el almacenamiento web. Esto incluye identificadores de sesión y tokens.

a través de la tormenta

Cualquier script que requiera desde el exterior podría verse comprometido y podría tomar cualquier JWTS del almacenamiento de su cliente y enviar datos personales al servidor del atacante.


Sé que esta es una pregunta antigua, pero de acuerdo con lo que dijo @ mikejones1477, las bibliotecas y los marcos de front-end modernos escapan del texto y le brindan protección contra XSS. La razón por la cual las cookies no son un método seguro usando credenciales es que las cookies no previenen CSRF cuando localStorage lo hace (también recuerde que JavaScript también puede acceder a las cookies, por lo que XSS no es el gran problema aquí), esta respuesta resume por qué .

El motivo por el que almacenar un token de autenticación en el almacenamiento local y agregarlo manualmente a cada solicitud protege contra CSRF es esa palabra clave: manual. Dado que el navegador no envía automáticamente ese token de autenticación, si visito evil.com y logra enviar una POST http://example.com/delete-my-account , no podrá enviar mi token de autenticación, así que La solicitud es ignorada.

Por supuesto, httpOnly es el santo grial, pero no puede acceder desde reactjs o cualquier marco js que tenga a su lado todavía tiene vulnerabilidad CSRF. Mi recomendación sería el almacenamiento local o, si desea utilizar cookies, asegúrese de implementar alguna solución a su problema CSRF como lo hace django .

Con respecto a los CDN, asegúrese de que no esté usando CDN extraños, por ejemplo, los CDN como google o bootstrap proporcionan, son mantenidos por la comunidad y no contienen código malicioso, si no está seguro, puede revisarlos.