Como renderizar HTML no React

Neste artigo você vai aprender a como renderizar HTML no React, vou te mostrar como é fácil fazer isso, vem conferir!

Fala programador(a)! Bora aprender mais sobre código HTML no React!

O React é uma biblioteca popular para construção de interfaces de usuário que facilita o desenvolvimento de aplicativos web ricos e interativos.

Uma das tarefas comuns em qualquer aplicativo web é renderizar HTML de maneira segura e eficiente.

Neste artigo, vamos explorar como renderizar HTML no React sem comprometer a segurança ou a integridade do seu aplicativo.

Introdução: Por que renderizar HTML no React?

Há várias situações em que você pode precisar renderizar HTML no React, como exibir conteúdo formatado proveniente de uma API, mostrar descrições de produtos ou artigos em um blog, ou permitir que os usuários insiram e visualizem seu próprio conteúdo formatado.

Independentemente do caso de uso, é crucial entender como renderizar HTML no React de maneira segura e eficiente.

Renderização segura de HTML no React com a propriedade dangerouslySetInnerHTML

O React não permite a renderização direta de strings HTML como conteúdo de um componente.

Isso ocorre porque a inserção direta de HTML pode levar a vulnerabilidades de segurança, como ataques de Cross-Site Scripting (XSS).

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Para contornar essa limitação e renderizar HTML no React, você pode usar a propriedade dangerouslySetInnerHTML.

Como o nome sugere, é importante ter cuidado ao utilizar essa propriedade, pois pode abrir brechas de segurança se não for usada corretamente.

Aqui está um exemplo de como renderizar HTML no React usando dangerouslySetInnerHTML:

import React from 'react';

function RenderHtml(props) {
  const { htmlContent } = props;

  return (
    <div
      className="render-html"
      dangerouslySetInnerHTML={{ __html: htmlContent }}
    />
  );
}

export default RenderHtml;

Neste exemplo, criamos um componente RenderHtml que recebe uma propriedade htmlContent.

Utilizamos a propriedade dangerouslySetInnerHTML para injetar o conteúdo HTML na div com a classe “render-html”.

Sanitização do HTML antes de renderizar

Antes de renderizar o HTML usando dangerouslySetInnerHTML, é essencial garantir que o conteúdo HTML seja seguro e não contenha scripts maliciosos ou elementos indesejados.

Você pode fazer isso utilizando uma biblioteca de sanitização de HTML, como o DOMPurify.

Para instalar o DOMPurify, execute o seguinte comando:

npm install dompurify

Agora, importe a biblioteca DOMPurify e utilize-a para limpar o conteúdo HTML antes de renderizá-lo:

import React from 'react';
import DOMPurify from 'dompurify';

function RenderHtml(props) {
  const { htmlContent } = props;
  const sanitizedHtml = DOMPurify.sanitize(htmlContent);

  return (
    <div
      className="render-html"
      dangerouslySetInnerHTML={{ __html: sanitizedHtml }}
    />
  );
}

export default RenderHtml;

Ao usar o DOMPurify, você garante que apenas o HTML seguro seja renderizado no seu componente, mitigando os riscos associados a ataques de XSS.

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Ao dominar a técnica de como renderizar HTML no React usando a propriedade dangerouslySetInnerHTML e a biblioteca de sanitização DOMPurify, você estará mais bem equipado para criar aplicativos web React ricos e interativos que exibem conteúdo HTML de maneira segura e eficiente.

Lembre-se de que a renderização direta de strings HTML pode levar a vulnerabilidades de segurança, como ataques de Cross-Site Scripting (XSS).

Portanto, é crucial garantir a sanitização adequada do conteúdo HTML antes de renderizá-lo no seu aplicativo.

É importante notar que a propriedade dangerouslySetInnerHTML deve ser usada com cautela e apenas quando absolutamente necessário.

Sempre que possível, opte por utilizar os recursos nativos do React para criar e manipular elementos do DOM.

Em resumo, renderizar HTML no React é uma tarefa que exige atenção à segurança e às boas práticas de programação.

