前端用JWT时,如何防止Token被XSS攻击窃取?

百里国娟 阅读 75

我在项目里用localStorage存JWT token,但同事说这样容易被XSS攻击,我试过把token加密存进去,但后端验证时解密失败了。现在改成用httpOnly的cookie,但axios发请求时又拿不到cookie…

具体操作是这样的:localStorage.setItem('token', encrypt(jwt)),后端用同样的密钥解密时总报错。改成cookie后,虽然设置了withCredentials: true,但跨域请求时后端还是收不到cookie,控制台提示”Blocked cross-site access”

现在卡在两种方案都通不过,有没有更好的存储方式?或者需要同时调整前后端哪些配置才能安全传输token?

我来解答 赞 13 收藏
二维码
手机扫码查看
2 条解答
东方姝贝
用httpOnly cookie是对的,跨域问题要同时改前后端配置:

前端axios配置:
axios.defaults.withCredentials = true;


后端需要设置(以express为例):
app.use(cors({
origin: '你的前端域名',
credentials: true
}));


补充:如果还不行,检查nginx配置有没有加 add_header 'Access-Control-Allow-Credentials' 'true'
点赞
2026-03-06 15:15
Mc.士轩
Mc.士轩 Lv1
我之前也遇到过,直接告诉你结论:用httpOnly + secure的cookie存token,别碰localStorage。前端axios配withCredentials: true,后端CORS必须允许credentials,且origin不能是*,要明确指定域名。

axios.defaults.withCredentials = true


后端设Set-Cookie: token=xxx; HttpOnly; Secure; SameSite=Strict; Path=/,跨域接口Access-Control-Allow-Origin写具体域名,加Access-Control-Allow-Credentials: true。
点赞 7
2026-02-09 16:11