es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo acceder a las cookies correctamente en una aplicación de Express.

12 Jun, 2023 Programación

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í.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    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:

    const token = document.cookie.split('; ').find(row => row.startsWith('token=')).split('=')[1];

    Este código lee el valor de la cookie token de la cookie del documento y lo asigna a la variable token. Ten en cuenta que deberás reemplazar token con el nombre de la cookie que estás intentando leer.

    Sin embargo, como has establecido la marca httpOnly como true 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:

    app.get('/api/token', (req, res) => {
  const token = req.cookies.token;
  res.json(token);
});

    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 utilizando fetch:

    fetch('/api/token')
  .then(response => response.json())
  .then(token => {
    // Envía el token en el encabezado Authorization en solicitudes posteriores
  })
  .catch(error => console.error(error));

    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 encabezado Authorization 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.

Comments are closed.