令牌应保存在前端的位置（reactjs）

Question

你好我想知道在 react js 中将令牌保存在本地存储中是一个好习惯因为我读了这篇文章 https://dev.to/rdegges/please-stop-using-local-storage-1i04 他们说对敏感数据使用本地存储是不好的.此外，我第一次编写具有安全性和会话的 API，如果有人向我解释必须如何正确完成事情，我将很高兴 - 如果有一些资源可供阅读等。如果可以使用带有本地存储的令牌必须如何完成？它是如何保存的我看到有问题要求保存到（ls）但是我不能在我的请求中这样做之前或之后我应该使用状态变量吗？在此先感谢您的帮助。

onSubmit = e => {

    e.preventDefault();
    fetch(  `/myresource/customer/${this.state.query}/${this.state.password}`)
        .then(res => res.json())
        .then((result) => {
                console.log(result);
                this.setState({
                    user: result,
                    password: result
                    localStorage.setItem('token', '');  <-- Here is not legal to set the token value where should it be saved.
                }
            );
         }
     )

     this.setState( { welcomeMsg: 'Hello, ' } );
}

Answer 1

A JWT needs to be stored in a safe place inside the user's browser.

If you store it inside localStorage, it's accessible by any script inside your page (which is as bad as it sounds as an XSS attack can let an external attacker get access to the token).

Don't store it in local storage (or session storage). If any of the 3rd part scripts you include in your page gets compromised, it can access all your users' tokens.

The JWT needs to be stored inside an HttpOnly cookie, a special kind of cookie that's only sent in HTTP requests to the server, and it's never accessible (both for reading or writing) from JavaScript running in the browser.

来自：https://logrocket.com/blog/jwt-authentication-best-practices/

因此您需要在服务器端设置 cookie 以确保安全。

您可以在此处找到这个问题已被广泛接受的答案：

令牌应保存在前端的位置（reactjs）

Where token should be kept in a front end (reactjs)

api

jersey

reactjs