Como implantar um aplicativo Jamstack com Vue.js no Netlify e receber atualizações de segurança automáticas do Snyk

Quer aprender conceitos de segurança front-end e também descobrir como implantar um site estático no Netlify? Quer saber como detectar e corrigir automaticamente dependências JavaScript vulneráveis?

Vamos começar.

Neste artigo, vamos usar:

• Netlify - uma plataforma para criar e implantar seus sites instantaneamente em uma rede global.

• Snyk.io - uma plataforma de segurança que prioriza os desenvolvedores e protege bibliotecas open source, contêineres e aplicações nativas da nuvem.

• Vue.js - um framework progressivo de JavaScript.

• Vuetify - um framework de componentes de UI com Material Design para aplicativos Vue.js.

Uma ótima maneira de aprender novos conceitos é colocando a mão na massa. E que forma melhor de aprender sobre alguns tópicos de segurança front-end do que jogar Bingo?

Então, é isso: vamos implantar um jogo de Bingo de segurança front-end. Como ganhar? As regras são simples: marque todas as práticas que sua equipe ou seus projetos open source seguem. Marcou todas? Você ganhou!

Veja uma captura de tela do Bingo de segurança front-end em ação.

Implantação no Netlify

Para disponibilizar o site estático, vamos implantá-lo no Netlify, uma das ferramentas preferidas e otimizadas para hospedar sites Jamstack.

Com o Netlify, você pode implantar um site de duas maneiras:

1. Conecte o repositório de um projeto pela interface do Netlify. Essa opção é útil se você quiser usar um modelo de implantação contínua, no qual o Netlify acompanha as alterações feitas no controle de versão e sempre implanta o site quando há mudanças. Nesse caso, a configuração do Netlify executa a ferramenta de build escolhida para criar o site estático e, em seguida, o Netlify o implanta.

2. Use a CLI do Netlify para implantar o site diretamente pela linha de comando. É uma maneira fácil e acessível de começar, pois você pode iniciar uma implantação rapidamente, direto do espaço de trabalho do projeto na sua máquina de desenvolvimento.

Vamos usar a primeira opção e implantar o jogo Bingo de segurança front-end diretamente de um repositório.

Para começar, faça login ou crie uma conta no Netlify:

Em seguida, importe o repositório do projeto do seu site pelo GitHub, GitLab ou Bitbucket.

No meu caso, o repositório está no GitHub. O processo é:

1. Clique em GitHub

2. Autorize o aplicativo Netlify a acessar sua conta do GitHub

3. Escolha o repositório do site na lista

Se aparecer a mensagem No repositories found, clique em Configure Netlify on GitHub e instale o aplicativo Netlify no perfil da conta do GitHub desejada. Depois disso, você poderá instalá-lo em todos os repositórios ou escolher especificamente o repositório do site.

Ao concluir, a tela deverá ficar assim. Aí, podemos começar a fazer implantações e conectar alguns plugins de build:

Clique na entrada do site chamada frontend-security-bingo para concluir a configuração e, em seguida, clique no botão Deploy:

O Netlify começará clonando o repositório, instalando as dependências e fazendo o build do site. Quando terminar, ele fornecerá um URL temporário para o site, que você poderá personalizar.

Em poucos segundos, nosso jogo Bingo de segurança front-end fica disponível em https://frontend-security-bingo.netlify.app.

Parece que terminamos, certo?

Não exatamente. Ainda falta mais uma coisa.

Uma vulnerabilidade de segurança JavaScript no meu site

É um site estático e pequeno. Como assim, ele pode ter vulnerabilidades de segurança JavaScript?

Nem estou usando tantas dependências. Na verdade, meu projeto tem apenas duas dependências de produção. Este é o package.json do site, que mostra a estrutura inicial criada pelo CLI do Vue.js quando iniciei o projeto:

Parece que o Vuln Cost (uma extensão do VS Code que uso) está me avisando que, na linha 12, há uma dependência no meu projeto com uma vulnerabilidade de segurança.

Você costuma ignorar esses alertas? Sei que fazer a triagem de vulnerabilidades pode parecer complicado, mas, ao adotar ferramentas e fluxos de trabalho mais adequados ao seu desenvolvimento, tudo fica mais fácil. Com a Snyk, você conta com:

• Banco de dados de vulnerabilidades - todos os usuários da Snyk, do plano gratuito ao pago, têm acesso ao banco de dados de inteligência sobre vulnerabilidades da Snyk. O banco é mantido por uma equipe experiente de pesquisadores de segurança da Snyk, que garante ampla cobertura de vulnerabilidades e poucos falsos positivos. Ele inclui 370% mais vulnerabilidades do que os conjuntos de dados CVE.

• Monitoramento - As análises pontuais são uma ótima forma de começar a proteger seus projetos open source, mas aplicações reais exigem monitoramento contínuo para garantir que novas vulnerabilidades de segurança gerem alertas e, melhor ainda, correções automáticas em pull requests. Assim, você corrige as vulnerabilidades com um merge.

Ao expandir o erro em linha do Vuln Cost, vemos que é uma vulnerabilidade de gravidade média que afeta o framework de UI Vuetify para Vue.js. Ignorá-la não é uma boa ideia.

Topa um desafio rápido?

O site ativo em https://frontend-security-bingo.netlify.app/ contém essa vulnerabilidade JavaScript não corrigida do Vuetify. Você consegue encontrá-la?

Dica: é uma vulnerabilidade de Cross-site Scripting (XSS) em JavaScript que afeta versões do Vuetify anteriores à 2.1.9. Saiba mais na Snyk Vulnerability Database. Acesse os recursos de segurança da Snyk para entender melhor as vulnerabilidades de Cross-site Scripting e descobrir como elas são comuns até mesmo em aplicações web desenvolvidas em 2020.

Vou explicar como funciona essa vulnerabilidade.

Na parte inferior do site Bingo de segurança front-end, você encontra uma caixa para compartilhar o site pelo Twitter. O campo de texto permite personalizar o tweet antes de publicá-lo:

Essa caixa de texto usa o slot **error-messages** do Vuetify para exibir uma mensagem de erro

<template>
 <div>
   <v-text-field
     :counter="true"
     v-model="shareTwitterText"
     label="tweet"
     required
     :error-messages="tweetErrors"
   ></v-text-field>
   <v-btn
     color="blue"
     outlined
     large
     @click="shareTwitter"
     class="blue--text text--darken-1 font-weight-bold"
     full-width
   >Share on Twitter</v-btn>
 </div>
</template>

No código do componente, configuramos a lógica de tratamento de erros usando o array **tweetErrors** e o método **shareTwitter()**.

<script>
export default {
 name: "SocialShare",
 data: () => {
   return {
     shareTwitterText:
       "Learn about Frontend Security Bingo: https://goo.gl #FrontendSecurity #WebDev",
     tweetErrors: []
   };
 },
 methods: {
   shareTwitter() {
     if (this.shareTwitterText.length > 280) {
       this.tweetErrors.push(
         `Your text is longer than 280 characters: ${this.shareTwitterText}`
       );
       return true;
     } else {
       this.tweetErrors = [];
       const tweetMsg = encodeURIComponent(this.shareTwitterText);
       const tweetUrl = `https://twitter.com/intent/tweet?text=${tweetMsg}&via=liran_tal`;
       window.open(tweetUrl, "_blank");
     }
   }
 }
};
</script>

Se o texto tiver mais de 280 caracteres, definimos o erro. Veja como fica:

E se o texto do tweet incluísse elementos HTML com JavaScript?

Inclua o texto a seguir no tweet e clique no botão de compartilhamento:

<img src=x onError=”alert(1)” />

Apareceu o alerta?

Parabéns. Você é um hacker! :-)

Mas isso não é nada bom se você não souber da vulnerabilidade. Como explica a página da vulnerabilidade de XSS do Vuetify:

As versões afetadas deste pacote são vulneráveis a Cross-site Scripting (XSS) por meio do array error-messages. Observação: se você não usa HTML nas propriedades rules, messages, hint, success-messages ou error-messages, não é afetado por esse problema.

É uma vulnerabilidade de segurança conhecida publicamente, o que significa que invasores podem encontrar essa informação com facilidade e usá-la para atacar você.

Como implantar sites e manter a segurança em dia?

Que bom que você perguntou!

Você pode — e deve — executar análises de segurança de terceiros antes de implantar seu site. E que maneira mais fácil de fazer isso do que usar um plugin da Snyk diretamente no build do Netlify?

O ecossistema de plugins do Netlify permite conectar plugins que executam ações adicionais e ampliam seu processo de build.

Vamos procurar e adicionar o plugin da Snyk ao nosso site:

Para obter os resultados de segurança, precisaremos de um token de API de desenvolvedor. Então, vamos acessar Snyk.io para gerar um. Na página inicial, clique no botão QUICK START no canto superior direito e faça login com a conta de sua preferência. Recomendo usar o GitHub para que a Snyk também possa enviar automaticamente pull requests com correções de segurança e atualizações de dependências desatualizadas.

Você encontrará o token de API na página geral de Configurações da sua conta:

Depois de obter o token de API da Snyk, podemos adicioná-lo como variável de ambiente ao processo de build do Netlify. No Netlify, você encontra as configurações de build na página geral de Configurações do site, no menu Build & deploy da barra lateral esquerda:

Clique em Edit variables e adicione uma nova variável chamada SNYK_TOKEN. No campo de valor, insira o próprio token de API.

Pronto!

Agora, qualquer vulnerabilidade de segurança detectada nas dependências de pacotes necessárias para fazer o build do site fará o build falhar — assim, você poderá corrigi-la rapidamente antes de implantar. A Snyk dará orientações claras sobre como corrigir as vulnerabilidades e quais pacotes precisam ser atualizados.

Vamos ver como um build com falha aparece no meu projeto. Primeiro, o status geral da implantação mostra que o build falhou por causa do plugin e informa o motivo da falha:

Ao rolar a página até os logs, vemos claramente o erro apontado pelo plugin da Snyk: ele impede a implantação deste build do site devido a uma vulnerabilidade de segurança de Cross-site Scripting no vuetify:

Graças ao plugin da Snyk, o processo de build do Netlify foi interrompido. Ele encontrou a vulnerabilidade de segurança exata no Vuetify que usamos para injetar código JavaScript malicioso por meio de uma vulnerabilidade de Cross-site Scripting, causada pela versão vulnerável do Vuetify na árvore de dependências.

E se surgir uma nova vulnerabilidade de segurança em uma dependência que você usa, mas já faz muito tempo que não faz o build do site? Não se preocupe, a Snyk cuida disso! Além de executar a cada build, o plugin da Snyk também monitora o projeto na plataforma da Snyk, realizando testes diários. Se uma nova vulnerabilidade de segurança afetar uma das suas dependências, você receberá uma notificação.

Qual é o próximo passo?

• Se você usa o Vuetify, analise suas dependências em busca de vulnerabilidades de segurança e corrija-as. Dica: ao conectar seu repositório à Snyk, ela abrirá automaticamente pull requests para corrigi-las e monitorará novas vulnerabilidades — caso você não faça análises ou implantações regularmente por conta própria.

• Comece a usar o plugin de build do Netlify da Snyk

• Gere um token de API na Snyk e adicione seus repositórios para começar a monitorá-los e corrigi-los