For the [Startup Hack] this week, I wanted to share with you an interesting situation regarding security in Angular and Firebase that I experienced with my TaskNinja application.
For those of you who don’t know what TaskNinja is about, it was a TaskRabbit clone which I built on top of Angular and Firebase. This is a marketplace where a Poster can create a task with the money they are willing to pay to get the task done. A Runner is a person who will make an offer for that task and will do the job and get paid if his/her offer accepted. And only the posters can accept an offer for jobs that they created. That’s the basic rule!
A couple weeks ago, one of my Code4Startup students from China emailed me and claimed that he could easily hack my Angular app to accept any runners without poster’s permission in no time.
How could he do that? And what should we do to prevent this happen then?
Well, to get you understand how he did it, check the video:
I liked the way he tried to break thing to learn and make this more real than ever. It’s not just a tutorial now. If you’re using my TaskNinja souce code seriously for your app, please consider this security issue when designing your Angular front-end.
So what are solutions?
Most of us would agree that we need to validate the task.poster_id with the current_user.id prior to accept an offer in the “back-end” as well, not just front-end. Good!
Where should we do that then?
As of the very first thought, we think we should check that condition one more time (extra layer) in the Controller rather than just in the View. If so, the code will look like this:
CONTROLLER (scripts/controllers/browse.js) Done. Deploying this change to our server and now we’re safe. It’s time to reward ourselves a cup of coffee with 2 sugar cubes ^.^ Awesome!
Next morning, when you wake up: WTF!!!
Yes, man. That would be most likely your reaction when you see someone hacked your TaskRabbit app again. Alright, so we forgot one important thing. Angular Controller is not our back-end and no matter what we changed in there, it is not secret and everyone can see it and then manipulate it easily.
Go to the website in Chrome browser, open the Developer Tools, click on Sources. As you can see in the below image, hackers can see our Angular source code and download the whole code into their machine. From here, they can manipulate our changes by removing the condition that we just added.
The Solution? => Firebase Security Rules
The solution is super simple and easy to do: using “Firebase Security Rules”. Yep, that is all we need to do in the back-end and hackers can touch that part. With this condition added into our Firebase Rules, we’re really good to go now!
- TaskNinja was built with Angular 1.3.8, AngularFire 0.9.1 and Firebase 2.1.0.
- Don’t worry because I will be updating changes for TaskNinja soon (and it will be done regularly) so you don’t have to concern of learning something out of date.