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

renderizar string HTML como HTML no React capa

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.

Subscribe
Notify of
guest

0 Comentários
Inline Feedbacks
View all comments