通过httponly cookie授权

Question

我学习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>
);
}

在这个示例中，我发送请求，然后从服务器获得令牌。那么我如何在header中发送cookie(因为我应该这样做来授权我的请求，对吗?)

Answer 1

cookie由浏览器自动添加到请求中，而不是手动添加。浏览器将根据cookie的属性(域名、路径、是否为安全cookie、同一站点等)确定添加哪个cookie以及何时添加。

您正在尝试设置仅http的cookie。HTTP-only cookie是指浏览器中运行的Javascript无法访问的cookie。这意味着这些cookie应该由后端服务器设置，并与响应一起发送。你在前端的Javascript不能创建一个仅http的cookie。

所以，为了解决你的问题，你可以尝试两种解决方案:

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

2. 你可以像现在一样在Javascript中设置cookie，但它不能是HTTP-only，你应该添加domain参数与你想要发送cookie的后端域。

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