保护 SPA 中的 HTML 元素

Question

我正在开发 SPA 并想知道在页面上显示和隐藏 HTML 元素的最佳方法是什么取决于用户凭据。

我有一个使用 AngularJS 的 RestfulAPI 后端和 JS 重客户端。获得身份验证后，我希望页面的某些元素变得可见，而其他元素则取决于用户有权执行的操作。
现在，我在身份验证时从服务器发送一个 JSON 对象，该对象包含权限列表（只是一个字符串数组）并根据权限数组中相应键的存在显示/隐藏元素。
我有我的服务器端 API，并确保在处理每个请求之前 - 用户授权。
我认为，这将帮助我防止人们篡改我的 HTML 和 JS 并在客户端启用元素并尝试发出他们未经授权的请求。

作为另一个级别的伪安全，我确保发送给客户端的权限名称只是实际权限的别名。当 API 尝试授权请求时，它查找的声明会以不同的方式命名。
我的问题是 - 这是一种安全的方法吗？
那里有更好的方法吗？
我是否应该仅在授权后才从服务器获取 HTML 模板，该模板仅包含用户有权查看的 HTML？
如果我的服务器端授权是无懈可击的，那么用户查看所有 HTML 的能力是否重要？

Answer 1

如果我的服务器端授权是无懈可击的，那么用户查看所有 HTML 的能力是否重要？

你问题的最后一部分确实是整件事的关键。

您的服务器授权必须是密封的，因为没有什么可以阻止任何人向您的 ajax API 发出直接 http 请求。一旦 API 是公开的（一旦您发布了您的网站），那么任何人都可以调用这些 URL。因此，从安全角度来看，您的服务器代码需要绝对可靠。

但至于您的客户端代码，您是对的，这真的无关紧要。您无法阻止某人查看您网站上的 HTML、CSS 和 Javascript 代码，因此与其担心试图阻止他们这样做（这是不可能的），您需要集中精力确保它不会'没关系。

如果一个元素在页面上，那么用户就可以访问它。这就是客户端软件的本质。

但您需要保护的是这些元素中的数据，而不是元素本身。

如果不允许用户查看给定数据很重要，那么首先不要将其提供给他的浏览器。这是唯一的办法。一旦它在浏览器中，用户就可以完全访问它，因此在发送之前确保他已获得授权。