Skip to main content
6 de 9
adicionou 1 caractere ao conteúdo
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

Poderia até usar o dangerouslySetInnerHTML, no entanto definir HTML a partir do código pode ser arriscado porque é fácil expor a ataques de script entre sites (XSS), por isso o nome dangerouslySetInnerHTML e passar um objeto com uma chave __html, que é aparentemente complicada, isso para se lembrar de que é perigoso. Por exemplo:

const Fragment = React.Fragment;

function H2({texto}){
  console.log(texto);
  return(<h2 dangerouslySetInnerHTML={{ __html: texto }}></h2>)
}

function App() {
  const abacaxi ="Constante &#127821;"
  return (

    <Fragment>
      <H2 texto={abacaxi}></H2>
      <H2 texto="Direto &#127821;"></H2>
    </Fragment>

  );
}

ReactDOM.render(
  
  <App></App>,
  document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Também poderia usar String.fromCodePoint, mas só se for um código por vez, dessa forma você teria que fazer a leitura da string recebida um a um, obtendo a partir de &...; e trocando a sequencia de caractere pelo valor correspondente do retorno de String.fromCodePoint, ou seja, só é mais eficiente usar isso se for para tratar algo bem simples, se for um texto grande, variado vai exigir escrever um longo script.

Para evitar o XSS e facilitar o caminho em muito, você usar DOMParser.parseFromString conteúdos potencialmente perigosos não serão processados. Após o parse do HTML você pode remover todos atributos com prefixo on, tags <script> e diversos elementos desnecessários, seria melhor fazer uma lista de elementos permitidos ou pode simplesmente obter o conteúdo com textContent, que irá eliminar todo HTML e obter as entidades HTML já "processadas":

const texto = `<strong>Teste</strong> &amp; &gt; <img src="teste.jpg" onload="alert('ataque XSS');" onerror="alert('ataque XSS');">

&#128512; &#128516; &#128525; &#128151;
`;

const parsed = new DOMParser().parseFromString(texto, "text/html");

console.log(parsed.body.textContent);

Dessa forma irá remover as tags HTML, mas irá manter as entidades HTML suportadas:

const Fragment = React.Fragment;

function H2({texto}){
  texto = new DOMParser().parseFromString(texto, "text/html").body.textContent;
  return(<h2>{texto}</h2>)
}

function App() {
  const abacaxi ="<strong>Constante</strong> &#127821;"
  return (

    <Fragment>
      <H2 texto={abacaxi}></H2>
      <H2 texto="<strong>Direto</strong> &#127821;"></H2>
    </Fragment>

  );
}

ReactDOM.render(
  
  <App></App>,
  document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Syzoth
  • 100,5mil
  • 23
  • 169
  • 361