How do you display user values safely when using Firebase?

Question

I've currently been setting up a website that uses Firebase Auth as its authentication system. When I was reading through the docs about getting information from a user's profile, I came across this text.

Be careful when setting (and later displaying) potentially user-facing UI values like displayName and photoURL. The API does not filter the values to prevent potential XSS-type attacks.

I was curious about how one would go about safely displaying a user's displayName to prevent XSS-type attacks?

Answer 1

Since users can insert anything they want in the displayName and photoURL values in their profile, it is important that you always treat those values as potentially dangerous and don't mix them with your code.

If you're directly inserting the values into the DOM/HTML in client-side application code, the best way to do that is through a property like textContent which will automatically encode any non-text values.

Similarly in server-side code, you can use a HTML encoding function of your platform, like this one for .NET.

For more on this, see:

• Is it safe to display user input as input values without sanitization?
• Safe Way to Include User Text Input in HTML
• Show HTML user input, security issue