Como renderizar string HTML como HTML no React JS

Neste artigo você aprenderá a como renderizar string HTML como HTML no React, uma ação comum para sistemas CMS

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

Ao trabalhar com o React JS, é comum nos depararmos com a necessidade de renderizar strings contendo código HTML diretamente em nosso componente.

No entanto, o React não permite que façamos isso diretamente devido a preocupações de segurança, como o ataque de Cross-Site Scripting (XSS).

Neste artigo, vamos abordar a maneira correta e segura de renderizar uma string HTML como HTML real em um componente React JS.

Por que o React não renderiza strings HTML diretamente?

Preocupações com a Segurança

O principal motivo é a segurança. Permitir a renderização direta de strings HTML pode levar a ataques XSS, onde um invasor pode injetar scripts maliciosos que serão executados no navegador do usuário.

Por isso, o React optou por tratar qualquer string como texto puro por padrão.

Utilizando dangerouslySetInnerHTML

A maneira que o React fornece para inserir HTML diretamente em elementos é usando a prop dangerouslySetInnerHTML.

O nome “perigoso” é intencional, para nos lembrar das implicações de segurança associadas à sua utilização.

Como usar:

import React from 'react';

function ComponenteHTML() {
  const meuHTML = '<div><strong>Olá, mundo!</strong></div>';

  return <div dangerouslySetInnerHTML={{ __html: meuHTML }} />;
}

Note que a propriedade espera um objeto com uma chave __html. É esta chave que vai conter a string HTML que você deseja renderizar.

Considerações Importantes

1. Sanitização: Antes de usar dangerouslySetInnerHTML, é fundamental garantir que o conteúdo que você está inserindo seja seguro e livre de qualquer código malicioso. Existem bibliotecas, como o DOMPurify, que ajudam a limpar strings HTML, tornando-as seguras para renderização.
2. Uso consciente: Não utilize dangerouslySetInnerHTML a menos que seja absolutamente necessário. Se você apenas precisa renderizar texto, não há necessidade de usar HTML. Se o conteúdo for proveniente de fontes externas, como entradas de usuário, seja ainda mais cauteloso.

Alternativas ao dangerouslySetInnerHTML

Convertendo HTML para Componentes React

Uma abordagem mais segura e mais “React-like” é converter sua string HTML em componentes React reais.

Existem bibliotecas, como o react-html-parser, que facilitam esse processo.

Exemplo:

import React from 'react';
import ReactHtmlParser from 'react-html-parser';

function ComponenteHTML() {
  const meuHTML = '<div><strong>Olá, mundo!</strong></div>';

  return <div>{ReactHtmlParser(meuHTML)}</div>;
}

Esta abordagem é mais segura do que usar dangerouslySetInnerHTML, pois a conversão para componentes React garante que apenas elementos válidos e seguros sejam renderizados.

Crie componentes específicos

Sempre que possível, em vez de depender de strings HTML, crie componentes React específicos para representar o conteúdo desejado.

Isso não só melhora a segurança, como também torna o código mais reutilizável e mais fácil de manter.

import React from 'react';

function Saudacao() {
  return <div><strong>Olá, mundo!</strong></div>;
}

function Componente() {
  return <div><Saudacao /></div>;
}

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

Conclusão

A renderização de strings HTML no React é algo que deve ser abordado com cautela devido às preocupações de segurança.

Enquanto o React oferece dangerouslySetInnerHTML para essa finalidade, seu uso deve ser cuidadoso e consciente.

Alternativamente, converter strings HTML em componentes React ou criar componentes específicos para representar o conteúdo desejado são abordagens mais seguras e alinhadas com as melhores práticas do React.

Com o conhecimento adequado e a abordagem correta, você pode garantir que seu aplicativo React seja não só funcional, mas também seguro para seus usuários.

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