用户可以更改 Chrome 中 Redux/Mobx 的值以获得对受限视图的访问权限吗？
Can a user change the value of Redux/Mobx in Chrome to gain access to restricted views?
我有一个 React + firebase 应用程序。在用户的集合中，我有一个权限对象，我可以在其中跟踪用户有权访问的内容。然后在我的反应应用程序中，我有以下内容：
// Login component
const userRecord = await Firebase.login(email,password)
store.user = await this.fetchUser(userRecord.uid)
对于仅限管理员的视图，我将它们包装在一个 withAuthorization HOC 中，我在其中检查 store.user.permissions.admin
// Not exactly this, but this is the general idea
{store.user.permissions.admin && <RestrictedView />
我的问题是，用户可以更改 chrome 中的权限值以获得对受限视图的访问权限吗？如果是这样，是否有更好的方法？我最终可能会使用 customClaims，但现在想使用上面的。
提前致谢！
始终假设对手可以完全控制浏览器。
通常情况下，如果您希望您的应用程序免受恶意实体的侵害，它的安全性必须来自服务器。制作 authorization/bearer 令牌或可由您的服务器验证的 cookie 方案（即 https://jwt.io/）。然后只允许根据该信息将数据发送给您想要发送给的用户。 Security/validation 在前端更多的是确保用户不会无意中把事情搞砸。
用户完全有能力通过各种开发工具修改您在浏览器中的任何 HTML/CSS/JS。
用户可以完全访问通过 JavaScript 发送的任何信息（即使它被缩小了，也有工具可以在某种程度上取消缩小）。
使用 React 的开发工具可以很容易地修改所有 React 状态，如果您使用的是 redux，则可能设置了 redux 开发工具。
在 firebase 中，有一整个 section on security in the docs. Set up the data that would be behind your RestrictedViews to require the levels of authentication you need them to. Make sure that firebase does it's share of your application security. The section on insecure rules is also a good place to start reading up on what firebase can do for you and how to configure their security rules。
进一步阅读：
OWASP Top Ten (2017) Broken Access Control（加粗表示强调）
Access control is only effective if enforced in trusted server-side
code or server-less API, where the attacker cannot modify the access
control check or metadata.
With the exception of public resources, deny by default.
Implement access control mechanisms once and re-use them throughout the application, including minimizing CORS usage.
Model access controls should enforce record ownership, rather than accepting that the user can create, read, update, or delete any
record.
Unique application business limit requirements should be enforced by domain models.
Disable web server directory listing and ensure file metadata (e.g. .git) and backup files are not present within web roots.
Log access control failures, alert admins when appropriate (e.g. repeated failures).
Rate limit API and controller access to minimize the harm from automated attack tooling.
JWT tokens should be invalidated on the server after logout. Developers and QA staff should include functional access control unit and integration tests.
Understanding React Frontend security
We need to make one thing clear — everything you put in the client
browser can be easily changed by the client.
在那篇文章的后面：
How do I prevent the user from accessing non-public parts of my site?
You do it exactly as you though to do it — you create a variable, set
it to true for admins only and once the check passes, show the admin
only content.
“Ok, that’s not secure at all — everyone can then go to the admin page
and delete everything!” you scream.
Fair — but only if you implement your application in a bad way. The
frontend part should not be concerned with the validity or not of
credentials provided. It should always accept the data as “true” and
just render all the data it is passed.
It it’s the backend job to perform this validation!
我有一个 React + firebase 应用程序。在用户的集合中，我有一个权限对象，我可以在其中跟踪用户有权访问的内容。然后在我的反应应用程序中，我有以下内容：
// Login component
const userRecord = await Firebase.login(email,password)
store.user = await this.fetchUser(userRecord.uid)
对于仅限管理员的视图，我将它们包装在一个 withAuthorization HOC 中，我在其中检查 store.user.permissions.admin
// Not exactly this, but this is the general idea
{store.user.permissions.admin && <RestrictedView />
我的问题是，用户可以更改 chrome 中的权限值以获得对受限视图的访问权限吗？如果是这样，是否有更好的方法？我最终可能会使用 customClaims，但现在想使用上面的。
提前致谢！
始终假设对手可以完全控制浏览器。
通常情况下，如果您希望您的应用程序免受恶意实体的侵害，它的安全性必须来自服务器。制作 authorization/bearer 令牌或可由您的服务器验证的 cookie 方案（即 https://jwt.io/）。然后只允许根据该信息将数据发送给您想要发送给的用户。 Security/validation 在前端更多的是确保用户不会无意中把事情搞砸。
用户完全有能力通过各种开发工具修改您在浏览器中的任何 HTML/CSS/JS。
用户可以完全访问通过 JavaScript 发送的任何信息（即使它被缩小了，也有工具可以在某种程度上取消缩小）。
使用 React 的开发工具可以很容易地修改所有 React 状态，如果您使用的是 redux，则可能设置了 redux 开发工具。
在 firebase 中，有一整个 section on security in the docs. Set up the data that would be behind your RestrictedViews to require the levels of authentication you need them to. Make sure that firebase does it's share of your application security. The section on insecure rules is also a good place to start reading up on what firebase can do for you and how to configure their security rules。
进一步阅读：
OWASP Top Ten (2017) Broken Access Control（加粗表示强调）
Access control is only effective if enforced in trusted server-side code or server-less API, where the attacker cannot modify the access control check or metadata.
With the exception of public resources, deny by default.
Implement access control mechanisms once and re-use them throughout the application, including minimizing CORS usage.
Model access controls should enforce record ownership, rather than accepting that the user can create, read, update, or delete any record.
Unique application business limit requirements should be enforced by domain models.
Disable web server directory listing and ensure file metadata (e.g. .git) and backup files are not present within web roots.
Log access control failures, alert admins when appropriate (e.g. repeated failures).
Rate limit API and controller access to minimize the harm from automated attack tooling.
JWT tokens should be invalidated on the server after logout. Developers and QA staff should include functional access control unit and integration tests.
Understanding React Frontend security
We need to make one thing clear — everything you put in the client browser can be easily changed by the client.
在那篇文章的后面：
How do I prevent the user from accessing non-public parts of my site?
You do it exactly as you though to do it — you create a variable, set it to true for admins only and once the check passes, show the admin only content.
“Ok, that’s not secure at all — everyone can then go to the admin page and delete everything!” you scream.
Fair — but only if you implement your application in a bad way. The frontend part should not be concerned with the validity or not of credentials provided. It should always accept the data as “true” and just render all the data it is passed.
It it’s the backend job to perform this validation!