DEV Community

Cover image for Boas práticas de segurança em sites React
Júlio Carneiro
Júlio Carneiro

Posted on

Boas práticas de segurança em sites React

Proteção XSS com data binding

Use o data binding com chaves {} e o React escapará automaticamente dos valores para proteger contra ataques XSS. Observe que essa proteção ocorre apenas ao renderizar textContent e não ao renderizar atributos HTML.

  • Use a sintaxe JSX {} para colocar dados em seus elementos. Ex. <div>{data}</div>.
  • Evite valores de atributos dinâmicos sem validação. Não use ...

URLs perigosas

As URLs podem conter conteúdo de script dinâmico via javascript. Valide suas URLs antes de usar.

  • Use a validação para garantir que seus links sejam http ou https e evitar injeção de script baseada em URL. Valide a URL usando uma função de análise nativa.
function validateURL(url) {
    const parsed = new URL(url)
    return ['https:', 'http:'].includes(parsed.protocol)
}
<a href={validateURL(url) ? url : ''}>This is a link!</a>
Enter fullscreen mode Exit fullscreen mode

Renderizando HTML

É possível inserir HTML diretamente nos nós do DOM, usando o dangerouslySetInnerHTML. Qualquer conteúdo inserido desta forma deve ser previamente sanitizado.

  • Use alguma lib de sanitize como a DOMPurify em quaisquer valores antes de colocá-los no dangerouslySetInnerHTML.
import purify from "dompurify";

<div dangerouslySetInnerHTML={{__html:purify.sanitize(data)}} />
Enter fullscreen mode Exit fullscreen mode

Acesso direto ao DOM

O acesso ao DOM para injetar conteúdo diretamente nos nós deve ser evitado. Use dangerouslySetInnerHTML se você precisar injetar HTML, mas primeiro deve sanitiza-lo antes, usando por exemplo o DOMPurify.

  • Evite usar refs e findDomNode() para acessar elementos do DOM, injetar conteúdo diretamente via innerHTML, propriedades e métodos semelhantes.

Server-side Rendering

O data binding fornecerá escape automático de conteúdo ao usar funções de renderização do lado do servidor, como ReactDOMServer.renderToString() e ReactDOMServer.renderToStaticMarkup().

  • Evite concatenar strings na saída de renderToString() e renderToStaticMarkup() antes de enviar as strings ao cliente para renderização.

Vulnerabilidades em dependências

Algumas versões de componentes de terceiros podem conter problemas de segurança. Verifique suas dependências e atualize quando as versões mais novas estiverem disponíveis.

  • Use uma ferramenta gratuita como o Snyk para verificar vulnerabilidades.
  • Corrija vulnerabilidades automaticamente com o Snyk integrado ao seu CI/CD para receber correções automatizadas.

$ npx snyk test


Estado JSON

É comum enviar JSON em páginas React renderizadas no lado do servidor. Sempre valide caracteres inválidos para evitar ataques de injeção.

  • Evite valores de HTML sem escape em objetos JSON.
<script>
//[https://redux.js.org/recipes/server-rendering/#security-considerations](https://redux.js.org/recipes/server-rendering/#security-considerations)
  window.PRELOADED_STATE = ${JSON.stringify(preloadedState).replace(/</g,'\\u003c')}
</script>
Enter fullscreen mode Exit fullscreen mode

Versões Vulneráveis do React

O React teve algumas vulnerabilidades de alta gravidade no passado, entao, é uma boa ideia manter-se atualizado com a versão mais recente.

  • Evite versões vulneráveis do react e react-dom, verificando se você está na versão mais recente usando o npm upgrade.
  • Use o Snyk para atualizar automaticamente para novas versões quando existirem vulnerabilidades nas versões que você está usando.

Linters

Instale configurações e plug-ins de linters que detectarão automaticamente problemas de segurança em seu código e oferecerão dicas de correção.

  • Use a configuração de segurança para detectar problemas em nossa base de código (Instalar o plugin do Snyk no VSCode).
  • Configure um hook de pre-commit que falha quando problemas de linter relacionados à segurança são detectados, usando uma biblioteca como husky.

Dependências de código sujo

Códigos de libs sao frequentemente usados para realizar operações, como inserir diretamente o HTML no DOM. Revise o código da lib manualmente ou com linters para detectar o uso inseguro dos mecanismos de segurança do React.

  • Evite bibliotecas que usam dangerouslySetInnerHTML, innerHTML, URLs inválidas ou outros padrões inseguros.
  • Use linters em sua pasta node_modules para detectar padrões inseguros em suas libs.

Discussion (1)

Collapse
rubenmarcus profile image
Ruben Marcus

Opa Júlio bacana suas dicas,
aqui:
Evite bibliotecas que usam dangerouslySetInnerHTML, innerHTML, URLs inválidas ou outros padrões inseguros.

como você ve isso? como fazer?