remarkablemark/html-react-parser

Prevent parse of invalid html tags

nicoleCamoro opened this issue · 2 comments

nicoleCamoro commented

Expected Behavior

Parser should ignore invalid html "tags".

Actual Behavior

I receive this error in the console :
DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('someone@gmail.com') is not a valid name.

Steps to Reproduce

I'm parsing an email body and one of it's contents has this format: <an,email@gmail.com>

var parse = require('html-react-parser');
parse("<p><someone@gmail.com></p>");

Environment

  • Version: 0.6.4
  • Platform: Windows 10
  • Browser: Google Chrome 77.0.3865.90
remarkablemark commented

Thanks for opening the issue @nicoleCamoro!

The error you get when trying to render an invalid tag is expected (see fiddle).

html-react-parser (or the dependency html-dom-parser, to be exact) does not handle sanitizing HTML markup. The reasons are:

  1. It's beyond the scope of what this parser does (see Unix philosophy),
  2. Sanitization adds additional complexity and bloat to the package,
  3. There are already packages that do a great job sanitizing HTML so there's no reason to reinvent the wheel, right?

So this leads to my follow-up question, which is are you able to use an HTML sanitization library? (I.e., sanitize-html or dompurify.)

I created a Repl.it that uses sanitize-html to sanitize your example. There's also a Repl.it that uses dompurify to sanitize HTML (see #94).

Let me know if this helps answer your question.

  • 👍4
  • ❤️3
nicoleCamoro commented

Oh I'm sorry I missed that. Your answer definitely helps. Thanks!

  • 👍1