Security in front-end applications

Question

I'm new to anything to do with user authentication in general, both front and backend. I'm building an application with Angular 2/5. I've found this tutorial by Jason Watmore that I will try to adapt for my needs. I see in the comments, Jason explains that for sites where you want the front-end to be secure, it is advisable to do authentication in a separate front-end app, and then redirect the user to the full app, once the user has logged in. The reason being that no front-end app is secure, in that a user could alter variables to view routes that are protected by route guards, or other ways. That data is still secure from the back-end, but you have features you don't want the public knowing about in the front-end, like how you are analyzing data entered by users.

My question is, in regards securing a front-end application, is this an absolute truth that it isn't possible? It makes sense, and I have a hunch it is true, but I was wondering if there are ways to at least make it very difficult to view guarded routes. (Like the route guard asks the server if the token is valid?... But then you could just mod the function to always return true, right? Hmm...)

[Edit] Could lazy loading come into play here? Would it be possible to build a module/route that the server only makes available once the user has logged in?

Answer 1

It is a very reasonable thought to try and protect some front-end code from unauthenticated users, and lazy loading may in fact help with that.

A few thoughts:

• Only allowing certain (authenticated) users to download certain front-end files does increase security by making such code impossible to analyse for potential external attackers. So people not having credentials will have a harder time finding things like XSS in those parts of the application, which is an actual security benefit.
• Something similar can be achieved by obfuscation, but obviously, that will never be so good as never giving away the code to unauthenticated users.
• Doing this will make development (the process) in general a lot more complex, and complexity is not usually a good friend of security.
• A lot of the attackers are not external. Having sensitive information in client-side code is not a good idea, and business logic can very much be sensitive by itself. Any valid user of the application can become an "attacker", and they will need to have this code if it's on the client.
• So therefore, the best practice is to place such business logic on the server.
• But ultimately, it's based on the risk you want to take. Factors that need to be considered include the price (amount of resources) of putting it all on the server, the potential loss if this info is lost to an adversary, the likelihood of that happening (ie. are there 5 trusted users, or 150000 unknown ones), and your risk appetite.

Answer 2

The difference between front-end code and back-end is that front-end is run on the computer of whoever is visiting the website, whereas back-end is run on a server usually hundreds of miles away. If it's front-end code, that means its on the users computer, which means they have access to it. You can be sneaky and make it so that only a knowledgable "hacker" can actually see anything important, but it's impossible to hide front-end code. Their computer needs it, therefore the user has access to it.