Category Archives: JavaScript

JWT (JSON Web Tokens)

While working on one of the security-related aspects of the platform i’m building, i came across JWT specification which i find very interesting and thought will share with you the notes i made while reading:

 

  1. JWT acronym stands for “JSON Web Tokens”.
  2. Definition of a security token:
    • encrypted data structure (in this case of JSON format) which contains:
      • information about the issuer and subject (claims)
      • proof of authenticity (digital signature)
      • expiration (validity) time
  1. Suggested pronunciation of JWT is the same as the English word “jot”.
  2. Basic facts:
  1. Why JSON-based standard?
    • XML-based SAML data format, exchanged over SOAP protocol offered a ton of encryption and signature options but was percieved as a “heavy” technology and of not much use by mobile appliance (initially not that strong in terms of computing power). JSON messages on the other hand don’t require a fairly advanced technology stack (like SAX, StAX, etc.) to produce and parse data structures and can be exchanged over HTTP (also, each browser nowadays is supporting JavaScript).
  1. Characteristics:
    • Plaintext JWTs: support use cases where the JWT content is secured by means other than a signature and/or encryption contained within the JWT. A plaintext JWT has the header “alg” parameter value set to “none”.
    • Encrypted JWTs: use JSON Web Signature (JWS) and JSON Web Encryption (JWE) to sign and/or encrypt the contents of the JWT using JSON Web Algorithms (JWA)
    • symmetric (HMACSHA256-384) and asymmetric (ECDSA, RSA) signatures
    • symmetric and asymmetric encryption (RSA, AES/CGM)
  1. Structure:
    • JWT Header
      • metadata
      • algorithms & keys used
    • JWT Claims
      • Reserved Claim Names:
        • “iss” (Issuer)
        • “sub” (Subject)
        • “aud” (Audience)
        • “exp” (Expiration)
        • “nbf” (Not Before)
        • “iat” (Issued At)
        • “jti” (JWT ID)
        • “typ” (Type)
      • Public Claim Names
      • Private Claim Names
  1. Example:
// header object
{
    "alg":"none"
}

