时间戳

首页 > 解决方案 > 通过 httponly cookie 授权

javascript - 通过 httponly cookie 授权

问题描述

我学习了Santum，我想制作授权系统。我制作了登录控制器，它返回一个令牌，但我需要将令牌发送到服务器。我读到最好的方法是使用 httpOnly cookie。看这个例子

function Login () {
    const emailRef = useRef(),
          passwordRef = useRef();
    const [cookies, setCookie] = useCookies();


    const handleSubmit = (event) => {
        event.preventDefault();

        instance.post('/api/auth/login', {
                email: emailRef.current.value,
                password: passwordRef.current.value
            
        }).then(res => {
            console.log(res.data.access_token);
            setCookie('Authorize', res.data.access_token, {
                httpOnly: true
            })
        })

    }
    return(
        <div>
            <form onSubmit={handleSubmit}>
                <input ref={emailRef} type="text" />
                <input type="password" ref={passwordRef} placeholder="password" />
                <button role="submit">Wyślij</button>
            </form>
            <Router>
                <div>
                    <nav>
                        <ul>
                            <li>
                                <Link to="/about">About</Link>
                            </li>
                            <li>
                                <Link to="/me">About</Link>
                            </li>
                        </ul>
                    </nav>

                    <Switch>
                        <Route path="/about">
                            <About />
                        </Route>
                    </Switch>
                </div>
            </Router>
        </div>
    );
}

在此示例中，我发送请求，然后从服务器获取令牌。那么如何在标头中发送 cookie（因为我应该这样做来自动处理我的请求，是吗？）

标签： javascriptreactjsjwtlaravel-sanctum

解决方案

Cookie 由浏览器自动添加到请求中，您无需手动添加。浏览器现在将根据该 cookie 的属性（域、路径、是否是仅安全的 cookie、同一站点等）添加哪个 cookie 以及何时添加。

您正在尝试设置一个仅限 http 的 cookie。仅 HTTP cookie 是浏览器中运行的 Javascript 无法访问的 cookie。这意味着此类 cookie 应由后端服务器设置并与响应一起发送。您在前端的 Javascript 无法创建仅限 http 的 cookie。

因此，要解决您的问题，您可以尝试两种解决方案：

  1. 在服务器中设置带有令牌的 cookie（通过Set-Cookie在响应中添加标头）。然后它可以是一个仅 HTTP 的 cookie。它将自动添加到与服务器相同域的任何请求中。

  2. 您可以像现在一样在 Javascript 中设置 cookie，但它不能仅是 HTTP，您应该添加domain参数以及您希望将 cookie 发送到的后端域。

请注意，第一个选项应该是首选选项。在第二种解决方案中，XSS 攻击将能够读取和写入您的 cookie。

推荐阅读