DEV Community: Júlio Carneiro

Boas práticas de segurança em sites React

Júlio Carneiro — Mon, 14 Mar 2022 21:13:32 +0000

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>

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)}} />

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>

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.

Security for React Apps

Júlio Carneiro — Mon, 14 Mar 2022 21:12:54 +0000

Default XSS Protection with Data Binding

Use default data binding with curly braces {} and React will automatically escape values to protect against XSS attacks. Note that this protection only occurs when rendering textContent and not when rendering HTML attributes.

Use JSX data binding syntax {} to place data in your elements. Ex. <div>{data}</div>.
Avoid dynamic attribute values without custom validation. Don’t use ...

Dangerous URLs

URLs can contain dynamic script content via javascript: protocol urls. Validate URLs before use.

Use validation to assure your links are http or https to avoid javascript: URL based script injection. Achieve URL validation using a native URL parsing function then match the parsed protocol property to an allow list.

function validateURL(url) {
    const parsed = new URL(url)
    return ['https:', 'http:'].includes(parsed.protocol)
}
<a href={validateURL(url) ? url : ''}>This is a link!</a>

Rendering HTML

It is possible to insert HTML directly into rendered DOM nodes using dangerouslySetInnerHTML. Any content inserted this way must be sanitized beforehand.

Use a sanitization library like DOMPurify on any values before placing them into the dangerouslySetInnerHTML prop.

import purify from "dompurify";

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

Direct DOM Access

Accessing the DOM to inject content into DOM nodes directly should be avoided. Use dangerouslySetInnerHTML if you must inject HTML and sanitize it before injecting it using DOMPurify

Avoid using refs and findDomNode() to access rendered DOM elements to directly inject content via innerHTML and similar properties and methods.

Server-side Rendering

Data binding will provide automatic content escaping when using server-side rendering functions like ReactDOMServer.renderToString() and ReactDOMServer.renderToStaticMarkup().

Avoid concatenating strings on to the output of renderToString() and renderToStaticMarkup() before sending the strings to the client for hydration or rendering.

Known Vulnerabilities in Dependencies

Some versions of third-party components might contain security issues. Check your dependencies and update when better versions become available.

Use a tool like the free Snyk cli to check for vulnerabilities.
Automatically fix vulnerabilities with Snyk by integrating with your source code management system to receive automated fixes.

$ npx snyk test

JSON State

It is common to send JSON data along with server-side rendered React pages. Always escape < characters with a benign value to avoid injection attacks.

Avoid unescaped HTML significant values in JSON state objects.

<script>
//WARNING: See the following for security issues around embedding JSON in HTML:
//[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>

Vulnerable Versions of React

The React library has had a few high severity vulnerabilities in the past, so it is a good idea to stay up-to-date with the latest version.

Avoid vulnerable versions of the react and react-dom by verifying that you are on the latest version using npm outdated to see the latest versions.
Use Snyk to automatically update to new versions when vulnerabilities exist in the versions you are using.

Linters

Install Linters configurations and plugins that will automatically detect security issues in your code and offer remediation advice.

Use the ESLint React security config to detect security issues in our code base (Install vscode Snyk extension).
Configure a pre-commit hook that fails when security related linter issues are detected using a library like husky.

Dangerous Library Code

Library code is often used to perform dangerous operations like directly inserting HTML into the DOM. Review library code manually or with linters to detect unsafe usage of React’s security mechanisms.

Avoid libraries that do use dangerouslySetInnerHTML, innerHTML, unvalidated URLs or other unsafe patterns.
Use security linters on your node_modules folder to detect unsafe patterns in your library code.

Usando Prettier com VS Code e create-react-app

Júlio Carneiro — Tue, 01 Oct 2019 14:11:20 +0000

Fala pessoal beleza? Espero que sim!
A uns dias atrás numa noite fria e tediosa estava eu, na minha casa, vendo os grupos de react no slack/telegram/discord/etc quando descobri esse cara ai de cima, alguém estava falando sobre ele e decidi ver o que era e pra que servia. Confesso que pensei: Como fiquei a vida toda sem usar isso?

“Prettier é um formatador de código opinativo. Ele impõe um estilo consistente analisando seu código e reimprimindo-o com suas próprias regras que levam em consideração o comprimento máximo da linha, envolvendo o código quando necessário.”

Resumindo: Você não precisa mais se preocupar em formatar seu código, só dando um save no projeto já conseguimos a formatação automática e perfeita do jsx com o Prettier, e isso nos faz economizar tempo. O Prettier funciona bem e é muito fácil de configurar, por isso deve ser considerado obrigatório em qualquer projeto. Ele não é a primeira ou única ferramenta que faz este tipo de automação, então, se não for adequado para você, podem haver outros que te agradem e funcionem melhor para você ou sua equipe.

Configurando ambiente

Este tutorial pressupõe que você esteja usando o Create React App , Yarn e o VS Code. As instruções não devem ser diferentes se você usar o NPM ou outro ambiente JavaScript.

