用React的危险地设置HTML到SetInnerHTML

Question

I'm using draft-to-html npm package to display draftjs content to a div using dangerouslySetInnerHTML .

Something like this:

<div dangerouslySetInnerHTML={{ __html: draftToHtml(JSON.parse(intro)) }} />

intro is user input and have not been sanitized. This feels bad but shouldn't draft-to-html only output known html tags such as H1-6, ul, ol, pre, p etc.?

Also, how would I sanitize a draftjs object?

Answer 1

You should be ok. If you look at https://github.com/jpuri/draftjs-to-html#supported-conversions it shows all the text transformations that will happen:

Following is the list of conversions it supports:

Convert block types to corresponding HTML tags:

Block Type HTML Tag

1. header-one h1
2. header-two h2
3. header-three h3
4. header-four h4
5. header-five h5
6. header-six h6
7. unordered-list-item ul
8. ordered-list-item ol
9. blockquote blockquote
10. code pre

11. unstyled p

    It performs these additional changes to text of blocks:

    replace blank space in beginning and end of block with replace \\n with
    replace < with < replace > with >