"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "o-que-é-csrf", "hProperties": { "id": "o-que-é-csrf" } }, "depth": 2, "value": "O que é CSRF?" }, { "data": { "id": "como-funciona-o-csrf", "hProperties": { "id": "como-funciona-o-csrf" } }, "depth": 2, "value": "Como funciona o CSRF" }, { "data": { "id": "política-de-mesma-origem-do-navegador", "hProperties": { "id": "política-de-mesma-origem-do-navegador" } }, "depth": 3, "value": "Política de Mesma Origem do Navegador" }, { "data": { "id": "mecanismo-de-envio-automático-de-cookies", "hProperties": { "id": "mecanismo-de-envio-automático-de-cookies" } }, "depth": 3, "value": "Mecanismo de envio automático de cookies" }, { "data": { "id": "etapas-do-ataque-csrf", "hProperties": { "id": "etapas-do-ataque-csrf" } }, "depth": 3, "value": "Etapas do ataque CSRF" }, { "data": { "id": "exemplo-de-ataque-csrf", "hProperties": { "id": "exemplo-de-ataque-csrf" } }, "depth": 2, "value": "Exemplo de ataque CSRF" }, { "data": { "id": "métodos-comuns-para-prevenir-ataques-csrf", "hProperties": { "id": "métodos-comuns-para-prevenir-ataques-csrf" } }, "depth": 2, "value": "Métodos comuns para prevenir ataques CSRF" }, { "data": { "id": "usar-tokens-csrf", "hProperties": { "id": "usar-tokens-csrf" } }, "depth": 3, "value": "Usar tokens CSRF" }, { "data": { "id": "verificando-o-cabeçalho-referer", "hProperties": { "id": "verificando-o-cabeçalho-referer" } }, "depth": 3, "value": "Verificando o cabeçalho Referer" }, { "data": { "id": "usando-o-atributo-de-cookie-samesite", "hProperties": { "id": "usando-o-atributo-de-cookie-samesite" } }, "depth": 3, "value": "Usando o atributo de cookie SameSite" }, { "data": { "id": "usando-cabeçalhos-de-solicitação-personalizados", "hProperties": { "id": "usando-cabeçalhos-de-solicitação-personalizados" } }, "depth": 3, "value": "Usando cabeçalhos de solicitação personalizados" }, { "data": { "id": "verificação-de-cookies-duplos", "hProperties": { "id": "verificação-de-cookies-duplos" } }, "depth": 3, "value": "Verificação de cookies duplos" }, { "data": { "id": "usando-re-autenticação-para-operações-sensíveis", "hProperties": { "id": "usando-re-autenticação-para-operações-sensíveis" } }, "depth": 3, "value": "Usando re-autenticação para operações sensíveis" }, { "data": { "id": "resumo", "hProperties": { "id": "resumo" } }, "depth": 2, "value": "Resumo" }]; const readingTime = { "minutes": 6, "words": 1868, "text": "6 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: "Ao trabalhar com desenvolvimento web, especialmente com cookies, frequentemente ouvimos frases como \"esta configuração ajuda a prevenir CSRF\". No entanto, muitas pessoas têm apenas uma noção vaga do que \"CSRF\" realmente significa." }), "\n", _jsx(_components.p, { children: "Hoje, vamos nos aprofundar no CSRF (Cross-Site Request Forgery), uma falha comum de segurança na web. Isso nos ajudará a lidar mais efetivamente com problemas relacionados a CSRF." }), "\n", _jsxs(_components.h2, { id: "o-que-é-csrf", children: ["O que é CSRF?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#o-que-é-csrf", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "CSRF (Cross-Site Request Forgery) é um tipo de ataque na web onde os atacantes enganam usuários autenticados para executar ações não intencionais. Em termos simples, é \"hackers fingindo ser usuários para realizar ações não autorizadas\"." }), "\n", _jsxs(_components.h2, { id: "como-funciona-o-csrf", children: ["Como funciona o CSRF", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#como-funciona-o-csrf", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Para entender o CSRF, precisamos compreender alguns conceitos chave:" }), "\n", _jsxs(_components.h3, { id: "política-de-mesma-origem-do-navegador", children: ["Política de Mesma Origem do Navegador", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#política-de-mesma-origem-do-navegador", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "A política de mesma origem é um recurso de segurança nos navegadores que limita como um documento ou script de uma origem pode interagir com recursos de outra origem." }), "\n", _jsxs(_components.p, { children: ["Uma origem consiste em um protocolo (como HTTP ou HTTPS), nome de domínio e número de porta. Por exemplo, ", _jsx(_components.code, { children: "https://example.com:443" }), " é uma origem, enquanto ", _jsx(_components.code, { children: "https://demo.com:80" }), " é outra."] }), "\n", _jsx(_components.p, { children: "A política de mesma origem restringe o acesso a dados entre páginas de diferentes origens, significando que:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "JavaScript de uma origem não pode ler o DOM de outra origem" }), "\n", _jsx(_components.li, { children: "JavaScript de uma origem não pode ler os Cookies, IndexedDB ou localStorage de outra origem" }), "\n", _jsx(_components.li, { children: "JavaScript de uma origem não pode enviar solicitações AJAX para outra origem (a menos que use CORS)" }), "\n"] }), "\n", _jsx(_components.p, { children: "No entanto, para manter a abertura e a interoperabilidade da Web (como carregar recursos de CDNs ou enviar solicitações para APIs de terceiros para registro), a política de mesma origem não restringe solicitações de rede cross-origin:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Páginas podem enviar solicitações GET ou POST para qualquer origem (como carregar imagens ou enviar formulários)" }), "\n", _jsxs(_components.li, { children: ["Recursos de qualquer origem podem ser incluídos (como tags ", _jsx(_components.code, { children: "\n \n\n" }) }), "\n", _jsxs(_components.p, { children: ["Quando o usuário clica no link ", _jsx(_components.code, { children: "https://evil.com" }), " sem sair de sua conta no banco, porque ele já está logado em ", _jsx(_components.code, { children: "bank.com" }), ", o navegador tem um cookie ", _jsx(_components.code, { children: "session_id" }), " válido."] }), "\n", _jsxs(_components.p, { children: ["Depois que a página maliciosa carrega, ela automaticamente envia o formulário oculto, enviando uma solicitação de transferência para ", _jsx(_components.code, { children: "https://bank.com/transfer" }), "."] }), "\n", _jsxs(_components.p, { children: ["O navegador do usuário automaticamente anexa o cookie ", _jsx(_components.code, { children: "bank.com" }), " a esta solicitação. O servidor do ", _jsx(_components.code, { children: "bank.com" }), " recebe a solicitação, verifica se o cookie é válido e então executa esta operação de transferência não autorizada."] }), "\n", _jsxs(_components.h2, { id: "métodos-comuns-para-prevenir-ataques-csrf", children: ["Métodos comuns para prevenir ataques CSRF", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#métodos-comuns-para-prevenir-ataques-csrf", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Aqui estão vários métodos de defesa contra CSRF comumente usados. Explicaremos em detalhe o princípio de cada método e como ele previne efetivamente ataques CSRF:" }), "\n", _jsxs(_components.h3, { id: "usar-tokens-csrf", children: ["Usar tokens CSRF", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#usar-tokens-csrf", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Tokens CSRF são um dos métodos mais comuns e eficazes para defender contra ataques CSRF. Veja como funciona:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "O servidor gera um token único e imprevisível para cada sessão." }), "\n", _jsx(_components.li, { children: "Este token é incorporado em todos os formulários para operações sensíveis." }), "\n", _jsx(_components.li, { children: "Quando o usuário envia um formulário, o servidor verifica a validade do token." }), "\n"] }), "\n", _jsx(_components.p, { children: "Como o token CSRF é um valor único vinculado à sessão do usuário, e o atacante não pode saber ou adivinhar esse valor (pois é diferente para cada sessão), mesmo que o atacante engane o usuário para enviar uma solicitação, a solicitação será rejeitada pelo servidor devido à falta de um token CSRF válido." }), "\n", _jsx(_components.p, { children: "Exemplo de implementação:" }), "\n", _jsx(_components.p, { children: "No lado do servidor (usando Node.js e 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// Gerar token CSRF\nfunction generateCSRFToken() {\n return crypto.randomBytes(16).toString('hex');\n}\n\n// Middleware de proteção contra CSRF\napp.use((req, res, next) => {\n if (req.method === 'GET') {\n // Gerar novo token CSRF para cada solicitação 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: 'Falha na validação do token CSRF' });\n }\n }\n next();\n});\n" }) }), "\n", _jsx(_components.p, { children: "No JavaScript frontend:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "// Enviar solicitação com 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: "verificando-o-cabeçalho-referer", children: ["Verificando o cabeçalho ", _jsx(_components.code, { children: "Referer" }), _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#verificando-o-cabeçalho-referer", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["O cabeçalho ", _jsx(_components.code, { children: "Referer" }), " contém a URL da página que iniciou a solicitação. Verificando o cabeçalho ", _jsx(_components.code, { children: "Referer" }), ", o servidor pode determinar se a solicitação vem de uma fonte legítima."] }), "\n", _jsxs(_components.p, { children: ["Como os ataques CSRF geralmente vêm de domínios diferentes, o cabeçalho ", _jsx(_components.code, { children: "Referer" }), " mostrará o nome de domínio do atacante. Verificando se o ", _jsx(_components.code, { children: "Referer" }), " é o valor esperado, solicitações de fontes desconhecidas podem ser bloqueadas."] }), "\n", _jsx(_components.p, { children: "No entanto, vale a pena notar que este método não é totalmente confiável, pois alguns navegadores podem não enviar o cabeçalho Referer, e os usuários podem desabilitar o cabeçalho Referer por meio de configurações do navegador ou plugins." }), "\n", _jsx(_components.p, { children: "Exemplo de implementação:" }), "\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: "usando-o-atributo-de-cookie-samesite", children: ["Usando o atributo de cookie ", _jsx(_components.code, { children: "SameSite" }), _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#usando-o-atributo-de-cookie-samesite", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "SameSite" }), " é um atributo de cookie usado para controlar se os cookies são enviados com solicitações de sites cruzados. Tem três valores possíveis:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Strict" }), ": Cookies são enviados apenas em solicitações de mesma origem."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Lax" }), ": Cookies são enviados em solicitações de mesma origem e navegação de nível superior."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "None" }), ": Cookies são enviados em todas as solicitações de sites cruzados (deve ser usado com o atributo ", _jsx(_components.code, { children: "Secure" }), ")."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Quando ", _jsx(_components.code, { children: "SameSite" }), " é definido como ", _jsx(_components.code, { children: "Strict" }), ", ele pode impedir completamente que sites de terceiros enviem cookies, assim efetivamente prevenindo ataques CSRF.\nSe ", _jsx(_components.code, { children: "SameSite" }), " for definido como ", _jsx(_components.code, { children: "Lax" }), ", ele protege operações sensíveis, permitindo ao mesmo tempo alguns casos de uso cross-site comuns (como entrar em um site a partir de links externos)."] }), "\n", _jsx(_components.p, { children: "Exemplo de implementação:" }), "\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: "usando-cabeçalhos-de-solicitação-personalizados", children: ["Usando cabeçalhos de solicitação personalizados", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#usando-cabeçalhos-de-solicitação-personalizados", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Para solicitações AJAX, cabeçalhos de solicitação personalizados podem ser adicionados. Devido às restrições da política de mesma origem, os atacantes não podem definir cabeçalhos personalizados em solicitações cross-origin. O servidor pode verificar a presença deste cabeçalho personalizado para verificar a legitimidade da solicitação." }), "\n", _jsx(_components.p, { children: "Exemplo de implementação:" }), "\n", _jsx(_components.p, { children: "No 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: "No lado do 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 // Lidar com solicitação AJAX\n } else {\n // Lidar com solicitação não AJAX\n }\n next();\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "verificação-de-cookies-duplos", children: ["Verificação de cookies duplos", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#verificação-de-cookies-duplos", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "A verificação de cookies duplos é uma técnica eficaz de defesa contra CSRF. Seu princípio central é que o servidor gera um token aleatório, define-o tanto como um cookie quanto o incorpora na página (geralmente como um campo de formulário oculto). Quando o navegador envia uma solicitação, ele automaticamente inclui o cookie, enquanto o JavaScript da página envia o token como um parâmetro de solicitação. O servidor então verifica se o token no cookie corresponde ao token nos parâmetros de solicitação." }), "\n", _jsx(_components.p, { children: "Embora os atacantes possam incluir o cookie do site alvo em solicitações cross-site, eles não podem ler ou modificar o valor do cookie, nem acessar ou modificar o valor do token na página. Exigindo que a solicitação inclua tokens tanto do cookie quanto dos parâmetros, garante que a solicitação venha de uma fonte com permissão para ler o cookie, assim defendendo efetivamente contra ataques CSRF." }), "\n", _jsxs(_components.h3, { id: "usando-re-autenticação-para-operações-sensíveis", children: ["Usando re-autenticação para operações sensíveis", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#usando-re-autenticação-para-operações-sensíveis", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Para operações particularmente sensíveis (como mudar senhas ou fazer transferências grandes), os usuários podem ser obrigados a re-autenticar.\nIsso fornece aos usuários um ponto de verificação de segurança adicional. Mesmo se um usuário iniciar com sucesso um ataque CSRF, ele não poderá passar pela etapa de re-autenticação." }), "\n", _jsx(_components.p, { children: "Sugestões de implementação:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Antes de realizar operações sensíveis, redirecione para uma página de autenticação separada." }), "\n", _jsx(_components.li, { children: "Nesta página, exija que o usuário insira sua senha ou outras informações de verificação de identidade." }), "\n", _jsx(_components.li, { children: "Após a verificação ser aprovada, gere um token de uso único e use este token nas operações sensíveis subsequentes." }), "\n"] }), "\n", _jsxs(_components.h2, { id: "resumo", children: ["Resumo", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#resumo", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Através desta discussão aprofundada, esperamos que agora você tenha uma compreensão mais abrangente dos ataques CSRF.\nNão só aprendemos como o CSRF funciona, mas também exploramos várias medidas de defesa eficazes. Todos esses métodos podem efetivamente aumentar a segurança das aplicações web." }), "\n", _jsx(_components.p, { children: "Espero que este conhecimento ajude você a lidar melhor com questões relacionadas a CSRF em seu desenvolvimento diário e construir aplicações web mais 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."); }