Cross-site scripting(XSS) and Cross-Site Request Forgery(CSRF) are likely to occur if a JSON Web Token(JWT) is not properly stored in the browser.
In this article, I will share how we can avoid those 2 attacks when using JWT in our web application.
I value your time, so I will start off with how to accomplish this in a summary.
The user fills up the login form and hit the submit button from the Frontend.
Once the user is authenticated from the Backend, a JWT
access_token
will be sent and arefresh_token
will be set in an HTTP-Only cookie.Frontend stores the
access_token
in-memorySee AlsoJSON Web Token (JWT) Weaknesses | Qualys Security BlogWhat Should You Do if Someone Steals Your JSON Web Token?JWT vs Opaque Tokens: All You Need to KnowJWT attacks | Web Security Academyvar access_token = data.access_token;
When the user refreshes the page, the
access_token
stored in memory will be gone. But we can still retrieve theaccess_token
by making an API call via therefresh_token
stored in HTTP-Only cookie (Step 2). Then FE will have theaccess_token
again, which is used to communicate with Backend.
I will walk you through the tutorial from the Backend and then the Frontend. I hope this will be easy to for you to understand the article.
Backend
I will use echo as my HTTP routing framework in this entire tutorial.
1. Create a routing framework
Start your backend router with AllowCredentials: true which sets Access-Control-Allow-Credentials
in the response header. This configuration tells browsers whether to expose all responses to the frontend JavaScript code when the request's credentials mode (Request.credentials) is include
.
e := echo.New()e.Use(middleware.CORSWithConfig(middleware.CORSConfig{ AllowCredentials: true,}))
2. Create Login API
In this Login API, you should perform authentication based on the credentials sent by the user before you proceed.
Once the user is authenticated, the Backend should generate an access_token
and a refresh_token
to send back to the Frontend in the response body, along with an HTTP-Only Cookie.
type User struct { Name string `json:"name"`}func Login(c echo.Context) error { u := new(User) if err := c.Bind(u); err !=nil { log.Errorf("error in bind: %s", err) return err } accessToken, exp, err := generateAccessToken(u) if err != nil { return err } refreshToken, exp, err := generateRefreshToken(u) if err != nil { return err } setTokenCookie(refreshTokenCookieName, refreshToken, exp, c) return c.JSON(http.StatusOK, echo.Map{ "message": "login successful", "access_token": accessToken, })}
3. Create Refresh API
When the user refreshes the page in the browser or the token in the Frontend has expired, the Frontend can call this API to retrieve a new set of access_token
and refresh_token
.
func RefreshToken(c echo.Context) error { cookie, err := c.Cookie(refreshTokenCookieName) if err != nil { if err == http.ErrNoCookie { return c.NoContent(http.StatusNoContent) } log.Errorf("err is : %s", err) return err } token, err := jwt.ParseWithClaims(cookie.Value, &jwtCustomClaims{}, func(token *jwt.Token) (interface{}, error) { return []byte(GetRefreshJWTSecret()), nil }) if err != nil { log.Errorf("err is : %s", err) return err } if !token.Valid { return errors.New("error") } claims := token.Claims.(*jwtCustomClaims) log.Infof("claims.Name : %+v", claims.Name) u := &User{Name: claims.Name} accessToken, exp, err := generateAccessToken(u) if err != nil { return err } refreshToken, exp, err := generateRefreshToken(u) if err != nil { return err } setTokenCookie(refreshTokenCookieName, refreshToken, exp, c) return c.JSON(http.StatusOK, echo.Map{ "access_token": accessToken, })}
4. Create Get User API
The frontend can call this API to get the user information based on the access_token
provided by the Login API or Refresh API.
func UserAPI(ctx echo.Context) error { accessToken := ctx.Request().Header.Get("Authorization") token, err := jwt.ParseWithClaims(accessToken, &jwtCustomClaims{}, func(token *jwt.Token) (interface{}, error) { return []byte(jwtSecretKey), nil }) if err != nil { log.Errorf("err is : %s", err) return err } claims := token.Claims.(*jwtCustomClaims) log.Infof("claims.Name : %+v", claims.Name) if !token.Valid { return ctx.JSON(http.StatusUnauthorized, echo.Map{ "message": "Unauthorized", }) } return ctx.JSON(http.StatusOK, echo.Map{ "name": claims.Name, })}
The above-mentioned APIs (Login, Refresh and Get User API) are the only APIs required for Backend.
The Frontend components will be introduced in the following parts.
Frontend
1. Refresh and Get User API
During page load, we will make an API call to the Backend refresh API with credentials: 'include'
. The HTTP-Only cookie will be sent to the Backend from the browser. If a valid refresh_token
exists in the HTTP-Only cookie, the Backend will respond with a new access_token
to the Frontend, which is used to make an API call to retrieve the user information from the Backend.
// Use this token as Authorization token to communicate with the other API. const [token ,setToken] = React.useState<string>(''); // Retrieve the user information from the AccessToken. const [username ,setUsername] = React.useState<string>(''); useEffect(() => { async function refresh() { // You can await here const resp = await fetch('http://localhost:8080/refresh', { method: 'POST', headers: { 'Content-Type': 'application/json', }, credentials: 'include', }); console.log("status is " + resp.status); if (resp.status === 204) { console.log("exit") return } const d = await resp.json(); if(resp.ok) { console.log('Login Success:', d); setToken(d.access_token); user(d.access_token); } } refresh(); }, []); const user = async (token: string) => { const resp = await fetch('http://localhost:8080/user', { method: 'GET', headers: { 'Content-Type': 'application/json', 'Authorization': `${token}`, }, credentials: 'include', }); const d = await resp.json(); if(resp.ok) { console.log('User Success:', d); setUsername(d.name); } }
2. OnFinish function
This function will be triggered once the user submits the login information from the browser. If the user credential is valid, the Backend will respond with a new access_token
and refresh_token
in the response body and HTTP-Only cookie respectively.
const onFinish = async (values: any) => { const resp = await fetch('http://localhost:8080/login', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({'name': values.username}), credentials: 'include', }); const {data, errors} = await resp.json(); if (resp.ok) { setToken(data.access_token); setUsername(values.username); } else { console.error(errors); } };
3. Render function
This UI contains only one Username input. When the user hits the submit button, onFinish
will be triggered with a parameter of the value in the input
.
return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Welcome { username }. </p> <Form name="basic" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} initialValues={{ remember: true }} onFinish={onFinish} autoComplete="off" > <Form.Item label="Username" name="username" rules={[{ required: true, message: 'Please input your username!' }]} > <Input /> </Form.Item> <Form.Item wrapperCol={{ offset: 8, span: 16 }}> <Button type="primary" htmlType="submit"> Login </Button> </Form.Item> </Form> </header> </div> );
Conclusion
As you can see, to avoid the security issues mentioned in the title, the safest way is to store the JWT token in memory. There is nothing to be worried about for the refresh_token
in the HTTP-Only cookie, because the attacker can’t use the refresh_token
to perform any action from their website.
You can download the full source code here.
That‘s all for my sharing, I hope you will like it.