RocketChat / RocketChat/Rocket.Chat
fix(integrations): Incoming Webhook 'Avatar URL' field has no validation
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 46.1k
- Forks
- 13.9k
- Avg merge
- 3d 3h
- Merged PRs (30d)
- 130
Description
Description:
When creating a new Incoming Webhook, the "Avatar URL" field does not have any client-side validation. It allows the user to save any invalid string (e.g., "jjjj"), even though the help text says, "Should be a URL of an image."
This can lead to a broken avatar icon for the integration's posts and user confusion.
Steps to reproduce:
Navigate to Administration > Integrations.
Click the "New" button in the top-right corner.
Select the "Incoming" tab (this is the default).
Fill in all required fields (e.g., Name: Test Avatar, Post to Channel: #general, Post as: Kalyan12).
Scroll down to the "Avatar URL" field.
Type an invalid string that is not a URL (e.g., jjjj or not-a-url).
Click the "Save" button at the bottom.
Expected behavior:
The form should not save. Because a value was provided, it should be validated. An error message (like a pop-up toast) should appear, stating "Please enter a valid URL."
If the field is left empty, it should save successfully.
Actual behavior:
The form saves successfully with the invalid string in the "Avatar URL" field. A green "Integration has been saved" toast message appears, and the integration is created with a broken avatar.
Server Setup Information:
Version of Rocket.Chat Server: develop (running from local source)
License Type: Community
Operating System: Ubuntu (via WSL)
Deployment Method: Local development (from source)
NodeJS Version: 22.16.0
MongoDB Version: 6.10.0
Client Setup Information
Desktop App or Browser Version: Chrome (latest)
Operating System: Windows
Additional context:
This appears to be a similar root cause as Issue #37411 (for Outgoing Webhooks). The IncomingWebhookForm.tsx (or its parent component) is missing a client-side validation rule (like a validate function or pattern) in react-hook-form for the avatar field.
Relevant logs:
No server or console logs are generated because the application incorrectly treats this as a successful operation. The bug is the absence of a validation error.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with IncomingWebhookForm.tsx or its parent component and reproduce the invalid Avatar URL submission using the steps in the issue. Check how the Avatar URL field is registered and how save errors are displayed. Done means invalid non-empty values are rejected with a validation message while an empty field can still be saved.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 48/100