Filtering Down Attributes

[jhechtf]

I am using this in a place where I have to parse user-given content.

I am already aware that this library is not safe, I have already implemented safeguards to ensure that non-allowed elements are not presented.

But now I have a different scenario wherein I need to be able to safely allow certain elements (like a p tag) with certain attributes (style), and disallow any JS/React events.

I've tried using the replace setup, but how do i let the rest of the parser run without interferring, while also removing those unwanted / dangerous props?

[remarkablemark]

Are you able to set up some kind of whitelist using replace?

E.g.:

const parse = require('html-react-parser');

const html = `
  <p style="display: block;">text</p>
`;

const whitelistTags = ['p'];

parse(html, {
  replace: domNode => {
    if (whitelistTags.indexOf(domNode.name) !== -1) {
      // you can even filter out attributes that you want to keep
      return React.createElement(domNode.name, domNode.attribs);
    }
  }
});

However, this approach isn't perfect and it's still recommended to run your HTML through a sanitizer. See example.

[jhechtf]

That is my current implementation, overall. The issue is that while I know this particular use case, I can almost guarantee that there will be other people who use this function in use cases I do not yet know (perhaps they instead want to use a small tag instead of a p tag), so I can't particularly hard-code a mapping like I did with the other allowed elements in the parsing.

[remarkablemark]

In that case, I recommend adding a sanitizer. It will increase your bundle size and decrease your web app's performance, but it's a tradeoff worth making in regards to safety.

If you sanitize your HTML, then you may not need html-react-parser anymore and can use dangerouslySetInnerHTML. Of course, if you need to replace elements, then you may still use this library.

[jhechtf]

Dang, I was afraid you would say that. Well, I guess we'll see where this heads.

Closing.