Potential fix for code scanning alert no. 2: DOM text reinterpreted as HTML

[linuskang]

Potential fix for https://github.com/bubblymaps/maps/security/code-scanning/2

The best way to resolve this issue is to validate and sanitize the user-provided URL before setting it in the imageUrl state and passing it to the <img src> attribute. Specifically, ensure that the URL conforms to expected schemes (http, https) and points to a legitimate image file (e.g., ends with .jpg, .jpeg, .png, .gif, .webp). This should be done in the handler for the input field: before updating the state, check validity and only set the value if the requirements are met. Additionally, provide user feedback if their input is invalid.

You also must do this validation whenever the value is used in the src attribute: if for any reason a previously-stored value could be invalid, it should not be rendered (or should be rendered in a non-dangerous way or with a fallback image). A simple, robust fix is to add a utility function that validates the image URL, call it on input change, and only update the state (and render the image) if the URL passes the checks.

Specifically:

• Add a function (e.g., isValidImageUrl) in the file that checks for a valid image URL (scheme and extension).
• In the onChange handler for the image URL input, only allow setting the state if the entered value is valid, or set an error state/message otherwise.
• When rendering the <img> element, only render it if the stored value passes validation (defense in depth).

---

Suggested fixes powered by Copilot Autofix. Review carefully before merging.

[github-actions]

👋 Thanks for opening your first pull request!

Please make sure you've:

• ✅ Read the contributing guidelines
• ✅ Tested your changes locally
• ✅ Added appropriate documentation

A maintainer will review your PR soon.