What is a good way to implement user input sanitization (to prevent XSS)?
I've always been using dompurify to help with user input sanitization but it doesn't seem to work on the convex mutations. I think this could be because of the stripped down nodejs environment that convex uses. (Not sure if im right)
What are some other ways that you guys have implemented user input sanitization? Right now I've got some basic santization by using regex to filter out html elements but I'm hoping to use an opensourced library instead so I don't have to always keep up to date with any XSS prevention changes.
14 Replies
Thanks for posting in <#1088161997662724167>.
Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets.
- Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.)
- Use search.convex.dev to search Docs, Stack, and Discord all at once.
- Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI.
- Avoid tagging staff unless specifically instructed.
Thank you!
Before I answer this question intensivly, what is the type of your input? is it supposed to be on doing something on your form or just passing in user Form?
if you're doing something like a text editor, don't use
dangersoulySetInnerHtml, I personally use Rehype, it does the work well for my use casesIts just text and im using Rehype along with react-markdown to render it.
GitHub
GitHub - rehypejs/rehype-sanitize: plugin to sanitize HTML
plugin to sanitize HTML. Contribute to rehypejs/rehype-sanitize development by creating an account on GitHub.
I've used this plugin before
Ah this looks interesting
yep, I think it would work well with your current plugin you just need to install it
The examples provided look like they're all client side though. Do you know if this works on the server side as well? I haven't had much experience with these kinds of libraries
it sure does
rehype works on server and client side
Oh that's amazing
are using something else to render your mark down? like TipTap for instance
usually they have stuff like that out of the box
Nope just using simple react markdown to render everything https://www.npmjs.com/package/react-markdown/v/8.0.6
npm
react-markdown
React component to render markdown. Latest version: 10.1.0, last published: 4 months ago. Start using react-markdown in your project by running
npm i react-markdown. There are 3718 other projects in the npm registry using react-markdown.Thank you for the help!
looks good, good luck!