Angularjs - Mysql - CRUD operations and Security

[tas pas]

I'm developing an website app using angularjs, mysql, facebook java SDK and php. The app needs to perform some crud operations regularly but, I reckon that making using a javascript framework to do these, present you with a major security hole.

All code/ querys/ stored procedures are written in client side things. So, I was wandering what are the options to perform secure crud operations using anjularjs?

I read somewhere that setting a RESTful service and using an authentication mechanism could do the trick, but beeing tottaly ignorant about security, I'm not quite sure.

Can anyone point me to a direction?

Thank you.

[Joshua Miller]

Hi Tas!

"So, I was wandering what are the options to perform secure crud operations using anjularjs?" 

**There are none.**

Angular, like any client-side framework, has nothing to do with security. All someone would have to do is look at your code or watch the traffic with Chrome Developer Tools or Firebug and then completely bypass Angular and do whatever they want to your data. That's not good.

Security must happen *entirely* on the server, which brings us to REST APIs. You have client, server, and data tiers, all separate. The client is running Angular, HTML, CSS, etc, and handles presentation only. The data tier is your MySQL, responsible primarily for storage. The server glues the two together, defines the interfaces the clients can use, and implements authentication and authorization. A "RESTful" web service is just a strategy for standardizing the communication between client and server. A service is "RESTful" if it follows some basic URL patterns and uses the standard HTTP verbs (get, post, put, delete, head) to signify the intention of the client. See the Wikipedia page: http://en.wikipedia.org/wiki/REST

Since you asked specifically about security, I'll say a few things here. This is an extraordinarily complex topic with lots of options. Do you have any experience writing server-side code? If so, I would recommend using one of the popular frameworks and walking through their documentation to understand how they get things done. I would also recommend grabbing a book on web application architecture. If you use Node, ExpressJS is good. For Java/Scala, Play is awesome. Symfony is good for PHP, Django for Python, Rails for Ruby. There are many dozens of others and everyone has their pet favorite.

But here's the basic concept: using one of the established authentication methods (openid, basic, digest, etc.), Angular has the client provide authentication credentials, which it sends to the server. The server says it's right or wrong; if it's right, it provides some type of token (like a cookie or a session key) that Angular sends with all transmissions back to the server. The server verifies that token with each and every transmission to ensure (1) that it is valid and (2) that the user has permission to do whatever is being requested. If the server says everything's fine, the server connects to the database, performs the requested operations, and returns the result to angular. If they were wrong, the server tells the client it was not authorized. Angular is used either present the result that it received or pass the error message back to the user and give her an opportunity to correct it. Angular is just presentation (and potentially some limited business logic, but let's not muddy the waters here).

It's worth repeating, so I'll say it again: Angular, or any client-side framework, cannot handle authentication or authorization. You *must* have a middle tier to handle that.

Let us know what experience you have with server-side or backend stuff, and I'm sure someone around here has experience with it and can send you to the best place to get started. If you don't have any, I'd stick with Node so you can just focus on Javascript rather than learning two languages. There are also a bunch of books on Amazon about web application architecture and security and I would recommend grabbing one suited to your language/framework choice because, like I said, there's a lot to consider.

Hope this helps.

Josh

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
 
 

[tas pas]

Hey Josh, 

I feel like I'm your protectee. Thank you for answering my questions. :)

I'm somewhat experienced with PHP but I haven't  ever used any framework. I'm going to stick to vanilla PHP because I'm planning to do a single page app (but I definately will take a look on symphony).

What I'm planning to do is this:

As soon as the user logins or registers on the app (the index.php page), Ι will be updating his profile record with a token (created by the the session_id, the users ip_adress) and a session_timeout set half an hour from the registration/login moment.

So whenever the user tries to do a crud operation, I'll be trying to create the token based on his current info (session_id, ip_address) and I'll be cheching against the values stored in the db. If the user succeds in doing something, I'll be posponing his token expiration time for, say some minutes. 

By that way, event if someone can see which php pages I'm calling in order to create/edit/read things, he will not be able to do stuff with them (hopefull).

Let me know what you think about this methodology.

Thank you

Tas

[mark prades]

I'm working on a http://bookmarkly.com clone with angularjs instead of backbone . the source is here ( work in progress ) :

https://github.com/Mparaiso/silex-bookmarkly,

the angular-js app can be found in this folder : https://github.com/Mparaiso/silex-bookmarkly/tree/master/public/static/js/app

and is bootstrap in twig templates : 

https://github.com/Mparaiso/silex-bookmarkly/tree/master/App/Views

i'm using silex for the backend.

I found easier to deal with login in a separate page , then redirect to the app itself once logged in .

For security, i need to review it , but security is approached like for any apps. a session is set on the server once logged in and for each api call , the server decides wether or not the client has the right to execute a call , if not , a 401 error is issued , and the client can deal with it.

I'm still working on it , i need to deal with CSRF ans XSS , but so far it works on my local envirronment.

any thoughts and advice appreciated.

cheers

[Joshua Miller]

It's taken me a bit to get back to you because of the holidays here in the US, but I haven't forgotten about anyone.

Hey Tas - You just happen to be asking questions I can answer! What you describe overall sounds plausible. I don't know very much about Vanilla, but I know that it isn't RESTful (at least out of the box), which isn't an issue except that it places it further from my expertise and further from the "convention over configuration" of some angular components, like the $resource service. But I will say you need to make sure you cover specific cases (like CSRF and XSS that Mark mentioned) in addition to an overall security strategy. This is harder with a smaller framework like Vanilla, but I'm sure it's possible. If you're willing to branch out, there are several larger PHP frameworks that cover most of this out of the box. I only mentioned Symfony because I used it years ago, but I'm pretty far removed from PHP these days. Scala FTW.

Hi Mark - It's funny you mention making a Bookmarkly clone as that's been on my hobby "to do" list for a while (based more on Pocket) but I haven't gotten around to it. Hopefully you're saving me some work!

While I have managed many web projects, I am not personally an expert in security. That said, to me it sounds like you are on the right track, proverbially speaking. But I would offer one note, which also applies to Tas: if you choose server-side sessions for authentication, you are limiting your systems integration and mobile app options. Choosing an authentication solution like OpenID, basic, digest, or a number of others, it is far easier for other services to interface with your application (and vice versa) as well as for mobile applications to connect without any rework on your part. An example of the former would be a website including an ajaxian "Add to Silex" button (though this can be solved with web intents) or another application providing integration with your service for their users. As for mobile apps, REST really is the standard nouveau and it is inherently stateless. If these are not concerns for you, then you can ignore this without consequence, but I wanted to put it on your radar.

Do keep us posted on your app as I am personally interested in your progress.

Josh

[mark prades]

i'm getting there :) a demo is live http://markme.alwaysdata.net

there is still quite a few things i need to deal with , especially with plugins like masonry but , i overcomed most of the difficulties , i need to focus on security , especially this XSS stuff.

the source is available here :

https://github.com/Mparaiso/silex-bookmarkly