TL;DR
At Zagreb Webcamp 2018, I attended talk A Token Walks Into a SPA… by Ado Kukic. During the Q and A session I finally realized difference between JWT and session cookies. This post explains evolution of Web And Mobile application authentication mechanisms.
Step 1, what is Authentication?
Authentication is the process of determining whether someone or something is, in fact, who or what it declares itself to be. [source].
Here is Facebook example. You know that your best friend used its gmail email during the registration. In order to log in to Facebook, you need to enter email and password. When you enter in Facebook your friends email address, you try to claim to Facebook, that you are your friend. How can you prove that? You will try to guess (or steal) your friends password.
Step 2, HTTP protocol is stateless
That means that every browser request does not know about any previous of future request.
In Facebook example, after log in, your are automatically in your news feed. If you click on Events option, if Facebook is using just HTTP protocol, you will need to enter username/password again. Very boring activity.
Step 3, lets make HTTP stateful using session Set-Cookie/Cookie headers
Cookie header was introduced to make HTTP stateful, which means that Cookie Header has session data store that could contain user data from the moment of authentication. For authentication purpose, that data is user uniq identifier. What is important to state that Cookie header manipulation is done on Client side by browser.
Using facebook as example, after you enter username/password, and after successful authentication, server sends session token in Set-Cookie header. It is important to state that session token is not the only token that could be present in that header. Browser reads Set-Cookie content and for every further request, copies it content in Cookie header.
Step 4, welcome to single page applications
Browser started to support javascript in order to make applications more like desktop applications. Without javascript, every click on html button is one client/server request, that takes time and blocks user interaction. With javascript, request is sent and that is not blocking action. When result is ready, javascript will handle it in async manner.
And that was paradise for hackers, using their malicious javascript code, they steal value of Cookie header. With that value, they can enter your Facebook account. That caused introduction of HttpOnly only Cookie header option, which instructs browser that value of Cookie/Set-Cookie header value is forbidden.
As javascript became more popular, more and more javascript frameworks emerged, such as Angular or React. Single Page application means that javascript application is get by browser on single url path, and all other requests for json data are done on different paths that are server by api controllers. And there was a problem, that javascript code could not access Cookie session value if HttpOnly option was set. HttpOnly, at that time, was a must in order to make your application safe.
Step 5, JWT
JWT is json web token standard. With framework implementation, you get mechanism to create session tokens and set them in any header. This is usually Authorization header. Client javascript can access that Header and read its value. Security is downgraded because malicious hacker can do the same thing.
Step 6, Which header to use?
Problem with JWT is that is heavy. Maximal Cookie size is 4kB. So I suggest old plain Cookie header. In order to access Cookie from javascript, you need to remove HttpOnly Cookie option. Wait, but this is security issue!? Lets go down further the rabbit hole. Lets meet scp header, content-security-policy. In that header you white list domains that you trust. If javascript code comes from any of those domains, browser will allow its execution.
Conclusion
You need to carefully chose technology stack for your application. Do not make a decision based on technology HIPE. We will use JWT because it is a trend. Do analysis ate the beginning of project, because this is the cheapest moment.
