Opt out from sanitize-html safely? (package too big)

[andreasnilssondev]

Hi, first of all many thanks for this package making life easier for us!

I noticed that our total bundle size suddenly increased by 50%, and after some detective work I pinpointed the issue to the html-sanitizer package added here: #422

This addition made react-tooltip 7(!) times bigger in size and unfortunately that is a dealbreaker for us. Now this was improved a bit by replacing it with sanitize-html-react (#426) but it's still very big for a tooltip component (for our usecase).

I found this tool which gives a graph of the size changes, I don't know the accuracy but it should give an idea at least: https://bundlephobia.com/result?p=react-tooltip@3.8.0

I understand that this is for security purposes, but is there a way to safely opt out from this massive package, we don't really need to let users write the actual html, but we do use some markup where we insert strings from users.

Sorry for potentially stupid question since I don't know the code very well, but is there a way to avoid dangerousslySetInnerHtml and simply render children instead? If that removes the need for sanitizing.

Thanks

[aronhelser]

Cool - thanks for the info and package size info. I didn't know the package size would increase so much when we included the sanitization. I'm not familiar with what the issues around injection are, so I'm not sure what action we need to take as a component, balanced against this bundle size issue.

@wichniowski and @jgerlier can you give us some idea when/why injection is a issue for a component like this?

[jgerlier]

I'm really not an expert on the subject and I don't know a lot about this package, as I was mainly concerned by the huge size increase the dependency update brought in the app I'm working on. However after a quick look in the code and documentation, I understant the data-tip HTML attribute can be used to pass HTML content, and it is not possible to use only React children, because this piece of HTML is read directly in the DOM and not from a prop by the ReactTooltip component.

I assume it is dangerous to inject plain HTML in the DOM as it can be used to inject a malicious script or something like that.

Is the use case here to declare only one ReactTooltip element, and then reuse it with various content just by changing the data-tip attribute on the elements pointing on it ?

I think using the DOM to pass attributes between React elements is not really the "React" way to do it, so I don't see any solution allowing to remove the sanitization that doesn't imply passing only a string or a React element / render prop as a placeholder (for example by specifying a mapping with a placeholder-id).

[aronhelser]

I'm thinking about reverting the sanitization completely, and putting in the docs the inputs which must be sanitized if they come from users.

[sgiacinto]

Hello, we're having this exact same issue. Excellent component and dead easy to implement, however the increase in bundle size due to the sanitation makes it a no-go. Hopefully you can either make it optional or remove it.
Thanks!

[aronhelser]

@wwayne I haven't had a chance to look at this, but what do you think - is it OK to remove the sanitization and document that if you use 'html' you have to sanitize user input?

[wwayne]

@aronhelser yeah I agree, thank you 👍

[wmertens]

In the meantime I worked around this issue by making a file that exports text => text and telling webpack to alias sanitize-html-react to that file => gzipped bundle size dropped by 30kb

[wwayne]

🎉 This issue has been resolved in version 3.9.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