In React SharePoint WebPart what are the differences between using 'html-react-parser' & using 'dompurify eslint-plugin-risxss' to securely show HTML

john john 941 Reputation points
2021-11-16T11:16:29.253+00:00

I am trying to build a React.js SharePoint modern web part, which have the following capabilities:-

1) Inside the Web Part settings page >> there are 2 fields named as "Who We Are" & "Our Value" which allow the user to enter HTML.

2) The web part will render 2 buttons "Who We Are" & "Our Value" >> and when the user clicks on any button >> a Popup will be shown with the entered HTML code in step-1

Something as follow:-

149710-ff3xw.png

But to be able to render HTML code as Rich-Text inside my Web Part, i have to use the dangerouslySetInnerHTML attribute inside the .tsx file. as follow:-

code inside the attached file149744-code.txt

And to secure the dangerouslySetInnerHTML, i did the following steps:-

1- Inside my Node.Js CMD >> i run this command inside my project directory:-

npm install dompurify eslint-plugin-risxss

2- Then inside my above .tsx i made the following modifications:-

I added this import `import { sanitize } from 'dompurify';`  
An I replaced this unsafe code `<p dangerouslySetInnerHTML={<!-- -->{__html:myprops.OurValue}}></p>` with this `<div dangerouslySetInnerHTML={<!-- -->{ __html: sanitize(myprops.OurValue) }} />`

So I have the following question:-

Now my approach (of using sanitize(myprops.OurValue) will/should securely render HTML as Rich-Text inside the popup since i am using the sanitize function which is part of the dompurify eslint-plugin-risxss. but i read another approach which mentioned that to securely render HTML as Rich-Text inside the popup, we can use the html-react-parser package as follow {parse(myprops.OurValue)}. So what are the differences between using 'html-react-parser' & using 'dompurify eslint-plugin-risxss' to securely render an HTML code as Rich-Text inside the React web part's popup?

SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
9,628 questions
SharePoint Development
SharePoint Development
SharePoint: A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.Development: The process of researching, productizing, and refining new or existing technologies.
2,668 questions
0 comments

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. RaytheonXie_MSFT 31,071 Reputation points Microsoft Vendor
    2021-11-17T03:14:36.81+00:00

    Hi @john john ,
    'html-react-parser' is not XSS (cross-site scripting) safe. It will be xss attacked easily. This library also doesn't sanitize HTML.
    'eslint-plugin-risxss' can prevent your React and Vue applications for XSS attacks by adding RisXSS rule.

    If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.