Angular 2 Route Guard / Auth Guard Security

Question

I just finished an Angular 2 course on Angular 2 and Firebase at Angular-University.

The instructor, Vasco (@angular-university) brought up that the Router Guard is not secure and you could bypass it since its a front-end framework.

We used Firebase Auth to know if a user is authenticated and setup the security rules to prevent read/write unless a user is authenticated. So, I know the data is protected.

However, is the route actually secure? He mentioned using a sever backend to for more security but didn't go in to any details.

I've been trying to search around but I haven't been able to see where anyone else has brought this up.

At the end of the day, is the Angular 2 router guard secure on its own or do you have to implement a server to protect routes? How would a user bypass the routes anyway?

Thanks!

Answer 1

The problem you describe is not specific to Angular. All JavaScript applications face the same security concerns.

Vasco is right to highlight that route guards are only partly secure . They're just a piece of code executed in the client's browser. If the user could temper with this code (in their browser memory, for instance) they could potentially change the way it works.

In practice this is not necessarily easy as the deployed code is minified, uglified, bundled... But at a lower-level your Angular app is just a bunch of static HTML/JS/CSS files sitting on a server. These files are often publicly accessible: anyone knowing their URLs can download them and browse their source code. Ask yourself which risks you'd run if someone were to read the source code of your app files . You should never store sensitive information in these files.

As a general rule, if you have secured your backend you've done the bulk of the work . Imagine a malicious user found a way to activate one of your guarded routes. The backend would still return no data for this route and there'd be nothing to display on the page. Conversely you should see to it that any sensitive operation consults the backend (eg don't let users transfer money just because they can see and click the "Transfer" button in their browser; the backend should verify that they're authenticated and that they have sufficient funds).

Now if you wanted that extra layer of security, you could require that users be authenticated to access even the static assets of your app ( index.html , .js files...) but you'd need to use a server which supports that (Firebase hosting doesn't AFAIK) and in practice this is seldom necessary.

Taking a step back, securing a single-page app is about more than securing its routes. There's cross-site scripting, click-jacking, etc.

Here are some resources that you could check out:

• Angular.io's security chapter - https://angular.io/guide/security
• AngularJS Security: defend your Single Page Application - https://slideshare.net/carlo.bonamico/angularjs-security-defend-your-single-page-application (it seems to have interesting points even though it's about AngularJS)
• OWASP Top 10 for JavaScript - http://erlend.oftedal.no/blog/?blogid=125 (top 10 most critical web application security risk)