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内   仅在HTTP请求中发送到服务器的Cookie的   永远无法从JavaScript运行中访问（读取或写入）   在浏览器中。

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

因此，为了安全起见，您需要在服务器端设置cookie。

您可以在这里找到对此问题的广泛接受的答案：https://stackoverflow.com/a/44209185/11465265

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

1 个答案: