10 boas práticas de segurança para React

Quer saber as melhores maneiras de proteger seu app React? Você chegou ao lugar certo! Criamos esta lista de verificação de boas práticas de segurança para ajudar você e sua equipe a encontrar e corrigir problemas de segurança em suas aplicações React. Também vamos mostrar como testar automaticamente seu código React em busca de problemas de segurança e corrigi-los de forma automática.

Vamos lá!

Baixe o guia rápido.

10 boas práticas de segurança para React

1. Use a proteção padrão contra XSS com vinculação de dados

2. Fique atento a URLs perigosas e à injeção de scripts por meio de URLs

3. Sanitize e renderize HTML

4. Evite o acesso direto ao DOM

5. Proteja a renderização no servidor do React

6. Verifique se há vulnerabilidades conhecidas nas dependências

7. Evite ataques de injeção de JSON

8. Use versões do React sem vulnerabilidades

9. Use configurações de linter

10. Evite código perigoso em bibliotecas

1. Use a proteção padrão do React contra XSS com vinculação de dados

O React é vulnerável a cross-site scripting (XSS)?

Por padrão, o React é desenvolvido para não ser vulnerável, mas há opções que os desenvolvedores podem ativar e que podem deixá-lo vulnerável a cross-site scripting.

Como posso evitar ataques de XSS no React?

Use a vinculação de dados padrão com chaves ({}) para que o React escape automaticamente dos valores e proteja contra ataques de XSS. Essa proteção só ocorre ao renderizar textContent, não ao renderizar atributos HTML.

Use a sintaxe de vinculação de dados JSX ({}) para inserir dados nos seus elementos.

Faça assim:

<div>{data}</div>

Evite valores dinâmicos de atributos sem validação personalizada.

Não faça assim:

<form action={data}>...

2. Fique atento a URLs perigosas e à injeção de scripts por meio de URLs

As URLs podem conter conteúdo de script dinâmico por meio de URLs com o protocolo javascript:. Valide os links para garantir que usem http: ou https: e evitar a injeção de scripts por meio de URLs javascript:. Para validar as URLs, use uma função nativa de análise de URL e compare a propriedade de protocolo analisada com uma lista de permissões.

Faça assim:

function validateURL(url) {
  const parsed = new URL(url)
  return ['https:', 'http:'].includes(parsed.protocol)
}

<a href={validateURL(url) ? url : ''}>Click here!</a>

Não faça assim:

<a href={attackerControlled}>Click here!</a>

3. Sanitize e renderize HTML

É possível inserir HTML diretamente em nós do DOM renderizados usando dangerouslySetInnerHTML. Todo conteúdo inserido dessa forma precisa ser sanitizado antes. Use uma biblioteca de sanitização, como dompurify, em qualquer valor antes de inseri-lo na propriedade dangerouslySetInnerHTML.

Use dompurify ao inserir HTML no DOM.

Faça assim:

import purify from "dompurify";
<div dangerouslySetInnerHTML={{ __html:purify.sanitize(data) }} />

4. Evite o acesso direto ao DOM

Evite sempre acessar o DOM para inserir conteúdo diretamente nos nós do DOM. Mas, se precisar fazer isso, use dangerouslySetInnerHTML para inserir HTML e sanitize-o com dompurify antes da inserção.

O que é dangerouslySetInnerHTML no React?

dangerouslySetInnerHTML é uma propriedade que permite aos desenvolvedores inserir conteúdo HTML diretamente em um elemento HTML de um app React.

Faça assim:

import purify from "dompurify";
<div dangerouslySetInnerHTML={{__html:purify.sanitize(data) }} />

Evite usar refs e findDomNode() para acessar elementos renderizados do DOM e inserir conteúdo diretamente por meio de innerHTML e propriedades ou métodos semelhantes.

Não faça assim:

this.myRef.current.innerHTML = attackerControlledValue;

5. Proteja a renderização no servidor do React

A vinculação de dados faz o escape automático do conteúdo ao usar funções de renderização no servidor, como ReactDOMServer.renderToString() e ReactDOMServer.renderToStaticMarkup().

Evite concatenar strings à saída de renderToStaticMarkup() antes de enviá-las ao cliente para hidratação.

Para evitar XSS, não concatene dados não sanitizados com a saída de renderToStaticMarkup().

Faça assim:

app.get("/", function (req, res) {
  return res.send(
    ReactDOMServer.renderToStaticMarkup(
      React.createElement("h1", null, "Hello World!")
    ) + otherData
  );
});

6. Verifique se há vulnerabilidades conhecidas nas dependências

Algumas versões de componentes de terceiros podem conter problemas de segurança em JavaScript. Sempre verifique suas dependências com uma ferramenta de análise de composição de software (SCA) antes de adicioná-las a um projeto e atualize-as quando uma versão mais recente estiver disponível.

Extensão do Snyk para VS Code

Ao desenvolver uma aplicação React no VS Code, você pode usar a extensão do Snyk para receber alertas sobre vulnerabilidades conhecidas no seu projeto. Você verá esses alertas por meio de linhas onduladas diretamente no arquivo package.json, no painel de extensões do Snyk e no painel de problemas do VS Code. Assim, você não precisa sair do seu ambiente de desenvolvimento para descobrir essas vulnerabilidades: tudo fica ao seu alcance.

App do Snyk (https://app.snyk.io)

Abrir um PR para corrigir uma vulnerabilidade no React é simples: bastam três cliques. Primeiro, identifique no app web do Snyk a vulnerabilidade que você quer corrigir. Em seguida, clique em Corrigir esta vulnerabilidade (ou Corrigir estas vulnerabilidades, se houver mais de uma). Saiba mais sobre o produto Snyk aqui.

Em seguida, você receberá uma solicitação para confirmar a abertura de um pull request (PR) para corrigir a vulnerabilidade usando o Snyk.

Depois da confirmação, você será direcionado ao PR aberto pelo Snyk para revisar e testar se o app continua funcionando como esperado com as alterações solicitadas antes de fazer o merge.

Snyk CLI

Você também pode usar a CLI gratuita do Snyk para verificar vulnerabilidades. Corrija vulnerabilidades automaticamente com o Snyk integrando-o ao seu sistema de gerenciamento de código-fonte para receber correções automáticas:

$ npx snyk test

7. Evite ataques de injeção de JSON

É comum enviar dados JSON junto com páginas React renderizadas no servidor. Sempre escape os caracteres < usando um valor inofensivo para evitar ataques de injeção.

Sempre substitua os caracteres especiais de HTML nos valores JSON por caracteres equivalentes inofensivos.

Faça assim:

window.__PRELOADED_STATE__ =   ${JSON.stringify(preloadedState).replace( /</g, '\\u003c')}

8. Use versões do React sem vulnerabilidades

A biblioteca React já teve algumas vulnerabilidades de alta gravidade, por isso é recomendável manter-se em dia com a versão mais recente.

Evite versões vulneráveis de react e react-dom. Para saber quais são as versões mais recentes, use npm outdated e confirme se você está usando a versão atual.

9. Use configurações de linter

Instale configurações e plugins de linter que detectem automaticamente problemas de segurança no seu código e ofereçam recomendações para corrigi-los.

Use a configuração de segurança do ESLint para React para detectar problemas de segurança no nosso código.

Configure um hook de pré-commit que falhe quando detectar problemas de segurança no linter, usando uma biblioteca como husky.

Use o Snyk para atualizar automaticamente para novas versões quando houver vulnerabilidades nas versões que você está usando.

10. Evite código perigoso em bibliotecas

O código de bibliotecas costuma ser usado para realizar operações perigosas, como inserir HTML diretamente no DOM. Revise o código das bibliotecas manualmente ou com linters para detectar usos inseguros dos mecanismos de segurança do React.

Evite bibliotecas que usem dangerouslySetInnerHTML, innerHTML, URLs não validadas ou outros padrões inseguros. Use linters de segurança na pasta node_modules para detectar padrões inseguros no código das suas bibliotecas.

Baixe o guia de segurança do React

Baixe este prático PDF e use-o como uma lista de verificação para avaliar a segurança da sua aplicação React.