JWT cookie httpOnly solution

[ace-han]

It's time to keep jwt token in httpOnly cookie for website

Take a close look at jazzband/djangorestframework-simplejwt#157

Try installing https://github.com/AtuzSolution/django-rest-framework-simplejwt/commits/jwt_cookie

• Some test procedures:

1. first visit / in browser
2. open console in the browser and

        fetch("/api/v1/guest", {
            "headers": {
                "accept": "application/json,text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9",
                "accept-language": "en-US,en;q=0.9,zh-CN;q=0.8,zh;q=0.7,zh-TW;q=0.6",
                "cache-control": "no-cache",
                "pragma": "no-cache",
                "sec-fetch-dest": "document",
                "sec-fetch-mode": "navigate",
                "sec-fetch-site": "none",
                "sec-fetch-user": "?1",
                "upgrade-insecure-requests": "1"
            },
            "referrerPolicy": "no-referrer-when-downgrade",
            "body": null,
            "method": "GET",
            "mode": "cors",
            "credentials": "include"
        }).then(resp => {console.info(resp, resp.json())});

1. you will see the cookies in Tab Application of the browser debugger
2. event the devServer (change the api to dev-api) could proxy the cookie

[ace-han]

an XSS vulnerability compromises CSRF.

That is if an XSS exists then your CSRF will be broken. Refer to https://christian-schneider.net/CsrfAndSameOriginXss.html

How django work with CSRF (Double-Submit Cookie, still, vulnerable to XSS)
https://kylebebak.github.io/post/csrf-protection

That's why with a cookies.txt and a HttpHeader in cookie version simplejwt src code

https://github.com/SimpleJWT/django-rest-framework-simplejwt/blame/b690e522e9c2c390003fa92bddc51a3f3bb65338/README.rst#L164-L192

[ace-han]

And we name group to role In the server side.

Any user will have a role at least. (With a patch like server side [] => client side ['visitor'] )

[ace-han]

Some notes about non-http cookie solution to tell if a user has logged-in for web clients

We could do the no-cookie solution only if to.meta is properly inited.
Please refer to the comment for else if (to.meta && to.meta.roles) {...} branch below.
So, let's stick to non-http cookie solution

router.beforeEach(async(to: Route, from: Route, next: any) => {
  // Start progress bar
  NProgress.start()
  
  // // TODO modify here for the navigation
  if (whiteList.indexOf(to.path) !== -1) {
    // In the free login whitelist, go directly
    next()
  } else if (to.meta && to.meta.roles) {
    // for any asyncRoutes that not got generated
    // `to.meta` is not inited, just `to.path` only
    // then it means `non-http cookie solution` should be the one that 
    // that processes correctly
    if (to.meta.roles.length) {
      // requires auth
      if (UserModule.roles.length === 0) {
        try {
          // Note: roles must be a non-empty string array! such as: ['admin'] or ['developer', 'editor']
          await UserModule.GetUserInfo()
          const roles = UserModule.roles
          // Generate accessible routes map based on role
          PermissionModule.GenerateRoutes(roles)
          // Dynamically add accessible routes
          router.addRoutes(PermissionModule.dynamicRoutes)
          // Hack: ensure addRoutes is complete
          next()
        } catch (err) {
          // Remove token and redirect to login page
          UserModule.ResetUser()
          Message.error(err || 'Has Error')
          next(`/login?redirect=${encodeURIComponent(to.fullPath)}`)
          NProgress.done()
        }
      } else {
        next()
      }
    } else {
      // configured but empty
      next()
    }
  } else {
    // Other pages that do not have permission to access are redirected to the login page.
    next(`/login?redirect=${to.fullPath}`)
    NProgress.done()
  }
}