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.
Instalar las dependencias necesarias:
npm install express cookie-parser
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}`);
});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:
// 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);
});- 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.
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.