If you are building a production quality web application , you need to think about security , different types of attacks which can make your application vulnerable and understand different authentication/authorization mechanisms.
I have prepared a list of few concepts which has helped me to understand the bigger picture. Please note that the intention of this post is just to give you basic overview of these terminologies. Some of these topics are huge and you need to go deeper to get a better understanding.
1) Sticky Session vs Non Sticky Session -> If your website is served by multiple web servers (server farm) with help of load balancer then it’s the task of the load balancer to decide which server node each request will go to. If sticky session is configured , all requests of one user will go to the same node( web server) whereas in case of non-sticky session , load balancer may choose any server to serve user request.
2) Cookies vs Local Storage/Session Storage
-> All of these are client side storage solutions. Cookies are age old whereas Local Storage and Session Storage (together called Web Storage) were introduced in HTML5.
a) Amount of Information –> Cookies can store less information than Local/Session storage. Local storage can store upto 5 MB. If you store large amount of data in your cookie , it will impact your website performance. If you have large data to store use Session/Local storage.
b) Lifetime -> Let’s start with web storage first. If you store something in session storage , it’s available only in that session(tab). If you open the same website in another tab in your browser , information stored in session storage is not accessible to another tab. If you want that information to be available across tabs , you should use local storage. Note that session storage information will be lost once you close the browser. All of these client storage solutions can be cleared by user anytime.
Coming back to cookies .There are 2 types of cookies , persistent and non-persistent cookies. If you want a cookie to expire at a specific time then set the expiration date/time on it. Such cookies are called persistent cookies.If you want the cookies to expire when the session ends , don’t set expiration time. These are called non-persistent cookies.
c) Data Type -> Cookie only support string datatype whereas Local/Session Storage supports broader range of data types.
d) Accessibility -> You can access session/local storage in your angularjs using $window.sessionStorage or $window.localStorage. You can access cookies using $cookies and $cookieStore.
You can check your Web Storage from chrome Dev tool inside Resources Tab.
e) Security ->
Secure flag means that cookie will be included only if request is transmitted over secure medium (HTTPS).
4)CSRF/XSRF Attack -> Cross Site Request Forgery is often confused with XSS(Cross Site Scripting Attack) but these are two different things.
Imagine that you are logged into your banking site in one tab and you have also opened some evil web page in another tab. This attack happens when evil web page can make a fraudulent request to the secure site since you are already logged in. Attacker can change you settings or transfer money from your account and you/your banking site wouldn’t even notice it till the fraudulent action is completed.
Note that it doesn’t matter if target functionality uses Get or POST. Both are vulnerable. You must have seen that most banking website will log out you after few mins if there is no activity. It could be inconvenient for some users but it’s for our safety.
In angularjs application , the $http service will extract this token from the cookie and then send this in the header (X-XSRF-TOKEN) with every HTTP request it makes. The server must check this token on every request and block access if this token is not valid.
7) Token based vs Session based authentication