Skip to content

Add Firebase validation rules and client-side guards for user name and avatar URL #196

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Copilot wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add Firebase validation rules and client-side guards for user name and avatar URL #196

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
440e7bb
Initial plan
Copilot Mar 25, 2026
8564571
Add Firebase protection against abusive names and avatar URLs
Copilot Mar 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 31 additions & 1 deletion database.rules.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,37 @@
".indexOn": "search",
"$uid": {
// Allow write access to owner
".write": "auth.uid === $uid"
".write": "auth.uid === $uid",
"uid": {
".validate": "newData.isString() && newData.val() === $uid"
},
"name": {
".validate": "newData.isString() && newData.val().length >= 1 && newData.val().length <= 64 && newData.val().matches(/\\S/)"
},
"search": {
".validate": "newData.isString() && newData.val().length >= 1 && newData.val().length <= 64"
},
"photoURL": {
".validate": "newData.isString() && newData.val().length <= 500 && newData.val().matches(/^https:\\/\\/\\S+/)"
},
"language": {
".validate": "newData.isString() && newData.val().length <= 35"
},
"fcmToken": {
".validate": "newData.isString() && newData.val().length <= 500"
},
"fcmTokens": {
"$token": {
"ts": {
".validate": "newData.isNumber()"
},
"ua": {
".validate": "newData.isString() && newData.val().length <= 500"
},
"$other": { ".validate": false }
}
},
"$other": { ".validate": false }
}
},
"matches": {
Expand Down
6 changes: 6 additions & 0 deletions src/Dialogues/Profile.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,4 +26,10 @@
display: block;
margin: 1em auto;
}

.profile-error {
color: var(--error-color, #d32f2f);
margin: 0.5em 0;
font-size: 0.9em;
}
}
31 changes: 29 additions & 2 deletions src/Dialogues/Profile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
import './Profile.css'
import CheckIcon from '@material-design-icons/svg/filled/check.svg?react';

export const LANGUAGES = ["af", "af-NA", "af-ZA", "agq", "agq-CM", "ak", "ak-GH", "am",

Check warning on line 12 in src/Dialogues/Profile.tsx

View workflow job for this annotation

GitHub Actions / test 

Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components
"am-ET", "ar", "ar-001", "ar-AE", "ar-BH", "ar-DJ", "ar-DZ",
"ar-EG", "ar-EH", "ar-ER", "ar-IL", "ar-IQ", "ar-JO", "ar-KM",
"ar-KW", "ar-LB", "ar-LY", "ar-MA", "ar-MR", "ar-OM", "ar-PS",
Expand Down Expand Up @@ -113,13 +113,38 @@
type ProfileProps = {
user: SnapshotOrNullType,
}
const MAX_NAME_LENGTH = 64;
const MAX_PHOTO_URL_LENGTH = 500;

function validateProfile(editing: User): string | null {
if (!editing.name?.trim()) return 'Name is required.';
if (editing.name.length > MAX_NAME_LENGTH) return `Name must be ${MAX_NAME_LENGTH} characters or fewer.`;
if (editing.photoURL) {
try {
const url = new URL(editing.photoURL);
if (url.protocol !== 'https:') return 'Avatar URL must start with https://';
} catch {
return 'Avatar URL must be a valid URL starting with https://';
}
if (editing.photoURL.length > MAX_PHOTO_URL_LENGTH) return `Avatar URL must be ${MAX_PHOTO_URL_LENGTH} characters or fewer.`;
}
return null;
}

export default function Profile({ user }: ProfileProps) {
const { toggle } = useContext(DialogContext)!;
const [editing, setEditing] = useState<User>(user?.val() || { uid: '', name: '', language: '', photoURL: '' });
const [error, setError] = useState<string | null>(null);

const save = useCallback(async (event: React.PointerEvent<HTMLAnchorElement>) => {
event.preventDefault();
if (!editing) return;
const validationError = validateProfile(editing);
if (validationError) {
setError(validationError);
return;
}
setError(null);
const userRef = firebase.database().ref(`users/${user!.key}`);
userRef.set(editing);
console.log('Saved', editing);
Expand All @@ -128,6 +153,7 @@

const generateOnChange = (key: string) => (event: ChangeEvent<HTMLInputElement|HTMLSelectElement>) => {
setEditing(editing => ({ ...editing, [key]: event.target.value }));
setError(null);
};

return <form id="profile">
Expand All @@ -142,9 +168,10 @@
</a>
</h1>
</header>
{error && <p className="profile-error">{error}</p>}
<label>
Name
<input autoFocus type="text" name="name" value={editing.name} onChange={generateOnChange('name')} placeholder="Name" />
<input autoFocus type="text" name="name" value={editing.name} onChange={generateOnChange('name')} placeholder="Name" maxLength={MAX_NAME_LENGTH} />
</label>
<label>
Language
Expand All @@ -156,7 +183,7 @@
</label>
<label>
Avatar URL
<input type="text" name="photoURL" value={editing.photoURL || ''} onChange={generateOnChange('photoURL')} placeholder="Photo URL" />
<input type="text" name="photoURL" value={editing.photoURL || ''} onChange={generateOnChange('photoURL')} placeholder="https://" maxLength={MAX_PHOTO_URL_LENGTH} />
</label>
<Avatar user={editing} />
</form>
Expand Down
Loading