0
174
Vistas¿Cómo desinfectar HTML en React?
Estoy tratando de mostrar contenido HTML en la parte frontal de React.
aquí está mi entrada
<p>Hello/<p> Aadafsf <h1>H1 in hello</h1>Escribo esto desde CKEditor desde el lado del administrador
Este es el resultado de React en tamaño frontal.
<p>Hello/<p> Aadafsf <h1>H1 in hello</h1>este es el resultado que me gustaria
<p>Hello/<p> Aadafsf <h1>H1 in hello</h1>Esto es lo que probé hasta ahora
1. Usando dompurify
import {Parser} from "html-to-react"; import DOMPurify from "dompurify"; {Parser().parse(DOMPurify.sanitize(HTMLCONTENT))} 
Intenté esto pero no obtengo el resultado esperado.
2. Usar dangerouslySetInnerHTML
Tengo el siguiente contenido HTML:
<h2>This is Heading</h2><p><p></p></p><p>This is para.</p><p> </p><p><strong>This is Bold</strong></p><p> </p><ol><li><strong>dwsfdf</strong></li><li><strong>fdsfdf</strong></li></ol><p> </p><p> </p><p> </p><figure class="media"><oembed url="https://youtu.be/rokGy0huYEA"></oembed></figure>Lo usé como:
<div dangerouslySetInnerHTML={{__html: HTMLCONTENT}} />;
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
En realidad, su error no está en la serialización, es porque hay un error tipográfico en su HTML.
¡La etiqueta <p> está "cerrada" por una etiqueta /<p> y no por una </p> !
Entonces necesitas actualizar tu HTML:
- <p>Hello/<p> + <p>Hello</p> Aadafsf <h1>H1 in hello</h1> Además, para mostrar HTML sin procesar en su componente. React ofrece una función para ese dangerouslySetInnerHTML .
Pero tenga mucho cuidado, ya que esto puede exponer su sitio a ataques conocidos como secuencias de comandos entre sitios (XSS) .
·
Juan Pablo Isaza
Denunciar
0
Podrías permitir algunas etiquetas que quieras como esta
let clean = DOMPurify.sanitize('<div>hello</div>',{ALLOWED_TAGS: ['b', 'q'], ALLOWED_ATTR: ['style']});
·
Juan Pablo Isaza
Denunciar
Responde la pregunta