Can Angular Guard or Firebase Auth be easily hacked

Question

I read that since Angular is client based it can't be trusted alone for securing routes, etc. However, I could not find a way to hack it.

Can anyone explain in detail how one might edit the local js files to bypass route guard (or whatever method is used)? How about Firebase Auth, can someone trick Angular into thinking you are another logged in user?

I have example site that uses both. Source code is at this GitHub repo and it's hosted via Firebase at this: URL.

I added some secret messages (obviously not shown in GitHub repo) in the main-page component which is protected by Guard that uses FirebaseUI auth to authenticate users. They will be shown as these statements:

• "Secret message if broke Angular Guard: <secret-msg>"
  • This one shows for anyone that can view the component html
• "Secret message if broke Firebase Auth: <secret-msg>"
  • This one shows for anyone that can impersonate being logged in as '[email protected]'

Can someone see those or explain how hacker might do it? I hope it's clear this post is not trying to encourage hacking, but simply to understand the security model behind Angular & Firebase Auth utilization (I know OAuth itself is secure, but not sure if how I'm using it in the auth.service.ts is).

Answer 1

Secret message if broke Angular Guard: 8ef80ecb-7439-4cc3-8263-89afcd012d1c

Secret message if broke Firebase Auth: f380cb1a-aaec-4898-81fb-98aff2863765

Is this what you were expecting?

So there's no hacking involved here. I can just open developer tools in my browser and look at the minified js code. The Idea of front-end security is never send anything to the front-end that you don't want users to see. Auth guard is really just a way to stop nosy users from seeing parts of your UI they don't have the role/privilege to see. It's not going to stop you from downloading the javascript and poking around inside the code.

As far as impersonating another user you have (wisely) handed off your authentication to third party providers. Unless I can get hold of someone else's account credentials or access the authentication tokens from their browser you are pretty safe.

What I would do if I was a hacker (which I'm not) is poke around in the code to find back-end interface calls and see if any of them were unsecured or available to a bogus user I have signed up as. I could do that by calling them directly (bypassing your UI) and messing with the input parameters. This is where a lot of leaked information comes from, misconfigured security on backend resources or badly designed APIs.