Angular 2+ Security; Protecting Lazy Loaded Modules on the Server

Question

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.

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

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?

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.

Answer 1

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.

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>

How to get ng-template innerHTML to component