CHI-3741: Render HTML in checkbox labels in Aselo Webchat#4119
CHI-3741: Render HTML in checkbox labels in Aselo Webchat#4119stephenhand wants to merge 6 commits intomasterfrom
Conversation
There was a problem hiding this comment.
Pull request overview
This PR updates the Aselo Webchat localization rendering to optionally allow inline HTML, and enables that option specifically for pre-engagement form checkbox labels.
Changes:
- Add a
renderAsHtmloption toLocalizedTemplatethat renders translation output viadangerouslySetInnerHTML. - Enable HTML rendering for checkbox labels in the pre-engagement form.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| aselo-webchat-react-app/src/localization/LocalizedTemplate.tsx | Adds an opt-in HTML rendering path for localized template output. |
| aselo-webchat-react-app/src/components/forms/formInputs/Checkbox.tsx | Uses the new HTML rendering option for checkbox labels. |
| if (renderAsHtml?.toLowerCase() === 'true') { | ||
| // eslint-disable-next-line react/no-danger | ||
| return <span dangerouslySetInnerHTML={{ __html: translateForCurrentLocale(code, parameters) }} />; | ||
| } |
There was a problem hiding this comment.
renderAsHtml switches to dangerouslySetInnerHTML with the raw output of translateForCurrentLocale(...). Since translations are loaded from runtime config, this can become an XSS vector if any translation content is ever user/admin-controlled. Please sanitize/allowlist the HTML before injecting it (or parse to React elements with a strict allowlist) and explicitly prevent unsafe tags/attrs like script, on* handlers, and javascript: URLs.
There was a problem hiding this comment.
@copilot apply changes based on this feedback
The ideally the allow list should only permit links and text decoration / style changes
There was a problem hiding this comment.
Added DOMPurify sanitization in commit e2a099b. The allowlist only permits links (<a> with href and rel attributes) and text decoration/style tags (<b>, <i>, <em>, <strong>, <u>, <s>, <span>, <br>). All other tags, event handlers (on*), javascript: URLs, and unsafe attributes are blocked by DOMPurify.
…ox.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…wlist Agent-Logs-Url: https://github.com/techmatters/flex-plugins/sessions/9f17a15b-7ff7-4dff-b42e-0cb54d652053 Co-authored-by: stephenhand <1694716+stephenhand@users.noreply.github.com>
|
Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details. Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
… into CHI-3741-html_in_webchat_labels # Conflicts: # aselo-webchat-react-app/src/localization/LocalizedTemplate.tsx
Description
renderAsHtmloption toLocalizedTemplatecomponent to allow inline HTML rendering<a>,<b>,<i>,<em>,<strong>,<u>,<s>,<span>,<br>; onlyhrefandrelattributes permitted) to prevent XSSrenderAsHtmlfor checkbox labels only (we want to try to use it as little as possible)Checklist
Other Related Issues
None
Verification steps
AFTER YOU MERGE
You are responsible for ensuring the above steps are completed. If you move a ticket into QA without advising what version to test, the QA team will assume the latest tag has the changes. If it does not, the following confusion is on you! :-P