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 🍍"
return (
<Fragment>
<H2 texto={abacaxi}></H2>
<H2 texto="Direto 🍍"></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
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> & > <img src="teste.jpg" onload="alert('ataque XSS');" onerror="alert('ataque XSS');">
😀 😄 😍 💗
`;
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> 🍍"
return (
<Fragment>
<H2 texto={abacaxi}></H2>
<H2 texto="<strong>Direto</strong> 🍍"></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>