Segurança em Vue.js: guia definitivo para proteger suas aplicações

Segurança em Vue.js: guia definitivo para proteger suas aplicações





Segurança em Vue.js: protegendo suas aplicações


Autenticação e Sessões

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.
XSS e Sanitização

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 };
  }
}
        

API e Autorização

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.
Configuração e Build

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

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

© 2026 yurideveloper.com — Conteúdos técnicos de qualidade para desenvolvedores.