Sanitize HTML using isomorphic-dompurify

[dgallardox]

Perhaps unnecessary but always good for client to ensure what is rendered is safe!

import DOMPurify from 'isomorphic-dompurify';

export default function sanitizeHTML(unsanitizedHTML) {
  let cleanHTML = DOMPurify.sanitize(unsanitizedHTML, {
    USE_PROFILES: { html: true },
  });
  return cleanHTML;
}

 <div
  dangerouslySetInnerHTML={{
     __html: sanitizeHTML(post.excerpt),
  }}
/>

Currently, we are just using the dangerouslySetInnerHTML without any sanitizing to ensure it is safe. Of course, we can generally assume what is coming from the WordPress side is clean but better to be safe :)

[theodesp]

Hey @dgallardox thanks.

Where do you think the framework should intervene here and sanitize the post data since the user has control over the query structure?

I mean you have the option to use whatever library you want whether it is isomorphic-dompurify or Sanitizer as the framework does not have access to the underlying data you want to fetch.

[theodesp]

@dgallardox any thoughts here?

[theodesp]

I will move this to a discussion to get more community feedback.