// claims object
{
    "exp":1373625160,
    "sub":"Mariusz",
    "nbf":1373624561,
    "aud":[
        "https:\/\/my-web-app.com",
        "https:\/\/your-web-app.com"
    ],
    "iss":"https:\/\/my-auth-server.com",
    "jti":"c79772ea-8777-44dc-a0fe-9001aeee9d02",
    "iat":1373624561,

    // additional public claims
    "scope":["read", "search"],
    "client":"system A"

In the example above, the JWT Header implies that the encoded object is a Plaintext JWT. Additional public claims, may be useful for example in oAuth protocol (to know which system (A in this case) requested the token and what operations (read, search) will it be authorized to perform using this token).

  1. Sample encoding:
    • Base64url encoded representation of the JWT Header:
      • eyJhbGciOiJub25lIn0
    • Base64url encoded representation of the JWT Claims Set:
      • eyJleHAiOjEzNzM2NDI3NzYsInN1YiI6Ik1hcml1c3oiLCJuYmYiOjEzNzM2NDIxNzYsI
        mF1ZCI6WyJodHRwczpcL1wvbXktd2ViLWFwcC5jb20iLCJodHRwczpcL1wveW9
        1ci13ZWItYXBwLmNvbSJdLCJpc3MiOiJodHRwczpcL1wvbXktYXV0aC1zZXJ2ZXIu
        Y29tIiwianRpIjoiMWI2YjMxMTItMzkyZi00MzIxLTk2YjktNzkyYjhhMjcxOTliIiwiaWF
        0IjoxMzczNjQyMTc2fSwiY2xpZW50Ijoic3lzdGVtIEEiLCJzY29wZSI6WyJyZWFkIi
        wgInNlYXJjaCJd

 

Complete JWT is a result of concatenating encoded representations of the header and the claims set with a period (‘.’) character between the parts:

  • eyJhbGciOiJub25lIn0.eyJleHAiOjEzNzM2NDI3NzYsInN1YiI6Ik1hcml1c3oiLCJuYm
    YiOjEzNzM2NDIxNzYsImF1ZCI6WyJodHRwczpcL1wvbXktd2ViLWFwcC5jb20iLCJ
    odHRwczpcL1wveW91ci13ZWItYXBwLmNvbSJdLCJpc3MiOiJodHRwczpcL1wvb
    XktYXV0aC1zZXJ2ZXIuY29tIiwianRpIjoiMWI2YjMxMTItMzkyZi00MzIxLTk2YjktNzk
    yYjhhMjcxOTliIiwiaWF0IjoxMzczNjQyMTc2fSwiY2xpZW50Ijoic3lzdGVtIEEiLCJzY
    29wZSI6WyJyZWFkIiwgInNlYXJjaCJd

 

Finally, the above string representation of a JWT security token is what gets transmitted over the wire as a message header or url query parameter.

 

 

Sources:

JavaScript Toolset

Below you’ll find a short list specifying toolset that may be helpful when developing JavaScript code:

  1. Node.js – a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. It uses an event-driven, non-blocking I/O model that makes it lightweight and efficient.
  2. NPM – node package manager (part of Node.js)
  3. Yeoman – a robust and opinionated client-side stack, comprising tools and frameworks that can help developers quickly build web applications
  4. Bower – package manager for javascript libraries
  5. Karma – Spectacular Test Runner for JavaScript
  6. WebStorm – The smartest JavaScript IDE
  7. Jasmine – a behavior-driven development (BDD) framework that allows writing specifications that denote how your code should behave.
  8. Batarang – Extends Chrome’s Developer Tools, adding tools for debugging and profiling AngularJS application
  9. RequireJS – a JavaScript file and module loader

 

Also, there are tools you’ll be using less frequently (especially, if you decide to go with Yeoman as Yo integrates many of them), but still it’s good to know what they do:

  1. angular-seed – seed project (an application skeleton) for angular apps. You can use it to quickly bootstrap your angular webapp projects and dev environment for these projects. The seed contains AngularJS libraries, test libraries and a bunch of scripts all pre-configured for instant web development gratification. Just clone the repo (or download the zip/tarball), start up our/provided (or yours) webserver and you are ready to develop and test your application.
  2. underscore.js – a utility-belt library for JavaScript that provides a lot of the functional programming support for the usual functional suspects (each, map, reduce, filter…) without extending any core JavaScript objects.
  3. angular-mocks.js – contains an implementation of mocks that makes testing angular apps easier.
  4. angular-scenario.js – a nifty JavaScript lib that allows you to write and execute end-to-end tests for angular applications
  5. angular-loader.js – module loader for Angular modules. If you are loading multiple script files containing Angular modules, you can load them asynchronosuly and in any order as long as you load this file first.
  6. angular-resource.js – provides $resource service that makes it possible to execute HTTP calls (eg. against REST API’s)
  7. angular-cookies.js – provides two services: $cookies and $cookieStore.
  8. angular-sanitize.js – provides ngBindHtml directive, linky filter and $sanitize service.

Starting with AngularJS

There’s a lot of places on the internet where you can go and read about AngularJS, but to set some framework for the journey i prepared a short list of most useful links.

  1. angularjs.org – Google’s superheroic JavaScript MVW Framework
  2. docs.angularjs.org/tutorial – great way to get introduced to AngularJS
  3. builtwith.angularjs.org – neat things built with AngularJS
  4. angular-ui.github.io – the companion suite(s)
  5. angular-ui.github.io/bootstrap – bootstrap components written in pure AngularJS
  6. ngmodules.org – angular modules
  7. github.com/…/angularjs-batarang – AngularJS WebInspector Extension for Chrome
  8. egghead.io – great video tutorial
  9. plus.google.com/+AngularJS – news on the framework
  10. youtube.com/angularjs – videos
  11. twitter.com/angularjs – tweets
  12. groups.google.com/…/angular – forum discussions
  13. github.com/…/JSFiddle-Examples – useful fiddles, gists, plunkers collected from forum discussions
  14. stackoverflow.com/…/angularjs – questions and solutions
  15. angularjs.meetup.com – meetup groups
  16. cheatography.com/…/angularjs – cheat-sheet