"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "qué-es-csrf", "hProperties": { "id": "qué-es-csrf" } }, "depth": 2, "value": "¿Qué es CSRF?" }, { "data": { "id": "cómo-funciona-csrf", "hProperties": { "id": "cómo-funciona-csrf" } }, "depth": 2, "value": "Cómo funciona CSRF" }, { "data": { "id": "política-de-mismo-origen-del-navegador", "hProperties": { "id": "política-de-mismo-origen-del-navegador" } }, "depth": 3, "value": "Política de mismo origen del navegador" }, { "data": { "id": "mecanismo-automático-de-envío-de-cookies", "hProperties": { "id": "mecanismo-automático-de-envío-de-cookies" } }, "depth": 3, "value": "Mecanismo automático de envío de cookies" }, { "data": { "id": "pasos-de-un-ataque-csrf", "hProperties": { "id": "pasos-de-un-ataque-csrf" } }, "depth": 3, "value": "Pasos de un ataque CSRF" }, { "data": { "id": "ejemplo-de-ataque-csrf", "hProperties": { "id": "ejemplo-de-ataque-csrf" } }, "depth": 2, "value": "Ejemplo de ataque CSRF" }, { "data": { "id": "métodos-comunes-para-prevenir-ataques-csrf", "hProperties": { "id": "métodos-comunes-para-prevenir-ataques-csrf" } }, "depth": 2, "value": "Métodos comunes para prevenir ataques CSRF" }, { "data": { "id": "uso-de-tokens-csrf", "hProperties": { "id": "uso-de-tokens-csrf" } }, "depth": 3, "value": "Uso de tokens CSRF" }, { "data": { "id": "comprobación-del-encabezado-referer", "hProperties": { "id": "comprobación-del-encabezado-referer" } }, "depth": 3, "value": "Comprobación del encabezado Referer" }, { "data": { "id": "uso-del-atributo-samesite-en-cookies", "hProperties": { "id": "uso-del-atributo-samesite-en-cookies" } }, "depth": 3, "value": "Uso del atributo SameSite en cookies" }, { "data": { "id": "uso-de-encabezados-de-solicitud-personalizados", "hProperties": { "id": "uso-de-encabezados-de-solicitud-personalizados" } }, "depth": 3, "value": "Uso de encabezados de solicitud personalizados" }, { "data": { "id": "verificación-doble-de-cookies", "hProperties": { "id": "verificación-doble-de-cookies" } }, "depth": 3, "value": "Verificación doble de cookies" }, { "data": { "id": "uso-de-reautenticación-para-operaciones-sensibles", "hProperties": { "id": "uso-de-reautenticación-para-operaciones-sensibles" } }, "depth": 3, "value": "Uso de reautenticación para operaciones sensibles" }, { "data": { "id": "resumen", "hProperties": { "id": "resumen" } }, "depth": 2, "value": "Resumen" }]; const readingTime = { "minutes": 7, "words": 1950, "text": "7 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "Cuando trabajamos en el desarrollo web, especialmente con cookies, a menudo escuchamos frases como \"esta configuración ayuda a prevenir CSRF\". Sin embargo, muchas personas solo tienen una idea vaga de qué significa realmente \"CSRF\"." }), "\n", _jsx(_components.p, { children: "Hoy, profundizaremos en CSRF (falsificación de solicitudes entre sitios), una falla común en la seguridad web. Esto nos ayudará a manejar los problemas relacionados con CSRF de manera más efectiva." }), "\n", _jsxs(_components.h2, { id: "qué-es-csrf", children: ["¿Qué es CSRF?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#qué-es-csrf", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "CSRF (falsificación de solicitudes entre sitios) es un tipo de ataque web donde los atacantes engañan a usuarios autenticados para que realicen acciones no intencionadas. En términos simples, es \"hackers pretendiendo ser usuarios para llevar a cabo acciones no autorizadas\"." }), "\n", _jsxs(_components.h2, { id: "cómo-funciona-csrf", children: ["Cómo funciona CSRF", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#cómo-funciona-csrf", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Para entender CSRF, necesitamos comprender algunos conceptos clave:" }), "\n", _jsxs(_components.h3, { id: "política-de-mismo-origen-del-navegador", children: ["Política de mismo origen del navegador", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#política-de-mismo-origen-del-navegador", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "La política de mismo origen es una característica de seguridad en los navegadores que limita cómo un documento o script de un origen puede interactuar con recursos de otro origen." }), "\n", _jsxs(_components.p, { children: ["Un origen consiste en un protocolo (como HTTP o HTTPS), nombre de dominio y número de puerto. Por ejemplo, ", _jsx(_components.code, { children: "https://example.com:443" }), " es un origen, mientras que ", _jsx(_components.code, { children: "https://demo.com:80" }), " es otro."] }), "\n", _jsx(_components.p, { children: "La política de mismo origen restringe el acceso a datos entre páginas de diferentes orígenes, lo que significa:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "JavaScript de un origen no puede leer el DOM de otro origen" }), "\n", _jsx(_components.li, { children: "JavaScript de un origen no puede leer las cookies, IndexedDB o localStorage de otro origen" }), "\n", _jsx(_components.li, { children: "JavaScript de un origen no puede enviar solicitudes AJAX a otro origen (a menos que use CORS)" }), "\n"] }), "\n", _jsx(_components.p, { children: "Sin embargo, para mantener la apertura e interoperabilidad de la Web (como cargar recursos de CDNs o enviar solicitudes a APIs de terceros para registros), la política de mismo origen no restringe las solicitudes de red entre orígenes:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Las páginas pueden enviar solicitudes GET o POST a cualquier origen (como cargar imágenes o enviar formularios)" }), "\n", _jsxs(_components.li, { children: ["Los recursos de cualquier origen pueden ser incluidos (como etiquetas ", _jsx(_components.code, { children: "\n \n\n" }) }), "\n", _jsxs(_components.p, { children: ["Cuando el usuario hace clic en el enlace ", _jsx(_components.code, { children: "https://evil.com" }), " sin cerrar sesión de su cuenta bancaria, como ya ha iniciado sesión en ", _jsx(_components.code, { children: "bank.com" }), ", el navegador tiene una cookie ", _jsx(_components.code, { children: "session_id" }), " válida."] }), "\n", _jsxs(_components.p, { children: ["Después de que la página maliciosa se cargue, automáticamente envía el formulario oculto, enviando una solicitud de transferencia a ", _jsx(_components.code, { children: "https://bank.com/transfer" }), "."] }), "\n", _jsxs(_components.p, { children: ["El navegador del usuario adjunta automáticamente la cookie de ", _jsx(_components.code, { children: "bank.com" }), " a esta solicitud. El servidor de ", _jsx(_components.code, { children: "bank.com" }), " recibe la solicitud, verifica que la cookie sea válida y luego ejecuta esta operación de transferencia no autorizada."] }), "\n", _jsxs(_components.h2, { id: "métodos-comunes-para-prevenir-ataques-csrf", children: ["Métodos comunes para prevenir ataques CSRF", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#métodos-comunes-para-prevenir-ataques-csrf", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Aquí hay varios métodos de defensa contra CSRF comúnmente utilizados. Explicaremos en detalle el principio de cada método y cómo previene eficazmente los ataques CSRF:" }), "\n", _jsxs(_components.h3, { id: "uso-de-tokens-csrf", children: ["Uso de tokens CSRF", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#uso-de-tokens-csrf", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Los tokens CSRF son uno de los métodos más comunes y efectivos para defenderse de los ataques CSRF. Así es como funciona:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "El servidor genera un token único e impredecible para cada sesión." }), "\n", _jsx(_components.li, { children: "Este token se incrusta en todos los formularios para operaciones sensibles." }), "\n", _jsx(_components.li, { children: "Cuando el usuario envía un formulario, el servidor verifica la validez del token." }), "\n"] }), "\n", _jsx(_components.p, { children: "Debido a que el token CSRF es un valor único vinculado a la sesión del usuario, y el atacante no puede conocer o adivinar este valor (ya que es diferente para cada sesión), incluso si el atacante engaña al usuario para que envíe una solicitud, la solicitud será rechazada por el servidor debido a la falta de un token CSRF válido." }), "\n", _jsx(_components.p, { children: "Ejemplo de implementación:" }), "\n", _jsx(_components.p, { children: "En el servidor (usando Node.js y Express):" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "const express = require('express');\nconst crypto = require('crypto');\nconst app = express();\n\n// Generar token CSRF\nfunction generateCSRFToken() {\n return crypto.randomBytes(16).toString('hex');\n}\n\n// Middleware de protección CSRF\napp.use((req, res, next) => {\n if (req.method === 'GET') {\n // Generar nuevo token CSRF para cada solicitud GET\n req.session.csrfToken = generateCSRFToken();\n } else if (['POST', 'PUT', 'DELETE'].includes(req.method)) {\n // Verificar token CSRF\n const submittedToken = req.body._csrf || req.headers['x-csrf-token'];\n if (submittedToken !== req.session.csrfToken) {\n return res.status(403).json({ error: 'La validación del token CSRF falló' });\n }\n }\n next();\n});\n" }) }), "\n", _jsx(_components.p, { children: "En JavaScript del frontend:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "// Enviar solicitud con token CSRF\nasync function sendRequestWithCSRFToken(url, method, data) {\n const csrfToken = document.querySelector('meta[name=\"csrf-token\"]').getAttribute('content');\n const response = await fetch(url, {\n method: method,\n headers: {\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': csrfToken\n },\n body: JSON.stringify(data)\n });\n return response.json();\n}\n" }) }), "\n", _jsxs(_components.h3, { id: "comprobación-del-encabezado-referer", children: ["Comprobación del encabezado ", _jsx(_components.code, { children: "Referer" }), _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#comprobación-del-encabezado-referer", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["El encabezado ", _jsx(_components.code, { children: "Referer" }), " contiene la URL de la página que inició la solicitud. Verificando el encabezado ", _jsx(_components.code, { children: "Referer" }), ", el servidor puede determinar si la solicitud proviene de una fuente legítima."] }), "\n", _jsxs(_components.p, { children: ["Dado que los ataques CSRF generalmente provienen de diferentes dominios, el encabezado ", _jsx(_components.code, { children: "Referer" }), " mostrará el nombre de dominio del atacante. Al verificar si el ", _jsx(_components.code, { children: "Referer" }), " es el valor esperado, las solicitudes de fuentes desconocidas pueden ser bloqueadas."] }), "\n", _jsx(_components.p, { children: "Sin embargo, vale la pena señalar que este método no es completamente confiable, ya que algunos navegadores podrían no enviar el encabezado Referer, y los usuarios pueden deshabilitar el encabezado Referer a través de configuraciones del navegador o complementos." }), "\n", _jsx(_components.p, { children: "Ejemplo de implementación:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "function checkReferer(req) {\n const referer = req.get('Referer');\n return referer && referer.startsWith('https://yourwebsite.com');\n}\n\napp.use((req, res, next) => {\n if (['POST', 'PUT', 'DELETE'].includes(req.method) && !checkReferer(req)) {\n return res.status(403).json({ error: 'Referer inválido' });\n }\n next();\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "uso-del-atributo-samesite-en-cookies", children: ["Uso del atributo ", _jsx(_components.code, { children: "SameSite" }), " en cookies", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#uso-del-atributo-samesite-en-cookies", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "SameSite" }), " es un atributo de cookie utilizado para controlar si las cookies se envían con solicitudes entre sitios. Tiene tres valores posibles:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Strict" }), ": Las cookies solo se envían en solicitudes del mismo sitio."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Lax" }), ": Las cookies se envían en solicitudes del mismo sitio y navegación de nivel superior."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "None" }), ": Las cookies se envían en todas las solicitudes entre sitios (debe usarse con el atributo ", _jsx(_components.code, { children: "Secure" }), ")."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Cuando ", _jsx(_components.code, { children: "SameSite" }), " se establece en ", _jsx(_components.code, { children: "Strict" }), ", puede prevenir completamente que sitios web de terceros envíen cookies, evitando así eficazmente los ataques CSRF.\nSi ", _jsx(_components.code, { children: "SameSite" }), " se establece en ", _jsx(_components.code, { children: "Lax" }), ", protege operaciones sensibles mientras permite algunos casos comunes de uso entre sitios (como ingresar a un sitio web desde enlaces externos)."] }), "\n", _jsx(_components.p, { children: "Ejemplo de implementación:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "res.cookie('session_id', 'abc123', {\n httpOnly: true,\n secure: true,\n sameSite: 'strict'\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "uso-de-encabezados-de-solicitud-personalizados", children: ["Uso de encabezados de solicitud personalizados", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#uso-de-encabezados-de-solicitud-personalizados", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Para solicitudes AJAX, se pueden agregar encabezados de solicitud personalizados. Debido a las restricciones de la política de mismo origen, los atacantes no pueden establecer encabezados personalizados en solicitudes entre orígenes. El servidor puede verificar la presencia de este encabezado personalizado para verificar la legitimidad de la solicitud." }), "\n", _jsx(_components.p, { children: "Ejemplo de implementación:" }), "\n", _jsx(_components.p, { children: "En el frontend:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "fetch('/api/data', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'X-Requested-With': 'XMLHttpRequest'\n },\n body: JSON.stringify(data)\n});\n" }) }), "\n", _jsx(_components.p, { children: "En el lado del servidor:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "app.use((req, res, next) => {\n if (req.xhr || req.headers['x-requested-with'] === 'XMLHttpRequest') {\n // Manejar la solicitud AJAX\n } else {\n // Manejar la solicitud no AJAX\n }\n next();\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "verificación-doble-de-cookies", children: ["Verificación doble de cookies", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#verificación-doble-de-cookies", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "La verificación doble de cookies es una técnica efectiva de defensa contra CSRF. Su principio básico es que el servidor genera un token aleatorio, lo establece como cookie y lo incrusta en la página (generalmente como un campo de formulario oculto). Cuando el navegador envía una solicitud, automáticamente incluye la cookie, mientras que el JavaScript de la página envía el token como un parámetro de solicitud. El servidor luego verifica si el token en la cookie coincide con el token en los parámetros de la solicitud." }), "\n", _jsx(_components.p, { children: "Aunque los atacantes pueden incluir la cookie del sitio web objetivo en solicitudes entre sitios, no pueden leer o modificar el valor de la cookie, ni pueden acceder o modificar el valor del token en la página. Al requerir que la solicitud incluya tokens tanto de la cookie como de los parámetros, asegura que la solicitud provenga de una fuente con permiso para leer la cookie, defendiendo así eficazmente contra ataques CSRF." }), "\n", _jsxs(_components.h3, { id: "uso-de-reautenticación-para-operaciones-sensibles", children: ["Uso de reautenticación para operaciones sensibles", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#uso-de-reautenticación-para-operaciones-sensibles", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Para operaciones particularmente sensibles (como cambiar contraseñas o realizar grandes transferencias), se puede requerir que los usuarios se reautentiquen.\nEsto proporciona a los usuarios un punto adicional de control de seguridad. Incluso si un usuario inicia con éxito un ataque CSRF, no podrá pasar el paso de reautenticación." }), "\n", _jsx(_components.p, { children: "Sugerencias de implementación:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Antes de realizar operaciones sensibles, redirigir a una página de autenticación separada." }), "\n", _jsx(_components.li, { children: "En esta página, requerir que el usuario ingrese su contraseña u otra información de verificación de identidad." }), "\n", _jsx(_components.li, { children: "Después de que la verificación pase, generar un token de un solo uso y usar este token en operaciones sensibles subsecuentes." }), "\n"] }), "\n", _jsxs(_components.h2, { id: "resumen", children: ["Resumen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#resumen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "A través de esta discusión en profundidad, esperamos que ahora tengas una comprensión más completa de los ataques CSRF.\nNo solo hemos aprendido cómo funciona CSRF, sino que también hemos explorado varias medidas de defensa efectivas. Todos estos métodos pueden mejorar eficazmente la seguridad de las aplicaciones web." }), "\n", _jsx(_components.p, { children: "Esperamos que este conocimiento te ayude a manejar mejor los problemas relacionados con CSRF en tu desarrollo diario y a construir aplicaciones web más seguras." }), "\n", _jsx(LogtoCloudButton, {})] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }