How to display post content in the block editor

It is true that using RawHTML (or dangerouslySetInnerHTML) is discouraged and indeed prone to XSS attacks like <img src=x onerror=alert(1)//> and <p>abc<iframe//src=jAva&Tab;script:alert(3)>def</p>.

But if you need to set HTML directly from React, then you’ll have to use dangerouslySetInnerHTML, either directly (e.g. <div dangerouslySetInnerHTML={ ({ __html: 'foo <b>bar</b>' }) } />) or via RawHTML in Gutenberg (e.g. <RawHTML>{ 'foo <b>bar</b>' }</RawHTML>).

However, whether it’s React, jQuery or even vanilla JS (direct access on innerHTML), the recommended practice has always been to sanitize the HTML, or ensuring it’s safe, before passing it to the browser.

So despite WordPress does not (yet) have HTML sanitization functions in JS, there are actually libraries such as DOMPurify that we can use to ensure the HTML is safe.

And there are other libraries out there that you could choose from, but I thought DOMPurify is awesome, so here’s an example assuming you’ve installed the package:

// At the top in your file:
import DOMPurify from 'dompurify';
// or you can use wp_enqueue_script() to "normally" load the src/purify.js or
// dist/purify.min.js file, and a global window variable named DOMPurify will
// be available on the page.

// Then somewhere in your code, use DOMPurify.sanitize() to sanitize the HTML:
<div className="custom-post-content">
    <RawHTML>{ DOMPurify.sanitize( custompost.content.rendered ) }</RawHTML>
</div>

So I hope that helps & Happy coding! 🙂