Question

我打算将Ext JS用于大型应用程序。应用程序的功能是基于角色的。用户登录时，只能看到与其相关的菜单和屏幕功能。我的服务器端技术将是Java＆amp; JSP。

要解决这个问题，我有两个想法 1.用户使用服务器端技术登录后，动态创建Ext JS相关的javascript。 servlet / JSP将根据用户角色创建必要的est js代码。

2.具有在视图JSP中设置的Js变量，这些变量将用于确保用户只能使用正确的功能。

确保安全性并在Ext Js应用程序中提供基于角色的UI的最佳方法是什么提前感谢您的想法..

Abdel Olakara

Answer 1

我必须在我当前开发的应用程序中解决类似问题，但权限基于用户所在国家。

我知道你已经存在，但只是为了任何人阅读的利益而重申，权限应始终在服务器端实现，而JavaScript安全性始终是次要的。这是因为任何半脑的人都可以使用bookmarklet或Firebug来执行任意JavaScript并绕过客户端安全。

我发现有几种方法可以做到这一点，但有两种方法尤其是最理智的方法。无论采用哪种方法，都需要考虑两件事：1）服务器的JavaScript以及如何避免服务于不必要的逻辑; 2）如何避免执行用户无法使用的逻辑。

延迟加载和权限配置：

我的应用程序中的所有小部件都是通过dojo.require延迟加载的，因此无需担心不适用于用户的不必要的JavaScript。我对ExtJs库并不是很熟悉，但就我所见，它没有提供类似的方法;但是，同步ajax调用后跟eval是必不可少的。在任何情况下，在这种方法中，重要的是组件功能不会跨越不同的文件（同样，这通常是好的设计）。每个文件都应该是自己的类，用于控制特定的小部件或其他UI元素。
然后我在服务器生成的JavaScript配置类中设置权限。然后，可以在整个应用程序中引用此类，以了解什么是不允许的内容。

例如，以下方法控制对全局控件中可用的大多数小部件的访问。

com.project.frontController.prototype.init = function(widgets) {
   var permissions = com.project.config.permissions;

   // For each widget in the controller
   for ( var i=0, l=widgets.length; i<l; ++i ) {
       // If access is restricted to the widget (by id), then disable it.
       if ( !permissions[ widgets[i].id ] {
           com.project.util.disable(widgets[i].btnAccessNode);
       }
       // Otherwise, leave it enabled and connect the necessary event handlers.
       else {
           // connect an onclick handler or whatever is required for the widget
       }
   }
};

配置看起来像：

com.project.config.permissions = {
    "widgetAbc": {
        btnAccessNode:     "#some-css-selector",
        otherWidgetConfig: "etc"
    },
    "widgetXyz": {
        btnAccessNode:     "div.some-css-selector"
    }
};

编译和功能检查：

有些应用程序会将所有JavaScript编译成一个文件，然后将其提供给客户端。如果您的应用程序执行此类操作，并且您可以设法动态执行此操作，则可以在服务器之前在服务器端确定所有必需的JS。当然，这会产生一些开销;但是，您可以按角色缓存已编译的版本。如果角色很少，那么这个缓存可以很容易地启动，只需要包含一个特定的脚本。
由于只有允许的JavaScript可用，只需在尝试执行它之前检测所需的类/功能是否可用，您只需进行权限检查即可。

例如，您的脚本包含可能如下所示：

<script type="text/javascript" src="/js/compiler.php?role=moderator"></script>

您的功能检查将是这样的：

com.project.frontController.prototype.init = function(widgets) {
   // For each widget in the controller
   for ( var i=0, l=widgets.length; i<l; ++i ) {
       // If the widget controller doesn't exist, disable it.
       if ( !com.project.util.widgetExists[ widgets[i].id ] {
           com.project.util.disable(widgets[i].btnAccessNode);
       }
       // Otherwise, leave it enabled and connect the necessary event handlers.
       else {
           // connect an onclick handler or whatever is required for the widget
       }
   }
};

或

com.project.someWidget.prototype.launchOtherWidget = function() {
    if ( typeof otherWidget != "undefined" ) {
        (new otherWidget()).open();
    }
};

请注意，这两种方法在实现上非常相似。我想说在两者之间做出决定的最佳方法是考虑代码库的大小，可用于动态编译的工具，以及缓存这些基于角色的编译包。对于我的项目，不仅编译器在环境中不可用，而且代码库很大（1.3mb膨胀/ 296kb默认加上dojo库），这是不可接受的，因为客户端对维护低应用程序负载更感兴趣次。

Answer 2

在我们公司，jsp根据当前用户的角色加载服务器创建的配置对象。然后客户端根据该配置进行渲染。

确实可以被黑客攻击，以便初始对象假装拥有比实际更多的权利;但是，当试图做一些他不允许的事情时，黑客会在服务器上遭到安全违规。所以基本上，应用安全性的客户端逻辑只是为了用户的利益，所以他看不到他能做的更多。服务器端检查（当请求操作时）实际上是强制执行安全性的。

Answer 3

始终强制执行服务器端安全性，将控件隐藏在前端中是不够的的修改
在客户端？好吧，您可以按照其他响应中的任何建议进行操作，但事实是用户可以执行任意javascript，修改页面的DOM并执行他想要的任何请求。

Answer 4

不要向客户端提供不允许用户查看的功能。您可以动态加载js文件，但您的应用服务器必须强制执行您的规则;没有角色，没有JS。

  var jsFile = document.createElement('script');
  jsFile.setAttribute( "type", "text/javascript" );
  jsFile.setAttribute( "src", 'someFileName.js' );
  document.getElementsByTagName("head")[0].appendChild(jsFile);

您可以使用LDAP或更简单的服务器端解决方案，但（再次）不向没有权利的用户提供JS服务。在客户端上，检查是否存在类（在开发期间为每个JS文件创建一个类），并且在未加载其类时不要尝试创建对象。

如何将Ext JS用于基于角色的应用程序

4 个答案:

延迟加载和权限配置：

编译和功能检查：