Este artigo cobre o raciocínio por trás do uso da propriedade hazouslySetInnerHTML em um aplicativo React, que é o equivalente do atributo innerHTML no navegador DOM.
O que é hazouslySetInnerHTML?
dangerouslySetInnerHTML é uma propriedade que você pode usar em elementos HTML em um aplicativo React para definir programaticamente seu conteúdo. Em vez de usar um seletor para capturar o elemento HTML e, em seguida, definir seu innerHTML, você pode usar essa propriedade diretamente no elemento.
Quando hazouslySetInnerHTML é usado, o React também sabe que o conteúdo desse elemento específico é dinâmico , e, para os filhos desse nó, ele simplesmente ignora a comparação com o DOM virtual para obter algum desempenho extra.
Como o nome da propriedade sugere, pode ser perigoso de usar porque torna seu código vulnerável a ataques de cross-site scripting (XSS). Isso se torna um problema, especialmente se você estiver buscando dados de uma fonte de terceiros ou renderizando conteúdo enviado por usuários.
Quando usar hazardsetInnerHTML
Um caso de uso em que você precisa definir o O conteúdo HTML de um elemento DOM é quando você preenche um elemento
, e .
Considere o seguinte snippet de código, que renderizaria o string sem estar ciente da tag nela-o que significa que a saída seria apenas a própria string sem nenhum texto em negrito, como: lorem ipsum .
const App=()=> {const data=’lorem ipsum ‘; return (
); } exportar aplicativo padrão;
Mas, quando hazouslySetInnerHTML é usado, o React toma conhecimento das tags HTML e as renderiza corretamente. Desta vez, a saída seria renderizada corretamente com texto em negrito (ou seja, lorem ipsum ).
const App=()=> {const data=’lorem ipsum ‘; return (
); } exportar aplicativo padrão;Observe que deve ser um objeto com a chave __html passada para hazouslySetInnerHTML. Fora isso, o elemento em que você usa a propriedade hazardouslySetInnerHTML não deve ter nenhum filho, portanto, o uso do elemento
O requisito para passar um objeto é apenas outra proteção para evitar que os desenvolvedores o usem sem passar pela documentação e se conscientizarem do perigo potencial.
Sanitização ao usar hazardsSetInnerHTML
Os exemplos acima não apresentam perigo quando renderizados. No entanto, pode haver alguns casos em que um elemento HTML executa um script.
Considere os exemplos a seguir em que um evento JavaScript é anexado a um elemento HTML. Embora esses sejam exemplos inofensivos, eles são a prova de conceitos que mostram como um elemento HTML pode ser explorado para executar scripts maliciosos.
const App=()=> {const data=`lorem ipsum `; return (
); } exportar aplicativo padrão; const App=()=> {const data=`lorem ipsumFelizmente, existem ferramentas de limpeza para HTML, que detectam partes potencialmente maliciosas no código HTML e, em seguida, geram uma versão limpa e segura dele. O sanitizador mais popular para HTML é DOMPurify .
Vamos usar seu demonstração online para limpar os códigos HTML mencionados acima e ver como ele detecta e filtra partes do código que podem ser perigosas quando executado.
Original lorem ipsum lorem higienizado ipsum Original lorem ipsum Desinfetado lorem ipsum
É uma boa prática usar um desinfetante mesmo quando confiamos na fonte dos dados. Com o pacote DOMPurify usado, um dos exemplos acima seria o seguinte:
import DOMPurify de’dompurify’const App=()=> {const data=`lorem ipsum ` const sanitizedData=()=> ({__html: DOMPurify.sanitize (data)}) return (
); } exportar aplicativo padrão;A função sanitizedData retorna um objeto com a chave __html, que tem um valor retornado da função DOMPurify.sanitize.
Como esperado, quando passamos o mouse sobre o texto em negrito, não há função de alerta executada.
Observe que, como o DOMPurify precisa de uma árvore DOM e o ambiente Node não tem uma, você deve usar o pacote jsdom para criar um objeto de janela e inicializar o DOMPurify com ele ou usar o isomorphic-dompurify pacote sozinho, que encapsula os pacotes DOMPurify e jsdom.
Se você preferir a primeira opção, pode consultar o seguinte trecho da documentação do DOMPurify.
const createDOMPurify=require (‘dompurify’); const {JSDOM}=requer (‘jsdom’); janela const=novo JSDOM (”). janela; const DOMPurify=createDOMPurify (janela); const clean=DOMPurify.sanitize (sujo);
Conclusão
Em conclusão, dangerouslySetInnerHTML nada mais é do que uma substituição do innerHTML no React e deve ser usado com cuidado. Embora o nome sugira perigo em seu uso, tomar as medidas necessárias usando um desinfetante bem desenvolvido garante que o código esteja limpo e não execute scripts inesperados quando renderizados no nó React.
