如何安全储存JWT之Cookie与Web Storage

一句话结论

确保你的代码以及第三方库的代码有足够的XSS检查，在此之上将jwt存放在local storage中。### 若有理解不到位之处，请在评论区留言，跪谢！

背景

每一个在自己项目中使用JWT的前端开发人员都会遇到同一个问题，我应该在哪里储存我的jwt token？

如果你搜索相关的文章你会发现主流意见基本上分为了两派：

1.Local Storage (Web Storage中的一种)

2.Cookie

支持Cookie的开发人员会强烈建议不要将敏感信息(例如JWT)储存在Local Storage中，因为它对于XSS毫无抵抗力，并且批判培训班或者大部分开发人员总是一股脑的选择Local Storage，而忽视了安全这个最大的问题。

支持Local Storage的一派认为，撇开Local Storage的各种优点不谈，如果做好适当的XSS防护，收益是远大于风险的。

两种论点总是能激起一番激烈的讨论，我写此文的目的就是希望对两种不同的观点进行比较，给出我自己的结论，并且提出更加细化的方案。

以下讨论会涉及基本的XSS, CSRF，Cookie 以及 Web Storage 的基本知识，如果你感到陌生，在文章的末尾有简单的介绍。

0. 先纠正一个错误观念

Cookie比Local Storage更安全

这种观点是不全面的，Local storage 有着与 Cookie一样的安全机制，只有加了httpOnly 和 secure 的Cookie才更加安全，对于普通的Cookie，它的安全等级与Local Storage并无差别。

1. JWT与Local Storage

将JWT储存在Local Storage中然后通过请求中的Authorization Header发送，注意Header不是由浏览器自动添加。

优点

• 在笔者看来在安全方面最大的收益便是天然的CSRF免疫，因为不会被浏览器自动发送。 如果你使用了这种方法，后端并不需要花费时间精力来做CSRF相关的防护。

• 如果你JWT较大或者你并不是Cookie的唯一使用者，那么你会觉得放在Local Storage中更加方便，毕竟Cookie的4k大小很容易用完。

• JS可以直接读取JWT，方便使用。

缺点

• 从安全的角度来看，如果你的网站有着XSS漏洞那么黑客可以非常轻松（只需要一行代码）的读取你的Loca