Do we have any guidance on special characters for input fields?

[mjanssen2021]

My dev team mates and i are implementing a notes input field for Verify.

We wanted to ask if the paste team had any recommendations on limiting special characters? We want to allow end users to write notes but we acknowledge that those notes might also contain characters used in various languages. Are there any special characters we should not allow? Thanks.

[andioneto]

Hello @mjanssen2021, great question! I will circle back to you with some more information after I discuss with the team.

To clarify, are you wondering if there are special characters that should not be allowed within a specific kind of text box for web security purposes (e.g. preventing XSS attacks) or purely for user experience?

[TheSisb]

We don't have any guidance in regards to character allow/deny lists in input fields. It is more of a back-end concern than a front-end concern.

My personal suggestion would be to allow all user submit characters in the UI if there's no UI restrictions (i.e. only uppercase characters allowed or something similar), but to sanitize it in the back-end.

[mjanssen2021]

@TheSisb What does "Sanitize the back end" mean? :) I just don't have a good grasp of that.

[TheSisb]

@mjanssen2021 Due to malicious actors on the web, you can't trust user input. Therefore, if we accept user input and then serve it back somewhere to other users or run a query against it, we need to make sure there's nothing dangerous about it. Let's say there's an input box asking for a user name, which we then display on a members list page. If we type some code instead of a name (i.e.: <script>alert(document.cookie)</script>), then when we load that content on the members page as-is, an alert would appear.

This is a simple example for the purpose of explaining why you can't trust user-input. React wouldn't actually run that particular bit of code unless you do something weird on the UI, however there are other types of attacks.

All that said, you can't sanitize input on the front-end (in JS) because the user can disable that JS or hit the API directly. Which is why the back-end needs to run the sanitization process at some point. Which means it isn't something we, as a design system, can advise on.

[mjanssen2021]

@andipants12 We weren't sure if there was just any guidance for best practice generally speaking (security or ux otherwise).

[mjanssen2021]

@TheSisb Got it! I think this answers our question then - thank you!