"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-o-csrf-funciona", "hProperties": { "id": "como-o-csrf-funciona" } }, "depth": 2, "value": "Como o CSRF funciona" }, { "data": { "id": "política-de-mesmo-origem-do-navegador", "hProperties": { "id": "política-de-mesmo-origem-do-navegador" } }, "depth": 3, "value": "Política de mesmo origem do navegador" }, { "data": { "id": "mecanismo-automático-de-envio-de-cookies", "hProperties": { "id": "mecanismo-automático-de-envio-de-cookies" } }, "depth": 3, "value": "Mecanismo automático de envio de cookies" }, { "data": { "id": "passos-de-ataque-csrf", "hProperties": { "id": "passos-de-ataque-csrf" } }, "depth": 3, "value": "Passos de 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": "verificação-do-cabeçalho-referer", "hProperties": { "id": "verificação-do-cabeçalho-referer" } }, "depth": 3, "value": "Verificação do cabeçalho Referer" }, { "data": { "id": "usar-o-atributo-samesite-cookie", "hProperties": { "id": "usar-o-atributo-samesite-cookie" } }, "depth": 3, "value": "Usar o atributo SameSite cookie" }, { "data": { "id": "usar-cabeçalhos-de-pedido-personalizados", "hProperties": { "id": "usar-cabeçalhos-de-pedido-personalizados" } }, "depth": 3, "value": "Usar cabeçalhos de pedido personalizados" }, { "data": { "id": "verificação-dupla-de-cookies", "hProperties": { "id": "verificação-dupla-de-cookies" } }, "depth": 3, "value": "Verificação dupla de cookies" }, { "data": { "id": "usar-re-autenticação-para-operações-sensíveis", "hProperties": { "id": "usar-re-autenticação-para-operações-sensíveis" } }, "depth": 3, "value": "Usar re-autenticação para operações sensíveis" }, { "data": { "id": "resumo", "hProperties": { "id": "resumo" } }, "depth": 2, "value": "Resumo" }]; const readingTime = { "minutes": 6, "words": 1864, "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: "Quando trabalhamos em desenvolvimento web, especialmente com cookies, ouvimos frequentemente frases como \"esta configuração ajuda a prevenir CSRF\". No entanto, muitas pessoas têm apenas uma ideia vaga do que \"CSRF\" realmente significa." }), "\n", _jsx(_components.p, { children: "Hoje, vamos mergulhar profundamente no CSRF (Cross-Site Request Forgery), uma falha comum de segurança na web. Isso nos ajudará a lidar com questões relacionadas ao CSRF de forma mais eficaz." }), "\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 web onde os atacantes enganam utilizadores autenticados a realizar ações não intencionais. Em termos simples, é \"hackers fingindo ser utilizadores para realizar ações não autorizadas\"." }), "\n", _jsxs(_components.h2, { id: "como-o-csrf-funciona", children: ["Como o CSRF funciona", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#como-o-csrf-funciona", 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-mesmo-origem-do-navegador", children: ["Política de mesmo origem do navegador", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#política-de-mesmo-origem-do-navegador", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "A política de mesmo origem é uma funcionalidade 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 da 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 mesmo 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 o Cookie, IndexedDB, ou localStorage de outra origem" }), "\n", _jsx(_components.li, { children: "JavaScript de uma origem não pode enviar pedidos AJAX para outra origem (a menos que use CORS)" }), "\n"] }), "\n", _jsx(_components.p, { children: "No entanto, para manter a abertura e interoperabilidade da Web (como carregar recursos de CDNs ou enviar pedidos para APIs de terceiros para registo), a política de mesmo origem não restringe pedidos de rede entre origens:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Páginas podem enviar pedidos GET ou POST para qualquer origem (como carregar imagens ou submeter 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 utilizador clica no link ", _jsx(_components.code, { children: "https://evil.com" }), " sem fazer logout da sua conta bancária, como ele já está logado em ", _jsx(_components.code, { children: "bank.com" }), ", o navegador possui um cookie ", _jsx(_components.code, { children: "session_id" }), " válido."] }), "\n", _jsxs(_components.p, { children: ["Depois que a página maligna carrega, ela submete automaticamente o formulário oculto, enviando um pedido de transferência para ", _jsx(_components.code, { children: "https://bank.com/transfer" }), "."] }), "\n", _jsxs(_components.p, { children: ["O navegador do utilizador anexa automaticamente o cookie ", _jsx(_components.code, { children: "bank.com" }), " a este pedido. O servidor ", _jsx(_components.code, { children: "bank.com" }), " recebe o pedido, 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 comuns de defesa contra CSRF. Iremos explicar em detalhe o princípio de cada método e como ele efetivamente previne 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: "Os 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 utilizador envia um formulário, o servidor verifica a validade do token." }), "\n"] }), "\n", _jsx(_components.p, { children: "Porque o token CSRF é um valor único vinculado à sessão do utilizador, e o atacante não pode saber ou adivinhar este valor (pois é diferente para cada sessão), mesmo que o atacante engane o utilizador para enviar um pedido, o pedido será rejeitado 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 CSRF\napp.use((req, res, next) => {\n if (req.method === 'GET') {\n // Gerar novo token CSRF para cada pedido 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 de frontend:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "// Enviar pedido 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: "verificação-do-cabeçalho-referer", children: ["Verificação do cabeçalho ", _jsx(_components.code, { children: "Referer" }), _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#verificação-do-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 o pedido. Ao verificar o cabeçalho ", _jsx(_components.code, { children: "Referer" }), ", o servidor pode determinar se o pedido 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 do domínio do atacante. Ao verificar se o ", _jsx(_components.code, { children: "Referer" }), " é o valor esperado, é possível bloquear pedidos de fontes desconhecidas."] }), "\n", _jsx(_components.p, { children: "No entanto, vale notar que este método não é completamente confiável, pois alguns navegadores podem não enviar o cabeçalho Referer, e os utilizadores podem desativá-lo através das 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: "usar-o-atributo-samesite-cookie", children: ["Usar o atributo ", _jsx(_components.code, { children: "SameSite" }), " cookie", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#usar-o-atributo-samesite-cookie", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "SameSite" }), " é um atributo de cookie usado para controlar se cookies são enviados com pedidos entre sites. Possui 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 pedidos de mesmo site."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Lax" }), ": Cookies são enviados em pedidos de mesmo site e navegação de nível superior."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "None" }), ": Cookies são enviados em todos os pedidos entre sites (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 prevenir completamente que sites de terceiros enviem cookies, prevenindo assim eficazmente ataques CSRF.\nSe ", _jsx(_components.code, { children: "SameSite" }), " estiver definido como ", _jsx(_components.code, { children: "Lax" }), ", ele protege operações sensíveis enquanto permite alguns casos comuns de uso entre sites (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: "usar-cabeçalhos-de-pedido-personalizados", children: ["Usar cabeçalhos de pedido personalizados", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#usar-cabeçalhos-de-pedido-personalizados", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Para pedidos AJAX, cabeçalhos de pedido personalizados podem ser adicionados. Devido às restrições da política de mesmo origem, atacantes não podem definir cabeçalhos personalizados em pedidos entre origens. O servidor pode verificar a presença deste cabeçalho personalizado para verificar a legitimidade do pedido." }), "\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 pedido AJAX\n } else {\n // Lidar com pedido não AJAX\n }\n next();\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "verificação-dupla-de-cookies", children: ["Verificação dupla de cookies", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#verificação-dupla-de-cookies", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "A verificação dupla de cookies é uma técnica eficaz de defesa contra CSRF. O seu princípio central é que o servidor gera um token aleatório, o define como um cookie e o incorpora na página (geralmente como um campo de formulário oculto). Quando o navegador envia um pedido, ele inclui automaticamente o cookie, enquanto o JavaScript da página envia o token como um parâmetro de pedido. O servidor então verifica se o token no cookie corresponde ao token nos parâmetros do pedido." }), "\n", _jsx(_components.p, { children: "Embora atacantes possam incluir o cookie do website alvo em pedidos entre sites, eles não podem ler ou modificar o valor do cookie, nem podem acessar ou modificar o valor do token na página. Ao exigir que o pedido inclua tokens tanto do cookie quanto dos parâmetros, garante-se que o pedido venha de uma fonte com permissão para ler o cookie, defendendo assim eficazmente contra ataques CSRF." }), "\n", _jsxs(_components.h3, { id: "usar-re-autenticação-para-operações-sensíveis", children: ["Usar re-autenticação para operações sensíveis", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#usar-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 alterar senhas ou realizar grandes transferências), pode-se exigir que os utilizadores façam re-autenticação.\nIsso fornece aos utilizadores um ponto de verificação de segurança adicional. Mesmo que um utilizador inicie com sucesso um ataque CSRF, não poderá passar na 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, redirecionar para uma página de autenticação separada." }), "\n", _jsx(_components.li, { children: "Nesta página, exigir que o utilizador insira a sua senha ou outras informações de verificação de identidade." }), "\n", _jsx(_components.li, { children: "Após a verificação passar, gerar um token de uso único e usar 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 tenha uma compreensão mais abrangente dos ataques CSRF.\nNão apenas aprendemos como o CSRF funciona, mas também exploramos várias medidas eficazes de defesa. Todos estes métodos podem efetivamente aumentar a segurança das aplicações web." }), "\n", _jsx(_components.p, { children: "Esperamos que este conhecimento ajude você a lidar melhor com questões relacionadas ao CSRF no seu desenvolvimento diário e a 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."); }