使用JavaScript管理Web应用程序权限策略

时间:2015-01-20 08:49:28

标签: javascript web-applications single-page-application user-permissions usergroups

我非常好奇地知道什么策略通常使用不同的开发人员来管理用户权限策略到单页Web应用程序的不同部分。

  

仅针对一个案例:在单页面web应用程序下我指的是只有一个HTML(JSP,PHP,无论)页面作为入口点的Web应用程序以及所有其他客户端UI组件/页面构建用JavaScript)。

是否有任何最佳实践,方法或框架可以使这些事情变得更加简单明了?

让我们举个例子:

  • 有一个单页面的Web应用程序,包含2个选项卡:A和B
  • 每个标签有3个组件(网格,按钮等):A1,A2,A3和B1,B2, B3
  • 有3个用户组:U1,U2和U3
  • U1可以访问两个标签和所有组件
  • U2可以访问两个选项卡,但只能访问组件A1和B1
  • U3只能访问标签A和此标签中的所有组件

表面上的一个解决方案是在页面加载(或使用单独的AJAX请求)上构建全局JS对象,并将用户组存储在那里。然后使用代码中的条件来验证当前组并允许或限制特定功能。一个简化的例子看起来像这样:

的index.html

<script type="text/javascript">
    window.onload = function() {                
        MyApplication = {
            userGroup : 'U3' // can be also U1 or U2. This value comes from server
        };
    }
</script>   

然后在代码中我们将进行如下检查:

if (MyApplication.userGroup == 'U1') {...}
if (MyApplication.userGroup == 'U1' || MyApplication.userGroup == 'U2') {...}
if (MyApplication.userGroup != 'U3') {...}

可以根据用户组以不同方式处理事件的方案扩展该示例。 让我们说A1是按钮,A1OnClickHandler是它的点击处理程序:

var A1OnClickHandler = function() {
    if (MyApplication.userGroup == 'U1') {
        console.log('A very private information'); 
    } else if (MyApplication.userGroup == 'U2') {
        console.log('Less private information'); 
    } else if (MyApplication.userGroup == 'U3') {
        console.log('Public information'); 
    }
}

我描述的方法的一个缺点是可以在呈现页面后动态更改MyApplication.userGroup的值。只需打开控制台并输入:

MyApplication.userGroup = 'U1';

Bingo,U3组的用户现在拥有U1的权利,并且能够看到A1点击的私人信息。 好吧,由于初始条件,他仍然无法看到那些尚未在页面上呈现的组件。但他仍然可以在这些检查后的条件下访问可用的功能。

老实说,由于无法在网络上找到与此问题相关的任何具体信息,我感到有些惊讶。我想念什么吗? 如果有人可以分享自己解决这类事情的经验,那将会很有趣。

更新:当然,U2 U3组用户不应该执行的所有操作都不会在服务器上执行,因为服务器上也有安全检查。例如,即使黑客能够在前端显示按钮或字段,也不会在后端执行该操作。但我正在寻找的并不是在前端提供机会做这类事情。

1 个答案:

答案 0 :(得分:0)

您不能将JavaScript用于与权限或安全性相关的任何内容:用户只需打开浏览器控制台并编辑JavaScript即可。所以这种方法是禁止的(好吧,除非你根本不关心)。

正确的解决方案是在服务器上实现安全性,并且只将这些组件发送到浏览器,某个用户(您通过某种登录方式识别)可以根据服务器上存储的权限实际查看/使用这些组件。 / p>

如果某个组件包含敏感部件,那么您需要找到一种方法将其拆分并将不同版本发送到浏览器,具体取决于用户。

[编辑] 尝试找出将脚本拆分为较小部分(组件)的方法。 ZK Framework的工作方式如下:您有一个HTML组件框架(组件= JavaScript,HTML模板+ CSS)以及一个JavaScript核心,可以根据服务器准备的JSON配置加载组件并对其进行配置。

这样,您可以在PHP中构建UI结构,将其转换为JSON,将其发送到客户端,客户端将使用此“配置”呈现UI。组件将可重复使用,并且对所有客户端都是相同的。根本不需要检查客户端的权限,因为客户端代码永远不需要知道。