在单页应用程序中使用Angular的安全性和本地化？

Question

我正在调查使用以下堆栈创建单页应用程序(在此处打​​开建议)

• 角
• JQuery的
• ASP.Net MVC 4
• 实体框架5

我几乎在这个堆叠和角度出售,但有一些我不确定的事情.不同的用户具有不同的角色,我们需要能够根据角色隐藏/显示页面上的某些页面和/或控件.我熟悉一些更传统的Web应用程序的解决方案,但我不确定在单页应用程序中我会从哪里开始.

我希望不使用MVC部分视图,而只是像WebApi一样发送和处理服务器代码.但是,angular必须处理所有模板,这意味着有人可以访问前端的模板,并且可能能够找出调用它们不应该的函数吗？或者我应该检查WebAPI方法中的角色并确保它们具有正确的角色？

下一个问题是本地化.我们需要支持多种语言.我希望我们可以只有不同的语言文件en_gb.XML,它们包含密钥及其各种翻译.然后,如果用户改变了语言,我可能只能使用值来改变角度

angular.value("language", 'en_gb.js');

要么

angular.value("language", 'en_gb.xml');

有没有其他人解决过这些问题.

Answer 1

安全性:你应该让AngularJS控制视图中的所有内容,如模板,部分视图等,因为AngularJS是一个功能齐全的前端框架.因为它只是前端框架,所以它不负责服务器数据,所以只需要进行一些RESTful调用来获取/保存/更新/删除数据.并且它也不负责安全性,所以你所谓的"WebApi"必须在服务器端100%安全.因此,即使有人能够弄清楚他不被允许做什么呼叫,呼叫也不会成功,因为它的凭证将在服务器端进行检查.还有一些恶意可能的攻击,AngularJS有一个答案.请参阅http://docs.angularjs.org/api/ng.$ http 的"安全考虑"部分.

本地化:AngularJS支持货币,日期和数字的本地化.但是对于你的用户界面中的字符串,还没有任何内置的内容.你必须建立自己的答案.有一些尝试用AngularJS实现翻译,比如这里:https://github.com/firehist/grunt-angular-translate

Answer 2

我可以帮你处理这里的安全事宜。您需要实现一些自定义逻辑来根据用户角色隐藏\显示元素。只要您可以将用户角色信息传递给客户端，您就可以实现这样的显示\隐藏逻辑。请记住，此显示\隐藏逻辑应由服务器驱动，否则任何人都可以更改客户端数据并访问功能。

实现此目的的一种方法是将服务器端模板（部分视图）返回给客户端进行渲染（ng-include并ng-view支持加载服务器模板）。服务器可以验证用户是否有权限访问，失败时返回空响应。所以不存在信息泄露的可能性。

可以为所有 webapi 调用添加类似的检查，并向最终用户返回未授权状态代码。