Ejemplo de cookies con http-only y segure usando express y react

Aquí te proporciono un ejemplo de cómo utilizar cookies httpOnly y secure en un backend con Express y cómo hacer una solicitud desde el frontend usando React.

Backend: Express

Instalar las dependencias necesarias:

npm install express cookie-parser

Configurar el servidor Express:

const express = require('express');
const cookieParser = require('cookie-parser');

const app = express();
app.use(cookieParser());

// Endpoint para crear las cookiea
app.post('/set-cookie', (req, res) => {
  res.cookie('token', 'your_secure_token', {
    httpOnly: true,
    secure: true, // Asegúrate de usar HTTPS
    sameSite: 'Strict'
  });
  res.send('Cookie has been set.');
});

// Endpoint para obtener cookies
app.get('/get-cookie', (req, res) => {
  // Acceder a las cookies desde req.cookies
  const token = req.cookies['token'];
  if (token) {
    res.send(`Cookie value: ${token}`);
  } else {
    res.send('No secure httpOnly cookie found.');
  }
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

Frontend: React

Cuando haces solicitudes desde el frontend, las cookies de httpOnly no pueden ser accedidas desde JavaScript por razones de seguridad. Sin embargo, si necesitas enviar las cookies al servidor, puedes hacerlo de la siguiente manera:

Usar fetch o axios para enviar la cookie:

// Usando fetch
fetch('https://your-server.com/set-cookie', {
  method: 'POST',
  credentials: 'include' // Esto es crucial para enviar cookies
})
.then(response => response.text())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));


// Usando axios
import axios from 'axios';

axios.post('https://your-server.com/set-cookie', {}, { withCredentials: true })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

Notas

• Secure: Solo se envían a través de conexiones HTTPS, por lo tanto, asegúrate de servir tu aplicación a través de la conexion ya mencionada
• httpOnly: Estas cookies no son accesibles a través de JavaScript en el navegador, lo que protege contra ataques XSS.
• CORS: Configura correctamente CORS en tu servidor para permitir credentials si estás haciendo solicitudes entre diferentes dominios.

Resumen

Este ejemplo demuestra cómo un backend puede establecer una cookie con las banderas httpOnly y secure, y cómo el frontend puede enviar la cookie con una solicitud.