Angular 2+安全;保护服务器上的延迟加载模块 [英] Angular 2+ Security; Protecting Lazy Loaded Modules on the Server
问题描述
我有一个Angular 2+应用，用户输入个人数据。此数据在应用程序的另一部分中进行分析，该部分仅适用于具有特定权限的人员。问题是我们不希望未经授权的人知道我们正在分析这些数据 。因此，如果他们能够在应用程序中查看模板，那就太糟糕了。由于它是一个客户端应用程序，精明的用户总是可以调整应用程序，并查看模板。使用路由保护，延迟加载和 CanLoad 将不会在这里保护我们，因为所有模块都可以通过简单的HTTP请求获得，并且可以通过以下方式找到资源的URL：一个精明的用户。
I have an Angular 2+ app where users are entering personal data. This data gets analyzed in another part of the app that is available only to people with specific permissions. The issue is that we don't want unauthorized people to know how we are analyzing this data. So it would be bad if they were able to view the templates in the app. Since it's a client-side app, it is always possible for a savvy user to tweak the app, and view the templates. Using route guards, lazy loading, and CanLoad will not protect us here, since all the modules are available with a simple HTTP request, and the urls to the resources can be found by a savvy enough user.
我知道解决这个问题的常用方法是使用单独的应用程序。在这种情况下，将有三个，一个用于登录/注册，一个用于用户输入数据，一个用于具有分析数据的特定权限的人。
I understand a common way to deal with this is to use separate applications. In this case, there would be three, one for login/registration, one for the users to enter data, and one for people with specific permissions to analyze the data.
这对我来说并不理想，因为这需要管理三个不同的代码库。
That isn't ideal to me, because that requires managing three different code repositories.
我认为必须有一种方法来保护Angular 2+延迟加载的模块在服务器端。我已经阅读了关于这个主题的几个讨论，虽然似乎没有人像我一样确定需要这个的理由：
I'm thinking there has to be a way to protect Angular 2+ lazy loaded modules on the server side. I've read a couple discussions about this topic, though no one seems to have identified as clear of a reason for needing this as I have:
https://groups.google.com/forum/#!topic/angular/ZYHwNwPfIzY
https://www.reddit.com/r/Angular2/comments/56dqsd
第二个链接似乎暗示现在可以使用命名块，并在Webpack中向延迟加载请求添加标记/ cookie。
The second link seems to hint that this is now possible, with named chunks, and by adding tokens/cookies to lazy-load requests in Webpack.
我没有看到更多关于如何实现这一目标的信息。任何人都可以为我提供一个完成这个的例子。这个策略有没有名称？
I'm not seeing any more info on how to accomplish this. Can anyone provide me an example of this being accomplished. And is there a name for this strategy?
注意：我确实意识到这仍然不是100％安全，因为总是有可能刮掉模块来自经过身份验证的用户的浏览器缓存。为了避免冗长的讨论，我会说我们根本不担心。
Note: I do realize that this still isn't 100% secure, since there's always a possibility that the modules could be scraped from an authenticated user's browser cache. To avoid a lengthy discussion, I'll say we're not worried about that at all.
推荐答案
你为什么不设置你的应用程序动态地从服务器IFF传回html（当且仅当）用户具有正确的权限。
Why don't you set up your app to dynamically pass the html back from the server IFF (if and only if) the user has the correct permissions.
您必须假设客户端可以访问该页面。该页面只是一个带有[innerHtml] =responseHTMLFromYourServer的空白div。
You have to assume the client can get to the page. The page will just be a blank div with a [innerHtml]="responseHTMLFromYourServer".
有多种方法可以加载动态组件：
There are ways to load dynamic components:
@Directive({
selector: '[template-host]'
})
export class HostDirective{
@Input('template-host') set templateHtml(value){
this.hostElement.innerHTML = value;
}
private hostElement:HTMLElement;
constructor(elementRef:ElementRef){
this.hostElement = elementRef.nativeElement;
}
}
// Usage
<div [template-host]="myTemplate"></div>
这篇关于Angular 2+安全;保护服务器上的延迟加载模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
