Segurança em Vue.js: protegendo suas aplicações
Práticas técnicas, diretrizes estruturadas e implementações para SPAs seguras com Vue 3
1. Autenticação, Sessões e Armazenamento de Token
Nesta seção compartilho a minha abordagem prática para autenticação em aplicações Vue.js, com foco em manter
a segurança do lado do servidor enquanto o cliente persiste a experiência do usuário. Em produção, eu
valorizo cookies HttpOnly para tokens de sessão, uso SameSite adequado e, quando possível, OAuth2/OIDC com PKCE.
- Preferência por tokens em cookies HttpOnly e seguros para evitar exposição via XSS.
- Utilização de “credentials: include” em chamadas fetch/axios para enviar cookies entre origens.
- Rotação de tokens e refresh tokens via endpoints protegidos, com validação no servidor a cada requisição.
- Habilitar HSTS, TLS estrito e políticas de origem confiáveis (CSP/CSRF adequados) para reduzir superfícies de ataque.
O fluxo típico envolve:
- Login no back-end que cria um HttpOnly cookie de sessão.
- Chamadas subsequentes autenticadas com Cookies enviados automaticamente pelo navegador.
- Endereços protegidos que retornam 401/403 se a sessão não for válida; o cliente redireciona para login.
2. Proteção contra XSS e Sanitização de Conteúdo
O Vue oferece escaping automático por padrão, mas sempre que você precisar renderizar conteúdo vindo de usuários,
utilize um saneador de HTML e tenha cuidado com índice de atributos dinâmicos. Evito usar v-html com conteúdo
não confiável e recomendo sanear no servidor ou na camada de rendering com DOMPurify.
- Evite v-html para dados sensíveis; se necessário, passe pelo saneador antes de renderizar.
- Habilite Content Security Policy para reduzir a possibilidade de injeção de scripts.
- Valide e escape entradas no servidor, garantindo que apenas conteúdo autorizado seja aceito.
Exemplo de prática segura com DOMPurify:
// Exemplo de uso simples com DOMPurify no setup de um componente
import DOMPurify from 'dompurify';
import { ref, computed } from 'vue';
export default {
setup() {
const rawContent = ref('
');
const sanitizedContent = computed(() =>
DOMPurify.sanitize(rawContent.value)
);
return { sanitizedContent };
}
}
3. Segurança de API, Autorização e Proteção de Dados
Como SPA, você depende de APIs seguras. A estratégia envolve autenticação consistente, autorização baseada
em claims, CORS controlado e CSRF quando cookies são usados. Eu sigo estas práticas:
- Use OAuth 2.0 / OIDC com PKCE para fluxos de autenticação em SPAs.
- Armazene tokens em cookies HttpOnly ou utilize sessões gerenciadas pelo back-end com validação por endpoint.
- Proteja endpoints com CSRF tokens (ou depender de SameSite=strict para cookies), auditando chamadas sensíveis.
- Configure CORS de forma restrita, permitindo apenas origens confiáveis e credenciais quando necessário.
Prática comum de chamada de API com cookies incluídos:
- Ao fazer requisições, use credentials: ‘include’ para enviar cookies de autenticação.
- Valide a sessão no back-end para cada recurso sensível, retornando 401/403 quando necessário.
4. Práticas de Configuração, Build e Operação
Segurança também é sobre como você configura, compila e opera a aplicação. As minhas diretrizes:
- Conteúdos de CSP bem definidos para reduzir a injeção de scripts de terceiros.
- Headers de segurança do servidor: Strict-Transport-Security, X-Content-Type-Options, X-Frame-Options, etc.
- Desativar devtools em produção (apenas ferramentas de desenvolvimento, não acessíveis ao usuário final).
- Manter dependências atualizadas e rodar auditorias de segurança com ferramentas de escaneamento.
- Gerenciar segredos via variáveis de ambiente e não os manter no código fonte.
Observação de implementação: em produção, protejo com CSP e Headers adequados, e deixo o front-end menos permissivo para recursos externos.
Bloco de código relevante
Exemplo de guard de rota com Vue Router 4 que valida a sessão via API com cookies HttpOnly:
// Exemplo de guard de rota em Vue Router 4
import { createRouter, createWebHistory } from 'vue-router';
import Login from './views/Login.vue';
import Home from './views/Home.vue';
const routes = [
{ path: '/', component: Home, meta: { requiresAuth: true } },
{ path: '/login', name: 'Login', component: Login },
];
const router = createRouter({
history: createWebHistory(),
routes,
});
router.beforeEach(async (to, from, next) => {
if (to.meta.requiresAuth) {
try {
// Valida a sessão usando cookies HttpOnly enviados automaticamente
const res = await fetch('/api/auth/me', { credentials: 'include' });
if (res.ok) {
next();
} else {
next({ name: 'Login', query: { redirect: to.fullPath } });
}
} catch {
next({ name: 'Login', query: { redirect: to.fullPath } });
}
} else {
next();
}
});
export default router;
Gostou deste guia? Explore mais conteúdos avançados sobre segurança em aplicações front-end e Vue.js.
Leia também:
Guia de vulnerabilidades em Vue •
Boas práticas de autenticação em SPAs •
Protegendo suas APIs com OAuth
Sou Apaixonado pela programação e estou trilhando o caminho de ter cada diz mais conhecimento e trazer toda minha experiência vinda do Design para a programação resultando em layouts incríveis e idéias inovadoras! Conecte-se Comigo!