令牌应保存在前端的位置（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

JWT 需要存储在用户浏览器内的安全位置。

如果你将它存储在 localStorage 中，它可以被你页面中的任何脚本访问（这听起来很糟糕，因为 XSS 攻击可以让外部攻击者访问令牌）。

不要将其存储在本地存储（或会话存储）中。如果您在页面中包含的第 3 部分脚本中的任何一个遭到破坏，它可以访问您所有用户的令牌。

JWT 需要存储在 HttpOnly cookie 中，这是一种特殊的 cookie，仅在 HTTP 请求中发送到服务器，并且永远无法从浏览器中运行的 JavaScript 访问（读取或写入）。

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

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

你可以在这里找到一个已经被广泛接受的答案：https : //stackoverflow.com/a/44209185/11465265