防止 React 和 NodeJS 中的 XSS 攻击
我正在开发一个简单的后期应用程序，使用 React 作为前端，使用 NodeJS + MySQL 作为 em>后端。考虑到安全性，我想知道应该在哪里进行用户输入清理 - 在 React form 组件级别的客户端上，或者更确切地说，在 React 组件级别的服务器端上用户发送数据后的>NodeJS代码？我特别询问 xss 攻击，例如防止将 JS 代码作为帖子内容/正文发布。
I'm developing a simple post application using the React for a front-end and NodeJS + MySQL for back-end. Considering the security I'm wondering where the user input sanitizing should take place - on the client side on the React form component level or rather on the server side in the NodeJS code after the user sends the data? I'm asking especially about the xss attacks , for example to prevent for posting a JS code as a post content/body.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
在将数据发送到服务器之前，不要在客户端进行清理 - 客户端可以自由运行他们想要的任何 JavaScript 验证代码（包括无），并可以将他们想要的任何内容 POST 到您的服务器。
一个好的方法是尽快安全地进行消毒。这样做将导致您的数据库存储经过清理的值，这意味着安全性将不依赖于在从数据库渲染某些内容时记住在客户端上进行清理。不过，在渲染时对客户端进行清理不会有任何危害 - 它不会增加任何明显的开销，并且会提供一个额外的层，以防您有一个端点在保存到之前错误地没有清理。数据库。
Don't sanitize on the client-side before the data is sent to the server - clients are free to run whatever JavaScript validation code they want (including none), and to POST to your server whatever they want.
A good approach is to sanitize as soon as safely possible. Doing this will result in your database storing sanitized values, which means that security will not depend on also remembering to sanitize on the client whenever rendering something from the database. There wouldn't be any harm in also sanitizing on the client when rendering, though - it wouldn't add any noticeable overhead, and would provide an extra layer in case you had an endpoint that you mistakenly didn't sanitize before saving to the database.
如果你让 React 自己进行 DOM 操作，而不是强制地手动操作，那么你就不用担心太多。只要你远离诸如 dangerouslySetInnerHTML 之类的东西或手动改变 DOM 。
话虽如此，您可以采取一些措施来使其更加安全，例如在您使用 DOMPurify除了angerlySetInnerHTML 之外别无选择。
您还可以在将用户生成的内容保存到数据库之前对其进行清理，这样不仅可以防止 XSS，还可以防止任何类型的 RCE（如果您知道这些值可能会被其他程序使用并希望进行防御）。但对于 React 中的 XSS，我不会太担心，只有通过 React 中的逃生舱口，你才能设法让自己陷入 XSS 问题。
这是关于该主题的好读物 https://www. stackhawk.com/blog/react-xss-guide-examples-and-prevention
If you are letting React do the DOM manipulation itself rather than doing it by hand imperatively you don't have a lot to worry about. As long as you stay away from things like dangerouslySetInnerHTML or mutating the DOM by hand.
That being said, there are some things that you can adopt to make it even safer like using DOMPurify when you have no alternative to dangerouslySetInnerHTML.
You could also sanitize user generated content before persisting it to the database to not only prevent XSS but any sort of RCE if you know these values might be consumed by other programs and want to be defensive. But for XSS in React I wouldn't worry too much, It's only through the escape hatches in React that you would manage to get yourselve into an XSS issue.
Here is a good read on the topic https://www.stackhawk.com/blog/react-xss-guide-examples-and-prevention