Note que o CRA(create-react-app) não vai mostrar nenhum erro do Prettier no console do navegador ou na saída do terminal. Os erros só são exibidos no código dentro do VS Code.

Precisamos primeiro instalar o pacote Prettier e o plugin ESLint Prettier, depois instalamos as extensões para o VS Code. O plugin faz com que os erros do Prettier **sejam passados como erros do **ESLint.

yarn add --dev --exact prettier
yarn add --dev eslint-plugin-prettier

Baixar extensões: ESLint Prettier

Você precisará instalar o ESLint se não estiver usando o CRA.

Agora vamos criar dois arquivos na pasta raiz do projeto, o “.eslintrc” e o “.prettierrc”, onde no primeiro passamos as configurações do eslint e no segundo as configurações do Prettier:

//.eslintrc
{
  "extends": "react-app",
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

E caso você não esteja satisfeito com as configurações default do Prettier você pode modifica-las neste arquivo:

//.prettierrc
{
  "singleQuote": true,
  "trailingComma": "es5"
}

Depois de feito estes passos podemos configurar no VS Code para que o Prettier entre em ação assim que salvarmos algum arquivo, isto é opcional, podemos ir até a engrenagem que tem em baixo do editor a esquerda e clicar em “Configurações”, vamos editar esta linha:

"editor.formatOnSave": true

Com tudo configurado certinho conseguimos obter este resultado ao dar um control + s no editor:

Para ver o resultado deste código e testar o Prettier em um playground clique aqui.

Algo bem básico porém útil, e que consegue nos ajudar a entregar nossos jobs sempre com excelência!
Espero que vocês tenham curtido e que sempre possamos adicionar ele nos projetos pra poder entrar em sintonia com os outros devs da nossa equipe!

Abraço pessoal até a próxima.

Como criar uma extensão para o Chrome utilizando React

Júlio Carneiro — Tue, 01 Oct 2019 14:03:37 +0000

Fala pessoal beleza? Espero que sim!
Bom, fiz algumas pesquisas no google e não achei muitos artigos diretos de como fazer uma extensão para o chrome utilizando react, então decidi ensinar pra vocês do jeito mais fácil que pode ser ensinado, pra você sair deste artigo já criando sua primeira extensão! Então bora lá?

Configuração

Primeiro vamos começar iniciando um projeto react com o “create-react-app”, caso você ainda não o tenha instalado pode digitar em seu terminal o “npm i -g create-react-app”, após feito isso vamos criar nosso projeto com o comando:

> create-react-app nome-do-projeto

Após criar o projeto, vá a pasta “/public“ e abra o manifest.json no seu editor. Devemos adicionar e editar algumas configurações para que o chrome entenda como queremos que a extensão seja executada, veja:

{
  "short_name": "chromeextension",
  "name": "Chrome Extension",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "index.html",
    "default_title": "Chrome Ext"
  },

   "permissions"*: [
    "activeTab"
  ],

   "icons": {
   "16": "react16.png",
   "48": "react48.png",
   "128": "react128.png"
  },
  "version"*: "1.0"
}

Este é o meu manifest.json, o “name” vai ser o nome do meu app, o que aparece pra nós nas instalações de extensão, o “default_title” muda o nome da sua extensão quando você passa o mouse nela sem clicar, o “default_popup” é o arquivo que sua extensão vai exibir ao ser clicada no navegador, e também modifiquei meus ícones para poder aparecer tanto na store das extensões quanto no próprio navegador, vai ser o ícone do meu app digamos assim.

Se você quiser estudar sobre as configurações do manifest.json, acesse o **Guia para desenvolvedores** do Google **Chrome Extension.**

Testando aplicaçao

Vamos no nosso terminal na pasta do projeto e vamos dar um “yarn build” para buildarmos nosso app, o build sera gerado na pasta “/build” do seu app.

Agora vamos ate a barra de endereços do chrome e vamos digitar “chrome://extensions”, acessando as configurações de extensões podemos ativar o modo desenvolvedor. Quando fazemos isso conseguimos abrir algumas opções para testarmos nossa aplicação, vamos em “Carregar sem compactação” e apontar a pasta “/build” do seu projeto, que foi onde fizemos o build final do app, veja:

Pronto! Temos nossa extensão feita com react funcionando perfeitamente, agora só construir sua ideia em cima do app, eu por exemplo, fiz uma aplicação de login e senha utilizando o firebase e este foi meu resultado:

O repositório do meu projeto encontra-se no github em:
https://github.com/juliocarneiro/react-chrome-extension

A edição do projeto e feita como em um projeto react normal, o objetivo de uma extensão do Chrome e melhorar a experiência de navegação do usuário e espero que meu tutorial tenha ajudado você nisso. Caso tenha alguma duvida ou sugestão só deixar nos comentários beleza?

Obrigado pela leitura!