Adicionando segurança ao Nuxt 3

Escrito por

26 de janeiro de 2023

0 minutos de leitura

O que é Nuxt?

Nuxt é um framework web intuitivo que permite criar seu próximo aplicativo Vue.js com confiança. É um framework de código aberto, licenciado sob MIT, que torna o desenvolvimento web simples e poderoso. Recomendo muito que você acesse o site oficial para começar.

Sobre segurança na web

As aplicações web ficam cada vez mais complexas. Elas podem armazenar dados confidenciais ou processar informações de usuários em tempo real. Para lidar com isso de forma eficaz, os desenvolvedores precisam implementar camadas de segurança. Isso pode ser feito com controles de segurança, como limitadores de taxa, e com o uso de pacotes de código aberto que ajudam a proteger sua aplicação.

Sobre o módulo nuxt-security

Neste artigo, quero apresentar o novo módulo Nuxt que criei recentemente para ajudar você a desenvolver aplicações Nuxt mais seguras — seja um blog simples ou uma loja virtual complexa. Vale lembrar que esse módulo não vai resolver todos os seus problemas de segurança. O principal objetivo é ajudar você a criar aplicações seguras e oferecer uma maneira fácil de implementar camadas de segurança no seu projeto.

Antes de começar, confira o módulo no GitHub e a documentação. Atualmente, o módulo nuxt-security se baseia em dois aspectos principais: o OWASP Top 10 para Node.js e o Helmet.js.

Com o nuxt-security, você terá funções de middleware que definem os mesmos cabeçalhos de segurança HTTP usados pelo HelmetJS, além de funções de middleware personalizadas baseadas nas recomendações da OWASP.

Veja alguns exemplos de códigos de status HTTP retornados para solicitações, com base na implementação de controles de segurança em uma aplicação Nuxt:

429 muitas solicitações - Ocorre quando há solicitações demais provenientes de um mesmo endereço IP (proteção contra ataques DoS, ou negação de serviço).
413 entidade da solicitação muito grande - O corpo da solicitação (normal ou de arquivo) é grande demais para ser processado — uma proteção contra ataques que tentam esgotar a memória do servidor.
Cabeçalho `X-Powered-By` oculto. Geralmente, revelar a tecnologia usada para criar uma aplicação é considerado uma prática inadequada. Por isso, esse módulo oculta completamente esse cabeçalho.
400 solicitação inválida - Validador de XSS para solicitações GET e POST que descarta aquelas que contêm código perigoso.
Manipulador de CORS, semelhante a middlewares populares do Express.js.
405 método não permitido - Restritor de métodos HTTP que permite limitar quais métodos HTTP podem ser aceitos.
Uma implementação de autenticação básica para proteger sua aplicação contra acessos não autorizados.

Os cabeçalhos de segurança do Helmet.js terão a seguinte estrutura:

1Content-Security-Policy: default-src 'self';base-uri 'self';font-src 'self' https: data:;form-action 'self';frame-ancestors 'self';img-src 'self' data:;object-src 'none';script-src 'self';script-src-attr 'none';style-src 'self' https: 'unsafe-inline';upgrade-insecure-requests
2Cross-Origin-Embedder-Policy: require-corp
3Cross-Origin-Opener-Policy: same-origin
4Cross-Origin-Resource-Policy: same-origin
5Origin-Agent-Cluster: ?1
6Referrer-Policy: no-referrer
7Strict-Transport-Security: max-age=15552000; includeSubDomains
8X-Content-Type-Options: nosniff
9X-DNS-Prefetch-Control: off
10X-Download-Options: noopen
11X-Frame-Options: SAMEORIGIN
12X-Permitted-Cross-Domain-Policies: none
13X-XSS-Protection: 0

Desenvolvi este módulo pensando em extensibilidade e personalização. Assim, você pode adaptar a configuração de segurança do Nuxt às necessidades da sua aplicação, por exemplo:

desativar cabeçalhos ou middlewares indesejados
configurar middlewares para funcionar apenas em determinadas rotas
alterar os valores dos middlewares

Na documentação do módulo, você também encontrará seções com boas práticas, nas quais poderá saber mais sobre as próximas etapas para deixar sua aplicação mais segura.

Como usar o módulo nuxt-security

Adicionar `nuxt-security` à sua aplicação Nuxt 3 é relativamente simples. O módulo não exige configuração quando usado com os valores padrão e recomendados para os middlewares, mas você pode experimentar outros valores para atender melhor às necessidades do seu projeto.

Para usar o nuxt-security na sua aplicação, primeiro precisamos instalá-lo com o gerenciador de pacotes de sua preferência:

1# if you use yarn:
2yarn add nuxt-security
3
4# if you use npm:
5npm i nuxt-security

Em seguida, vamos adicioná-lo ao array modules em `nuxt.config.ts`:

1{
2  modules: [
3    "nuxt-security",
4  ],
5}

Pronto! Os cabeçalhos de segurança HTTP do Helmet e as funções de middleware estão ativados e ajudarão a deixar sua aplicação mais segura.

Nos bastidores, este módulo registra vários middlewares de segurança e recomendações para você. Para saber mais sobre essas funções, confira o Limitador de tamanho de solicitação e os outros middlewares desta seção.

Se quiser personalizar as funções de segurança padrão, você pode fazer isso da seguinte forma:

1{
modules: [
  "nuxt-security",
],
5​​  security: {
  rateLimiter: {
    value: {
      tokensPerInterval: 2,
      interval: "day",
    },
    route: '/my-custom-route',
  }
}
14}

Isso substituirá a configuração padrão do middleware de segurança, fazendo com que o limitador de taxa bloqueie determinados endereços IP após apenas 2 solicitações e seja reiniciado após um dia. No entanto, isso só funcionará em uma rota específica. Para aplicar a configuração globalmente, basta passar uma string vazia — é assim que o Nuxt registra middlewares globais.

Para conferir mais opções de personalização, acesse a página de configuração.

Resumo

Muito bem! Você adicionou controles de segurança à sua aplicação, que agora está um pouco mais protegida. Mas lembre-se: este é apenas o começo da sua jornada de segurança. Para saber mais, confira o vídeo do YouTube abaixo.

Se tiver recomendações ou solicitações, fique à vontade para entrar em contato comigo.