fix: encode username in constructed gravatar URL

[tomaioo]

Summary

Security: Unencoded username in API route construction

Problem

Severity: Medium | File: app/components/User/Avatar.vue:L30

The username is inserted directly into /api/gravatar/${props.username}. A crafted username containing path separators or reserved URL characters can change the effective request path and potentially hit unintended endpoints.

Solution

Wrap the username with encodeURIComponent(props.username) when constructing the URL path.

Changes

• app/components/User/Avatar.vue (modified)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Apr 12, 2026 0:26am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Apr 12, 2026 0:26am
npmx-lunaria	Ignored		Apr 12, 2026 0:26am

[coderabbitai]

📝 Walkthrough

Walkthrough

The Avatar component updates the Gravatar lookup request to URL-encode props.username using encodeURIComponent when building the /api/gravatar/... endpoint; no other logic, transform, caching or rendering behavior was changed.

Changes

Cohort / File(s)	Summary
URL Encoding for Gravatar Request app/components/User/Avatar.vue	Changed the useLazyFetch request URL from /api/gravatar/${props.username} to /api/gravatar/${encodeURIComponent(props.username)} to ensure special characters in usernames are URL-encoded.

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description is directly related to the changeset, clearly explaining the security vulnerability, its severity, location, and the proposed solution.
Title check	✅ Passed	The pull request title accurately describes the main change: encoding the username in the Gravatar API URL to address a security vulnerability.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Hello! Thank you for opening your first PR to npmx, @tomaioo! 🚀

Here’s what will happen next:

1. Our GitHub bots will run to check your changes.
   If they spot any issues you will see some error messages on this PR.
   Don’t hesitate to ask any questions if you’re not sure what these mean!

2. In a few minutes, you’ll be able to see a preview of your changes on Vercel

3. One or more of our maintainers will take a look and may ask you to make changes.
   We try to be responsive, but don’t worry if this takes a few days.

[codecov]

Codecov Report

❌ Patch coverage is 80.00000% with 1 line in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/User/Avatar.vue	80.00%	0 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

[serhalp]

Good catch, thank you!

[github-actions]

Thanks for your first contribution, @tomaioo! 💪

We'd love to welcome you to the npmx community. Come and say hi on Discord! And once you've joined, visit npmx.wamellow.com to claim the contributor role.