4

Quero que o React faça aparecer na tela o emoji. Para isso eu sei o código do HTML entity. Quando passo para o componente o valor, funciona, mas quando passo por variável, não funciona.

function H2({texto}) {
  return <h2>{texto}</h2>;
}

function App() {
  const abacaxi = "&#127821;";
  return (
    <React.Fragment>
      <H2 texto={abacaxi} />
      <H2 texto="&#127821;" />
    </React.Fragment>
  );
}

ReactDOM.render(<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>

1
  • Obrigado. Minha primeira vez aqui. ainda não conheço bem a ferramenta. valeu!!!
    – Jonatas
    Commented 16/10/2021 às 13:06

2 Respostas 2

7

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 & até ; para cada entidade que deseja alterar 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 assim 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", podendo assim tratar uma strinng que possui quantidade de entidades variadas:

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>

0
5

Se você sempre tiver as HTML entities no formato &#... onde ... é um número decimal, você pode utilizar a função String.fromCodePoint e passar o número presente na entidade.

Claro que não funcionará com entidades nomeadas, como &copy; (referente ao caractere ”©”), mas se for &#169;, também equivalente a “©”, funcionaria. Isso porque o JavaScript não possui função nativa para associar o identificador “copy” ao caractere ”©”.

Exemplo:

const entity = '&#127821;';
console.log(decimalHTMLEntityToString(entity));

function decimalHTMLEntityToString(entity) {
  const codePoint = parseInt(entity.substring(2, entity.length - 1), 10);
  if (Number.isNaN(codePoint)) {
    throw new Error('Invalid HTML entity.');
  }
  return String.fromCodePoint(codePoint);
}

E aí você usa essa função dentro do seu componente para analisar a entity recebida.

Claro que isso é bem mais eficiente que um DOM parser e mais seguro que utilizar o __dangerouslySetInnerHTML, mas não funciona para casos onde a HTML entity é qualificada pelo “nome” do caractere (e não pelo seu code point).

Como já vimos acima, isso só funcionaria para entidades HTML declaradas no padrão decimal ou hexadecimal (este último, todavia, não implementei nesta resposta, mas você já tem a ideia).

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .