简体繁体 English

保护路由

[英]React Client-/Server-Side Rendering Security Issue, Hide/Protect Route

原文 2022-06-23 15:44:33 7 1 javascript/ reactjs/ jwt

i got a question about the rendering behaviour of react.我有一个关于反应的渲染行为的问题。 Please correct me if I'm wrong, im new to React and Web Development.如果我错了，请纠正我，我是 React 和 Web 开发的新手。

Afaik the default rendering of a react SPA happens on the client side, right? Afaik React SPA 的默认渲染发生在客户端，对吗？

So this means the whole JSX code in the src directory will be downloaded on the first visit of the page (see image of the Chrome WebDeveloper Tools Source Tab) , right?所以这意味着 src 目录中的整个 JSX 代码将在第一次访问页面时下载（参见 Chrome WebDeveloper 工具源选项卡的图像），对吗？

Let's assume i would develop an admin area where only authorized users should have access to, eg through JWT, the JS-Code still contains information about the admin area, even if it's not rendered, a guy with the corresponding knowledge could get access to the area because all information about the admin area is already downloaded to the client computer, right?假设我将开发一个只有授权用户才能访问的管理区域，例如通过 JWT，JS 代码仍然包含有关管理区域的信息，即使它没有呈现，具有相应知识的人也可以访问区域，因为有关管理区域的所有信息都已下载到客户端计算机，对吗？

Sure i can protect sensitive data through the api and JWT Token, but what about if i don't want the client to know about the admin area content?当然我可以通过 api 和 JWT Token 保护敏感数据，但是如果我不想让客户知道管理区域的内容怎么办？ Is there a best practice for some kind of this case, eg a mix of client-side (default user content) and server-side (admin area content) rendering?对于这种情况是否有最佳实践，例如客户端（默认用户内容）和服务器端（管理区域内容）呈现的混合？ What would be the best way to do this?最好的方法是什么？ What are the advantages and disatvantages of client-/ or server-side rendering?客户端/或服务器端渲染的优缺点是什么？

Thank you && please be kind, as already mentioned i'm knew to React and WebDev && sorry for my english, i try to improve it continuously.谢谢 && 请善待，正如我已经提到的，我知道 React 和 WebDev && 对不起我的英语，我试图不断改进它。

1 个解决方案

Afaik the default rendering of a react SPA happens on the client side, right? Afaik React SPA 的默认渲染发生在客户端，对吗？

Not necessarily.不必要。 It depends on how you set up the project.这取决于您如何设置项目。

So this means the whole JSX code in the src directory will be downloaded on the first visit of the page所以这意味着 src 目录中的整个 JSX 代码将在页面第一次访问时被下载

Not necessarily.不必要。 eg see Webpack code splitting .例如，请参阅Webpack 代码拆分。

Sure i can protect sensitive data through the api and JWT Token, but what about if i don't want the client to know about the admin area content?当然我可以通过 api 和 JWT Token 保护敏感数据，但是如果我不想让客户知道管理区域的内容怎么办？

Don't put the content in the app.不要将内容放在应用程序中。 Keep it in the data that is protected by your JWT.将其保存在受 JWT 保护的数据中。

Or make your customer facing application and your admin application different apps in the first place.或者首先使您的面向客户的应用程序和您的管理应用程序成为不同的应用程序。

What are the advantages and disatvantages of client-/ or server-side rendering?客户端/或服务器端渲染的优缺点是什么？

Server-side rendering is faster on initial load, works when JS fails, and is better food for search engines.服务器端渲染在初始加载时更快，在 JS 失败时工作，并且是搜索引擎的更好食物。

Client-side rendering is faster on subsequent page loads.客户端渲染在后续页面加载时更快。

It's not really a factor in security.这并不是真正的安全因素。