Lazy loading and authorization

[thomas boissier]

Hello, 

I am learning  Angular 2/4 and ASP.NET. When compiling my client app with lazy loaded modules, each lazy loaded module are bundled apart. That's awesome.

Well, in the context of servers emitting informations for different types of users (admin, user, anonymous for exemple), some modules may be designed to request APIs made for admin. And so, they contain the URLs to these APIs. 

As every lazy loadable module can be downloaded as easy as a favicon by default, every APIs entries can be discovered. 

A solution could be to create as many app as the types of users but I wonder if it the server could restrict access to lazy loadable modules based on authorization rules. This way, some URLs could stay hidden. 

I know that hiding is not a real protection but some people care.

If you know a solution, I'd be glad to hear it.

As my compiler is configured, it also delivers the sourcemaps for each created bundle. So, It is possible to retrieve which module(s?) is contained in a bundle (based on source file naming). Then, it seems possible to configure the server to restrict access to some bundles based on a policy which manages module access. 

Is this approach feasible?

Thank you, 

Thomas

[Sander Elias]

Hi Thomas,

Sorry, that's not easily done right now. The mapping off the bundles to the components is being done by webpack or rollup.  Afaik there is currently no way to hook into the chunk to module translations. You might be able to write a plugin that extracts this information though, and then feed it to your server's configuration.

I have no doubt this is a matter of time. I have been suggesting to do something like this to more people, as it makes sense if you have sensitive data(In this case, I chalk code up to data). I have been talking to people building the CLI about this, and it is on their todo list. Might take a while, so I wouldn't hold my breath.

Regards

Sander

[Long Field]

 I don't feel this is complicated to my project, as I use routing, every module can only been access from router, it is dynamic router like this: https://github.com/Longfld/DynamicalRouter. 

    And after user login, back-end pass all modules name( actuary routes) and angular client will dynamically build router

    

   So, only authorised modules can be accessed, or you got route does not exist error.

[thomas boissier]

Hi, 

@Sander Elias

Ok I'll give it a try to see if it works seamlessly. 

@LongField 

I wish my concern didn't keep me from the benefits of compiling aot. 

Besides, I am not sure, but, is the imports field of "dynamicModule" flexible enough (regarding the static list of imports)? 

Thanks for sharing

[Sander Elias]

Hi Thomas,

Drop me a note if you got it working, or when you have additional questions. This is something that's on my agenda too. It's not only hiding but if you make sure a user can't reach the routes they are not allowed to, it is, in fact, a effective security measure. I will ask Sean (webpack) if it's possible to get named chunks. If somehow the module-name would end up in the chuck-name that would make things a lot easier! turns out, there is an issue for that.

Regards

Sander

[thomas boissier]

I am busy right now but I'll try it eventuallly. 

Regards,

Thomas

[Long Field]

Check angular Universal (prerender?), it will send html only to browser

Though it is not desgin for your issue but it can help.

On Wednesday, April 12, 2017 at 1:43:42 PM UTC+10, thomas boissier wrote:

[Sander Elias]

Hi Long,

Check angular Universal (prerender?), it will send html only to browser

Though it is not desgin for your issue but it can help.

How? I think I must be missing some part here. I don't see how html-only responses would help(and that's also not entirely where universal is about!) would help if you want to lazy load a module. Can you please explain this a little bit more?

Regards

Sander

[Amr al-Amir]

Hi everyone, this is a very nice and constructive discussion, may be a feature request to @angular or @angular/cli. All this morning, I was thinking about this issue, and I've been thinking if there is a way to treat those webpack bundles as a backend resources and protect access by access tokens. Please post here if you found any update or progress about this issue.

[Sander Elias]

Hi Amr,

The named chunks will soon land in the CLI(the estimated time of arrival is within 7 to 15 days from now!). Once this is in, you can guard those then on your server. Still, it's not really straightforward. Once this lands I will have a second look on this subject.

Regards

Sander

[Sander Elias]

Hi All,

I forgot to update this thread. Named chunks are now indeed possible (for a while already) in version 1.3-beta. For production you need to add a flag, in dev it's default. 
I'm now researching how/if I can add tokens/cookies to lazy-load requests. Turns out, that needs to be done in webpack.

I'll keep you posted!