How to properly secure an Angular 2 + Spring REST application?

Question

JavaScript

Good day to all! I ran into the following problem: I'm building Front-end ( Angular 2+ TypeScript ) with Webpack. The application must be fully secured, accessing any page requires a role (ADMIN,USER ).
Webpack , on the other hand , optimizes the code with one of its plugins ( CommonsChunkPlugin ) , resulting in many small pieces: Js, one html file, and assets, as in the screenshot below

:
using Spring Security , we define access, for example like this:

.antMatchers("/home", "/") 
.hasAnyRole("USER", "ADMIN") 
 Определим кастомную форму логирования : 
.formLogin().loginPage("/login") 
.usernameParameter("username").passwordParameter("password")

We also implement the following interfaces so that they give only statuses, except for - AuthentificationEntryPoint , because I still need a redirect from it:
AuthentificationSuccessHandler, AuthentificationFailureHandler, AuthentificationEntryPoint principal (well, as I understand it, maybe you need to ask something else, I will be glad to help), and if it is not there, then redirect to the logging page. In theory, this should be done by the spring itself when requesting the server, because I require a role for each resource. But if I transfer everything to the client, and do permitAll() on all resources
, then you can, in theory, take my code, remove the check and the server will be left without protection for resources at all.
If you transfer everything to the server, then you will have to open access to all resources, because I don’t know which of the chunks is responsible for the logging form, but I need it to load and be able to log in. To make it clearer: with this approach, of course, I can secure the URLs: /admin, /user , but when I go to the same /user , I can safely go where I don’t have rights, let’s say “ /admin/ dashboard ”, the main thing is that this is not accessed through the URL, but through the internal router-link , and the application will make a request not to localhost:8080/ admin/dashboard , but to localhost:8080/ 4.chunk.js , i.e. to the resource that is shared. I repeat, because I don’t know which of the chunks is responsible for what and, accordingly, I can’t restrict access to them.
Thank you very much for your attention, I hope you will suggest the most rational solution!

Answer 1

The right decision is to secure the backend api and not the client code