Quais as diferenças de innerHTML e dangerouslySetInnerHTML

Neste artigo você aprenderá as diferenças de innerHTML e dangerouslySetInnerHTML no React JS, duas instruções usadas para inserir HTML

Fala programador(a), beleza? Bora aprender mais sobre React JS!

Ao trabalhar com o desenvolvimento web, muitas vezes nos encontramos em situações em que precisamos manipular diretamente o conteúdo do DOM.

No ambiente padrão do JavaScript, isso é frequentemente realizado usando a propriedade innerHTML.

No entanto, no universo React, essa abordagem é desencorajada em favor de uma propriedade chamada dangerouslySetInnerHTML.

Neste artigo, vamos mergulhar fundo nas diferenças entre essas duas abordagens e entender por que o React escolheu um caminho tão distinto.

Entendendo o innerHTML

Para começar, vamos falar um pouco sobre o innerHTML.

O que é innerHTML?

innerHTML é uma propriedade do DOM que permite que você obtenha ou defina o conteúdo HTML de um elemento.

É amplamente utilizado para injetar código HTML dinamicamente em páginas web.

const elemento = document.getElementById("meuElemento");
elemento.innerHTML = "<p>Olá, Mundo!</p>";

As diferenças entre innerHTML e dangerouslySetInnerHTML no React JS

Ao trabalhar com o desenvolvimento web, muitas vezes nos encontramos em situações em que precisamos manipular diretamente o conteúdo do DOM.

No ambiente padrão do JavaScript, isso é frequentemente realizado usando a propriedade innerHTML.

No entanto, no universo React, essa abordagem é desencorajada em favor de uma propriedade chamada dangerouslySetInnerHTML. Neste artigo, vamos mergulhar fundo nas diferenças entre essas duas abordagens e entender por que o React escolheu um caminho tão distinto.

Desvantagens do uso de innerHTML:

1. Riscos de segurança: A principal desvantagem do uso do innerHTML é a vulnerabilidade a ataques de injeção de script, também conhecidos como Cross-Site Scripting (XSS). Quando o conteúdo injetado não é devidamente higienizado, um invasor pode injetar scripts maliciosos que são executados quando o conteúdo é renderizado no navegador.
2. Redefinição dos ouvintes de evento: Ao definir innerHTML, todos os ouvintes de eventos no conteúdo anterior são removidos. Isso pode causar comportamentos inesperados na aplicação.

Entendendo o dangerouslySetInnerHTML no React

Para resolver os problemas associados ao innerHTML, o React introduziu o dangerouslySetInnerHTML.

O que é dangerouslySetInnerHTML?

dangerouslySetInnerHTML é uma propriedade no React que permite inserir HTML diretamente em um componente. Seu nome destaca o fato de que é perigoso injetar HTML diretamente, pois pode abrir a porta para vulnerabilidades XSS.

Como usar dangerouslySetInnerHTML?

function MeuComponente() {
  return <div dangerouslySetInnerHTML={{ __html: "<p>Olá, Mundo!</p>" }} />;
}

Observe a estrutura de objeto especial { __html: ... }. Isso é uma proteção adicional para garantir que os desenvolvedores estejam conscientes do que estão fazendo.

Vantagens do dangerouslySetInnerHTML:

1. Reduz o risco de XSS: Ao usar dangerouslySetInnerHTML, o React não avalia qualquer conteúdo injetado como JSX, reduzindo a chance de execução de scripts maliciosos. No entanto, ainda é essencial garantir que qualquer conteúdo que você injete seja seguro e livre de scripts potencialmente perigosos.
2. Integração com o sistema de atualização do React: Ao contrário de manipular diretamente o DOM usando innerHTML, dangerouslySetInnerHTML funciona bem com o algoritmo de reconciliação do React, garantindo atualizações de interface do usuário mais eficientes.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Ambos, innerHTML e dangerouslySetInnerHTML, têm seu lugar no desenvolvimento web. No entanto, ao trabalhar com o React, é altamente recomendado usar dangerouslySetInnerHTML para injetar HTML dinamicamente.

Fazer isso não apenas permite que você aproveite os benefícios de desempenho do React, mas também fornece uma camada adicional de segurança contra ataques XSS.

No entanto, o mais importante é lembrar que, independentemente da ferramenta que você escolher, sempre sanitize e verifique o conteúdo que está sendo injetado.

A segurança da sua aplicação e dos seus usuários deve ser sempre uma prioridade máxima.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.

Pra fechar de vez a dúvida, bora colocar os dois lado a lado numa tabela rápida:

Repara que o risco de XSS não some no React, ele só fica mais explícito

O nome gigante e assustador é de propósito, pra você parar e pensar antes de injetar HTML na mão

O exemplo acima usa um texto fixo, mas na vida real o HTML quase sempre vem de fora: de uma API, do banco, de um campo que o usuário preencheu

Nesses casos você joga o conteúdo numa variável e passa ela pro __html:

function Post({ conteudo }) { }

Aqui o conteudo poderia chegar de um fetch, de um estado ou de uma prop

Se liga: é EXATAMENTE nesse cenário que o perigo mora, porque você não controla 100% o que vem de fora

Antes de mandar esse conteudo pro __html, higieniza ele (falo disso já já)

O React reduz um tipo de risco, mas ele NÃO limpa o HTML pra você

Se o conteúdo carrega um script malicioso, ele ainda pode rodar no navegador

A regra de ouro é simples: nunca injete HTML cru que veio de fora

O fluxo seguro é sempre o mesmo:

Recebe o HTML (API, banco, input do usuário)

Passa esse HTML por uma etapa de sanitização, que remove tags e atributos perigosos (como <script> e handlers de evento)

Só DEPOIS de limpo você joga no dangerouslySetInnerHTML

Higienizar o conteúdo é o que de fato te protege do XSS, o dangerouslySetInnerHTML sozinho é só o aviso na porta

Por que o nome é dangerouslySetInnerHTML?

O React batizou assim de propósito, pra te fazer parar e pensar

O "dangerously" é um alerta na cara: você está injetando HTML direto, e isso abre porta pra vulnerabilidades de XSS se o conteúdo não for confiável

dangerouslySetInnerHTML é seguro?

Ele só é seguro se o HTML que você injeta já veio higienizado

O React evita interpretar o conteúdo como JSX, mas não remove scripts maliciosos por você, a responsabilidade de limpar continua sendo sua

Posso usar innerHTML dentro do React?

Dá pra usar mexendo no DOM na mão, mas é desencorajado

Você perde a integração com o algoritmo de reconciliação do React e ainda arrisca comportamentos estranhos, como ouvintes de evento sendo removidos, no React o caminho é o dangerouslySetInnerHTML

O que significa aquele { __html: … }?

É a estrutura de objeto especial que o React exige de propósito

Essa sintaxe meio esquisita serve pra garantir que você saiba exatamente o que está fazendo ao injetar HTML, não é acidente, é proteção