Como renderizar HTML de forma segura (sanitização/higienização de HTML)

[Danilo Duarte Ribeiro]

Alguma vez você já teve que renderizar um HTML externo que você não tem controle? Se sim, você provavelmente sabe que, infelizmente, muitos problemas de segurança podem ocorrer devido a isso, especialmente se o HTML não for tratado da forma correta.

Devido a isso, foi criado o processo de sanitização (ou higienização) de HTML, para que sejam renderizadas apenas as marcações consideradas seguras.

Saiba mais sobre sanitização de HTML aqui.

Recentemente, me deparei com uma situação em que era necessário renderizar um HTML vindo de uma API externa dentro de um iframe, e vou compartilhar com vocês como fiz para deixar esse HTML mais seguro e reduzir a probabilidade de brechas de segurança.

Utilizando DOMPurify para Sanitizar HTML

Uma biblioteca JavaScript bem simples que resolve o problema é a DOMPurify, que utilizei num projeto em Vue.js.

Suponha que meu código problemático contenha o seguinte iframe:

<iframe :srcdoc="html" />

OBS: A variável html passada para o iframe é o código HTML recebido pela API.

Para implementar o DOMPurify, basta importá-lo e envolver o HTML com a função sanitize:

<script setup>
  import { sanitize } from 'dompurify';
</script>

<iframe :srcdoc="sanitize(html)" />

Simples assim!

Preservando Estilos no HTML Sanitizado

Se você deseja manter os estilos que o HTML possui, basta passar a prop FORCE_BODY como true:

<script setup>
  import { sanitize } from 'dompurify';
</script>

<iframe :srcdoc="sanitize(html, { FORCE_BODY: true })" />

Conclusão

E é isso! Agora seu HTML está devidamente sanitizado e drasticamente mais seguro contra brechas de segurança!

[CarlosGomes1973]

Obrigado pela resposta Danilo
 

Não sei se entendi bem a sua resposta,pois nunca ouvi sobre o assunto de sanitização do html, vou testar e dou um retorno.