[HOLD for payment 2023-11-22] [HOLD for payment 2023-11-21] [HOLD] [$1000] Web - Workspace allows to add only invisible characters as name

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Open the app
2. Open settings
3. Open workspaces
4. Open any workspace
5. Copy invisible characters from https://www.editpad.org/tool/invisible-character and observe that workspace allows to save the name

Expected Result:

App should not allow to save workspace name if we only use invisible characters for name

Actual Result:

App allows to save workspace name even if we only use invisible characters for name

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.43-2
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

invisible.characters.in.workspace.name.mp4

Expensify/Expensify Issue URL:
Issue reported by: @dhanashree-sawant
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1689878993909189

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01560ace6dc872a8c8
• Upwork Job ID: 1683861747204747264
• Last Price Increase: 2023-09-12
• Automatic offers:
• situchan | Reviewer | 26645014
• dhanashree-sawant | Reporter | 26645016

Issue Owner

Current Issue Owner: @peterdbarkerUK

[melvin-bot]

Triggered auto assignment to @alexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[samh-nl]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Workspace allows for invisible characters as the name

What is the root cause of that problem?

There is no check for validating that the invisible characters are not part of the provided input.

What changes do you think we should make in order to solve the problem?

1. In the Form component, we trim string values during validation:
   

   App/src/components/Form.js

   Lines 112 to 118 in dc32700

   	const onValidate = useCallback(
   	(values) => {
   	const trimmedStringValues = {};
   	_.each(values, (inputValue, inputID) => {
   	if (_.isString(inputValue)) {
   	trimmedStringValues[inputID] = inputValue.trim();
   	} else {

We can expand on this trimming with a regex replace so that also invisible characters are trimmed from the left and right sides. This will result in an empty string being passed to the validation function inside WorkspaceSettingsPage, therefore leading to an workspace.editor.nameIsRequiredError error.

2. We can optionally also apply this to ValidationUtils.isRequiredFulfilled. Currently, this is always called in the context of a Form validation, making the added value limited.

App/src/libs/ValidationUtils.js

Lines 85 to 88 in c3bafa6

	function isRequiredFulfilled(value) {
	if (_.isString(value)) {
	return !_.isEmpty(value.trim());
	}

What alternative solutions did you explore? (Optional)

Option 1. Specifically remove the invisible characters here (and potentially in other places also, e.g. tasks), or trigger an error that the provided input is invalid, based on the presence of these characters.
Option 2. Take a whitelist approach with a regex of allowed characters, such as CONST.REGEX.ALPHABETIC_CHARS_WITH_NUMBER.

This validation should also be performed on the backend.

[ayazhussain79]

you can also create task with invisible characters

[Ollyws]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The workspace allows invisible characters in the name.

What is the root cause of that problem?

We aren't validating the workspace name in WorkspaceSettingsPage.

What changes do you think we should make in order to solve the problem?

We should use similar validation in WorkspaceSettingsPage to what we currently use for new rooms, including the same regex which seems suitable for workspace names too.

What alternative solutions did you explore? (Optional)

None

[alexpensify]

I ran out of time yesterday, I'll review soon.

[melvin-bot]

Triggered auto assignment to @stitesExpensify (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[alexpensify]

@stitesExpensify - I've assigned the engineering label to identify if we think this will be a common problem. Let me know if I should start a discussion with the full Slack room instead, but I'm looking for feedback here. Thanks!

[stitesExpensify]

Yeah, I think this is worth fixing. I think that it will look like a bug on our end if people have empty names because it will look weird to display nothing next to other chats in the LHN for example.

[stitesExpensify]

This should have both a front-end and back-end fix so that people can't maliciously change their names on the API, and they get notified on the front end when the name is invalid

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01560ace6dc872a8c8

[melvin-bot]

Current assignee @alexpensify is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @situchan (External)

[alexpensify]

Thank you @stitesExpensify for the update! I'll remove you now to avoid confusion as we accept proposals.

[alexpensify]

@situchan when you get a chance, can you please review the submitted proposals to see if they will work to resolve this one? Thanks!

[alexpensify]

@situchan any update here on the proposals?

[situchan]

I think we should find general solution to fix this weird issue.
This happens on every place that has text input.

Screen.Recording.2023-07-31.at.5.57.32.PM.mov

No satisfactory proposals yet

[samh-nl]

Agreed. I have updated my proposal to put the fix in the Form component.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.98-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Handle invisible characters in forms #27414

If no regressions arise, payment will be issued on 2023-11-21. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

For reference, here are some details about the assignees on this issue:

• @kosmydel does not require payment (Contractor)
• @situchan requires payment offer (Reviewer)
• @dhanashree-sawant requires payment offer (Reporter)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@situchan] The PR that introduced the bug has been identified. Link to the PR:
• [@situchan] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@situchan] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@situchan] Determine if we should create a regression test for this bug.
• [@situchan] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@alexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.99-0 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Handle invisible characters in forms v2 #31259

If no regressions arise, payment will be issued on 2023-11-22. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

For reference, here are some details about the assignees on this issue:

• @kosmydel does not require payment (Contractor)
• @situchan requires payment offer (Reviewer)
• @dhanashree-sawant requires payment offer (Reporter)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@situchan] The PR that introduced the bug has been identified. Link to the PR:
• [@situchan] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@situchan] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@situchan] Determine if we should create a regression test for this bug.
• [@situchan] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@alexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[alexpensify]

I'm OOO next week, @peterdbarkerUK is going to step in and handle the payment process.

@situchan - before the payment date, please complete the checklist. Thanks!

[peterdbarkerUK]

@situchan could you take a swing at the PR checklist?

[situchan]

@peterdbarkerUK I assume you meant BZ checklist

There's no offending PR which caused this regression as issue itself is edge case.
We already added enough unit test cases in automated test so no need regression test.

[peterdbarkerUK]

Well shoot, you caught me lazily copying Al instead of re-reading the whole issue. Busted.

Agreed, will complete payout tomorrow

[peterdbarkerUK]

[$1000] paid to @situchan (C+ review)
[$250] offer sent to @dhanashree-sawant (please bump me once you've accepted!)

Edit: updated bug reporter payment

[dhanashree-sawant]

Hi @peterdbarkerUK, the issue was raised before 30 August, can you update the offer to 250$?

[peterdbarkerUK]

Right you are, updated and sent!

[dhanashree-sawant]

Thanks, I have accepted the offer.

[peterdbarkerUK]

Done, thanks everyone!

[alexpensify]

Thanks for your help @peterdbarkerUK to complete the payment process.