Angular 2+ 安全性；保护服务器上的延迟加载模块答案

【问题标题】：Angular 2+ Security; Protecting Lazy Loaded Modules on the ServerAngular 2+ 安全性；保护服务器上的延迟加载模块
【发布时间】：2018-05-16 18:28:54
【问题描述】：

我有一个 Angular 2+ 应用程序，用户在其中输入个人数据。此数据在应用程序的另一部分进行分析，该部分仅对具有特定权限的人可用。问题是我们不希望未经授权的人知道如何我们正在分析这些数据。因此，如果他们能够在应用程序中查看模板，那就太糟糕了。由于它是客户端应用程序，精明的用户始终可以调整应用程序并查看模板。使用路由保护、延迟加载和CanLoad 不会在这里保护我们，因为所有模块都可以通过简单的 HTTP 请求获得，并且资源的 url 可以由足够精明的用户找到。

我了解处理此问题的常用方法是使用单独的应用程序。在这种情况下，将有三个，一个用于登录/注册，一个用于用户输入数据，一个用于具有特定权限的人员分析数据。

这对我来说并不理想，因为这需要管理三个不同的代码存储库。

我认为必须有一种方法来保护服务器端的 Angular 2+ 延迟加载模块。我已经阅读了一些关于这个主题的讨论，但似乎没有人像我一样明确需要这个的原因：

https://groups.google.com/forum/#!topic/angular/ZYHwNwPfIzY https://www.reddit.com/r/Angular2/comments/56dqsd

第二个链接似乎暗示这现在是可能的，使用命名的块，并通过在 Webpack 中向延迟加载请求添加令牌/cookie。

我没有看到有关如何完成此操作的更多信息。谁能给我一个实现这一目标的例子。这个策略有名字吗？

注意：我确实意识到这仍然不是 100% 安全的，因为总是有可能从经过身份验证的用户的浏览器缓存中抓取模块。为了避免冗长的讨论，我想说我们根本不担心这个。

【问题讨论】：

我认为这是我见过的对这个问题最好的答案——这部分的文档也很丑——：concretepage.com/angular/angular-canload-guard-example
@Shorbagy，这不是客户端解决方案吗？这不是我要问的。
@BBaysinger 你有没有找到解决这个问题的办法。你最后是怎么处理的
@Dibsmania，不，我已经离开这个项目很多年了。我想现在我会考虑将其拆分为单独的应用程序并构建一个包含所有可重用代码的库/包，这些代码将由 npm 引入。但这并不能解决所有可能的问题。

标签： javascript node.js angular express

【解决方案1】：

为什么不将您的应用程序设置为从服务器 IFF 动态传回 html（当且仅当）用户具有正确的权限。

您必须假设客户端可以访问该页面。该页面将只是一个带有 [innerHtml]="responseHTMLFromYourServer" 的空白 div。

加载动态组件的方法有：

@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>

How to get ng-template innerHTML to component

【讨论】：