Rule proposal: Disallow `__html`

[Daniel15]

There's an existing no-danger rule to prevent the usage of dangerouslySetInnerHTML.

However, the actual issue is construction of the __html object. The original idea with __html is that the server-side (or a client-side HTML sanitization library) would sanitize the content, then return it as a __html object. You'd then use this directly in the React component.

Essentially, the __html object is a JSON-serializable way for the server (or a library) to communicate to the client that the string of HTML is safe to use directly. It's never supposed to be used directly in product code.

Examples

Invalid

<Foo dangerouslySetInnerHTML={{__html: bar}} />

const myHTML = {__html: bar};

Valid

<Foo dangerouslySetInnerHTML={sanitizedContent} />

[ljharb]

If any value is allowed in that field, somebody would be able to work around the issue just be defining the object in a clever way. I don't think dangerouslySetInnerHTML can be partially prevented - I think it's all or none.

[Daniel15]

Yeah it's definitely not perfect, but it's better than not having a lint rule at all. Internally at Meta, we only lint on __html and not on dangerouslySetInnerHTML. The server-side automatically serializes HTML (actually XHP) as objects with a __html property when JSON serializing them, and those are always safe to use in dangerouslySetInnerHTML. It's a very rare use case but the use cases do still exist.

[ljharb]

Seems like it'd be easier to lint against dangerouslySetInnerHTML, and make a single company-wide component that uses it, which is the sole file for which no-danger is disabled? That way you can guarantee everybody's only using it through one source of truth.