Ao seguir as orientações apresentadas neste artigo e manter-se atualizado sobre as melhores práticas de segurança, você estará no caminho certo para construir aplicativos web confiáveis e seguros com o React.

Está buscando em evoluir como Programador? Confira o nossos cursos clicando aqui.

Nosso principal objetivo é tornar você um dev profissional que é capaz de resolver problemas de alta dificuldade e criar projetos complexos, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Cursos com vários projetos, exercícios, material apoio, comunidade de alunos e muito mais!

Resposta rápida: como renderizar HTML no React?

Pra quem só quer a versão curta, se liga:

O React escapa string por padrão, então HTML colado dentro do JSX aparece como texto na tela

Pra renderizar de verdade, você usa a propriedade dangerouslySetInnerHTML, passando um objeto com a chave __html dentro

E antes de injetar, você sanitiza esse HTML, porque conteúdo que você não controla é porta aberta pra XSS

O resto do artigo é exatamente isso, com o código e os cuidados de cada etapa 😉

dangerouslySetInnerHTML não renderiza nada? Veja o que checar:

Se o HTML simplesmente não aparece, quase sempre é detalhe bobo, beleza?

Se liga nos pontos que mais pegam a galera:

Passar a string direta. A propriedade espera um objeto com a chave __html, e não a string solta

Colocar filhos no mesmo elemento. O elemento que recebe a propriedade cuida do conteúdo dele sozinho, então deixa ele vazio e joga o resto em volta

Sanitizar na ordem errada. Limpa o HTML ANTES de injetar, nunca depois…

Esperar que aquilo se comporte como componente React. O que entra ali é markup, não JSX, então não conte com evento e estado do React funcionando dentro do conteúdo injetado

Tome cuidado com o último caso: é onde muita gente se enrola achando que o onClick escrito no HTML vai cair no componente 😅

Quando NÃO usar o dangerouslySetInnerHTML:

Antes de sair injetando string, faz uma pergunta: isso é HTML mesmo, ou é dado?

Se for dado (título, descrição, lista de itens vindos da API), o caminho é montar componente de verdade com esses valores

Fica mais seguro, dá pra estilizar, testar e reaproveitar

O dangerouslySetInnerHTML faz sentido quando o conteúdo JÁ nasce como HTML e você não controla a origem dele, tipo texto salvo por um editor rich text ou corpo de post vindo de um CMS

E tem um meio termo: existem bibliotecas que leem a string de HTML e devolvem elementos React de verdade, em vez de injetar markup cru. Se o seu caso pede interatividade dentro do conteúdo, esse caminho costuma doer bem menos

Regra de bolso: quanto menos HTML cru você injeta, menor a superfície de ataque do seu app 🙂

Onde sanitizar: no servidor ou no navegador?

Quando esse tipo de tutorial se popularizou, o combinado era simples: o React rodava no navegador e a limpeza acontecia ali mesmo, na hora de renderizar

Só que se o seu projeto renderiza React no servidor antes de a página chegar no navegador, a pergunta muda de lugar

"Mas por que isso importa?"

Porque limpeza feita só no navegador não protege o markup que já foi montado do outro lado

O ideal é sanitizar o mais perto possível da porta de entrada do conteúdo: quando ele é salvo, quando ele chega da API, antes de virar HTML na tela

Assim, mesmo que uma tela esqueça de limpar, o dado que circula no seu sistema já está limpo

Um detalhe pra não te pegar de surpresa: nem toda ferramenta de sanitização se comporta igual fora do navegador, porque muitas dependem do DOM. Se você for limpar no servidor, confira na documentação da lib que você escolheu como isso é suportado

Checklist de segurança antes de subir isso pra produção:

Passa o olho aqui antes do deploy:

O HTML passa por sanitização antes de ser injetado?

A limpeza acontece na entrada do dado, e não só na tela que exibe?

Você sabe de onde vem esse HTML e quem consegue escrever nele?

Você definiu o que é permitido (tags e atributos), em vez de só torcer pro comportamento padrão dar conta?

Existe algum caminho no app em que conteúdo de usuário chega no dangerouslySetInnerHTML sem passar pela limpeza?

Se você travou em alguma dessas perguntas, é bem ali que o XSS mora 👀