Cómo acceder a las cookies correctamente en una aplicación de Express.
He estado teniendo problemas en mi aplicación MERN que estoy construyendo. Estoy almacenando un token en cookies cuando registro / inicio sesión de un usuario. Soy capaz de acceder a esta cookie a través de mi aplicación express bien y cuando uso Postman todo funciona también.
Ahora el problema que estoy encontrando es cuando intento acceder a rutas protegidas a través de mi lado del cliente que está en React. No estoy seguro de cómo manejar esto correctamente porque en mi aplicación express no puedo obtener la cookie de la misma manera que lo estoy haciendo cuando uso postman, por ejemplo. Estoy usando httpOnly: true
para que la cookie solo pueda ser accesible desde mi aplicación express. Quiero mantenerlo así con httpOnly
por razones de seguridad para que no tenga acceso al token a través de mi lado del cliente.
Aquí está mi código en la aplicación express…
exports.protect = catchAsync(async (req, res, next) => {
let token;
if (
req.headers.authorization &&
req.headers.authorization.startsWith('Bearer')
) {
token = req.headers.authorization.split(' ')[1];
}
console.log(req.headers);
if (!token) {
return next(new AppError('No se encontró token!', 401));
}
const decoded = await promisify(jwt.verify)(token, process.env.JWT_SECRET);
const freshUser = await User.findById(decoded.id);
if (!freshUser) {
return res.status(401).json({
status: 'fail',
message: '¡Este token ya no existe!',
});
}
req.user = freshUser;
next();
});
Cuando intento acceder al token usando req.headers.authorization
usando postman funciona, pero como mencioné antes, usando mi aplicación de lado del cliente react, no lo hace y está undefined
. usando req.headers
puedo ver cookies
sin embargo. Siento que puedo simplemente acceder a req.headers.cookie
entonces, pero ¿qué debo hacer cuando solo estoy ejecutando mi backend sin ejecutar mi aplicación de lado del cliente? No quiero tener un código separado. Avísame si necesito aclarar lo que estoy diciendo aquí.
davy.ai
Para acceder a la cookie desde tu aplicación React en el lado del cliente, puedes usar la API
document.cookie
. Esto te permitirá leer el valor de la cookie establecida por tu servidor. Aquí hay un ejemplo de cómo puedes leer el valor de la cookie:Este código lee el valor de la cookie
token
de la cookie del documento y lo asigna a la variabletoken
. Ten en cuenta que deberás reemplazartoken
con el nombre de la cookie que estás intentando leer.Sin embargo, como has establecido la marca
httpOnly
comotrue
al establecer la cookie, no podrás acceder a esta cookie desde tu JavaScript en el lado del cliente directamente. Esto es intencional, ya que ayuda a prevenir ataques de scripting entre sitios (XSS).Si deseas utilizar el mismo código tanto para el backend como para el frontend, puedes crear puntos finales separados en tu aplicación Express que devuelvan el token como respuesta. Tu aplicación React puede luego llamar a este punto final para recibir el token y enviarlo de vuelta en el encabezado
Authorization
en las solicitudes posteriores a rutas protegidas.Aquí hay un ejemplo de cómo puedes crear un punto final en tu aplicación Express:
Este punto final lee la cookie
token
de la solicitud y la envía de vuelta como respuesta.En tu aplicación React, puedes llamar a este punto final utilizando
fetch
o cualquier biblioteca AJAX de tu elección. Aquí hay un ejemplo utilizandofetch
:Este código realiza una solicitud GET al punto final
/api/token
y recibe el token como respuesta JSON. Luego puedes almacenar este token en tu aplicación React y usarlo en el encabezadoAuthorization
en rutas protegidas.Ten en cuenta que este enfoque tiene implicaciones de seguridad, ya que expone el token al JavaScript en el lado del cliente. Debes asegurarte de que tus puntos finales en el lado del servidor sean seguros y estén autenticados correctamente para prevenir el acceso no autorizado a tus rutas protegidas.