remarkablemark/html-react-parser

Parser throws an error if CSS parsing fails

linkelvin11 opened this issue · 4 comments

linkelvin11 commented

Expected Behavior

The parsing error should be caught and handled.

Actual Behavior

html-react-parser throws an error and JS execution stops.

Steps to Reproduce

Attempt to parse a tag with an invalid style attribute.
The CSS parser should throw an error:

Error: undefined:1:30: property missing ':'
    at error (/home/runner/node_modules/inline-style-parser/index.js:103:15)
    at declaration (/home/runner/node_modules/inline-style-parser/index.js:208:37)
    at declarations (/home/runner/node_modules/inline-style-parser/index.js:239:20)
    at module.exports (/home/runner/node_modules/inline-style-parser/index.js:250:10)
    at StyleToObject (/home/runner/node_modules/style-to-object/index.js:21:22)
    at cssToJs (/home/runner/node_modules/html-react-parser/lib/attributes-to-props.js:83:3)
    at attributesToProps (/home/runner/node_modules/html-react-parser/lib/attributes-to-props.js:64:19)
    at domToReact (/home/runner/node_modules/html-react-parser/lib/dom-to-react.js:54:15)
    at HTMLReactParser (/home/runner/node_modules/html-react-parser/index.js:19:10)
    at evalmachine.<anonymous>:6:16

Example HTML string: <p style="font-family: &amp;quot; franklin gothic itc&amp;quot;,helvetica,arial,sans-serif;">test</p>

Reproducible Demo

Repl.it: https://repl.it/repls/WhitesmokeAggravatingScandisk

remarkablemark commented

Thanks for opening this issue @linkelvin11

The error you see is expected behavior since this parser does not handle sanitization of invalid HTML or CSS (see FAQ).

Take a look at #124 to see some examples of how to sanitize the markup before parsing.

I also created a Repl.it that fixes your example using sanitize-html.

linkelvin11 commented

Ah ok, I had missed that section of the FAQ.

I was able to find a sanitize-html config that worked for my use case.

Thanks!

  • 👍1
shiglet commented

Hello @linkelvin11,

Can you share that sanitize-html config ? Does it keep styling when it's valid or ?

Thank you :)

linkelvin11 commented

Hello @linkelvin11,

Can you share that sanitize-html config ? Does it keep styling when it's valid or ?

Thank you :)

I used the allow all config specified in the sanitize-html docs.

https://www.npmjs.com/package/sanitize-html#what-if-i-want-to-allow-all-tags-or-all-attributes

  • 👍2