Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(DHIS2-17668): sanitise HTML in table instead of showing it as encoded text #338

Merged
merged 3 commits into from
Aug 21, 2024

Conversation

kabaros
Copy link
Contributor

@kabaros kabaros commented Jul 1, 2024

fixes https://dhis2.atlassian.net/browse/DHIS2-17668

This PR updates the handling of custom datasets to allow display custom HTML and CSS - this is made safe by using react-html-parser (similar to other applications like data-entry).

We created a new component for displaying custom datasets, rather than sanitising all input, to avoid adding unnecessary overhead for the vast majority of usecases that don't use custom datasets.

Screenshots

Before After
image image

@dhis2-bot
Copy link
Contributor

dhis2-bot commented Jul 1, 2024

🚀 Deployed on https://pr-338--dhis2-data-approval.netlify.app

@kabaros kabaros force-pushed the fix/DHIS2-17668 branch 3 times, most recently from 618145a to 76cc4d8 Compare July 1, 2024 15:06
@kabaros kabaros force-pushed the fix/DHIS2-17668 branch 4 times, most recently from d2a0f63 to 0b01d22 Compare August 20, 2024 11:04
@kabaros kabaros changed the title fix(DHIS2-17668): sanitise HTML in table instead of showing it as text fix(DHIS2-17668): sanitise HTML in table instead of showing it as encoded text Aug 20, 2024
@kabaros kabaros force-pushed the fix/DHIS2-17668 branch 3 times, most recently from bbc0b45 to 80be548 Compare August 20, 2024 11:41
@kabaros kabaros marked this pull request as ready for review August 20, 2024 11:43
@kabaros kabaros requested review from a team as code owners August 20, 2024 11:43
@tomzemp tomzemp self-requested a review August 20, 2024 12:22
Copy link
Member

@tomzemp tomzemp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks 🙏

<DataTableToolbar columns={columns.length}>
<span
dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(title),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this seems like the title should not be HTML? Isn't this just the dataset name, and so if someone calls their dataset <h2>My data set</h2>, I guess they should get that string literal back? Not parsed HTML?


// Needs to have the same width as the table, so can't use the one from
// @dhis2/ui
const DataTableToolbar = ({ children, columns }) => (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor: It's not immediately obvious that columns is a number here. columnCount would be more descriptive maybe?

@kabaros kabaros merged commit 9c3d5c6 into master Aug 21, 2024
16 checks passed
@kabaros kabaros deleted the fix/DHIS2-17668 branch August 21, 2024 16:50
@dhis2-bot
Copy link
Contributor

🎉 This PR is included in version 100.0.12 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants