'How to sanitize DOM if we use dangerouslySetInnerHTML?

I am using typescript and MUI. React is considering new line as /n and not as </br> and I need to dangerously set the inner html so that new line show be displayed on dom as a new line. Could someone help me to sanitize the input . CommonTypography is the DOM element. How to sanitize it?. CommonTypography is the custom built extended version on top of MUI Typography to support dangerouslySetInnerHTML or is there any other way to give break tag wherever the use inputs new line.

   <CommonTypography
              typographyClass='secondaryButtonText'
              paragraph={true}
              align='left'
              dangerouslySetInnerHTML={{
                __html: `${data.replace(validationConstants.NewLineRegex, '<br />')}`,
              }}
            ></CommonTypography>

Based on the documentations HTML escapes html by default. Is it enough?. Do I need to add any other sanitization methods. If yes, please let me know how to do that?.

I am not looking to add any third party package like DOMPurify.

htmlreactjsmaterial-ui


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions