Jump to content

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


Postagens Recomendadas

Alguma vez você já teve que renderizar um HTML externo que você não tem controle? Se sim, você provavelmente sabe que, infelizmente, muitos problema 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. 

pexels-pixabay-270408.jpg

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.
 

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! 

 

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 })" />

E é isso!


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

  • Amei 1
Link to comment
Compartilhe em outros sites

Crie uma conta ou entre para comentar 😀

Você precisa ser um membro para deixar um comentário.

Crie a sua conta

Participe da nossa comunidade, crie sua conta.
É bem rápido!

Criar minha conta agora

Entrar

Você já tem uma conta?
Faça o login agora.

Entrar agora


×
×
  • Create New...