Instalé la biblioteca dompurify react js y cargué todo lo contenido tal como es desde la API, pero el video de la URL de YouTube de la API no se pudo cargar, pero se puede ver en la API.
API:
{ "id": 5, "name": "shahiraja", "title": "text below as a natural lead-in to additional content. This content is a little bit l text below as a natural lead-in to ad", "image": "/media/resources/Screenshot_from_2021-09-14_19-13-25.png", "created_at": "2022-01-03T08:07:44.451476Z", "body": "<p><iframe frameborder=\"0\" src=\"//www.youtube.com/embed/LNkdmyHp5Co\" width=\"640\" height=\"360\" class=\"note-video-clip\"></iframe><a href=\"https://www.youtube.com/watch?v=LNkdmyHp5Co\"></a><br></p>", "category": 1 }Código:
<div class="col-md-10" dangerouslySetInnerHTML={{ __html: sanitize(body.body) }} ></div>Parece que sanitize es un poco demasiado obstinado para sus necesidades listas para usar, el iframe está eliminado. Puede pasar una configuración y permitir la etiqueta iframe .
<div className="col-md-10" dangerouslySetInnerHTML={{ __html: sanitize(body.body, { ADD_TAGS: ["iframe"] }) }} />Si de API está obteniendo los datos como un código HTML, entonces es mejor ir con
peligrosamenteSetInnerHTML
De lo contrario, si obtiene la URL del archivo, simplemente use la etiqueta de video.
<video autoPlay playsInline muted src={src} onLoadedData={onLoadedData} style={{ opacity: isVideoLoaded ? 1 : 0 }} />