Search code examples
javascriptreactjsdompurify

How to load API data video url in react js


I have installed dompurify react js library and loaded all the contended as it is from API but API youtube URL video failed to load but can be seen in 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
}

Code:

<div
    class="col-md-10"
    dangerouslySetInnerHTML={{ __html: sanitize(body.body) }}
></div>

Solution

  • Looks like sanitize is a bit too opinionated for your needs out-of-the-box, the iframe is stripped out. You can pass a configuration and allow the iframe tag.

    <div
      className="col-md-10"
      dangerouslySetInnerHTML={{
        __html: sanitize(body.body, { ADD_TAGS: ["iframe"] })
      }}
    />
    

    Edit how-to-load-api-data-video-url-in-react-js

    enter image description here