使用Laravel Passport时，前端如何安全存储refresh_token？

嘿，作为踩过不少坑的开发者，我来给你唠唠在Laravel Passport场景下，前端怎么安全存refresh_token这事儿——毕竟这玩意儿要是存得不对，很容易给系统埋下安全隐患。下面是几种靠谱的方案，你可以根据自己的场景选：

• 优先选：HttpOnly + Secure Cookie
  这是业界最推荐的做法！把refresh_token存在带HttpOnly和Secure属性的Cookie里：

  • HttpOnly标记能让Cookie无法被前端JS读取，直接切断了XSS攻击窃取token的路径；
  • Secure确保Cookie只在HTTPS连接下传输，避免明文泄露；
  • 别忘了加上SameSite=Strict或SameSite=Lax属性，能有效防范CSRF攻击。
    在Laravel Passport里配置也很简单，你可以在config/passport.php里调整cookie相关参数，或者在颁发token的时候用cookie()方法指定这些属性，比如：

  return $user->createToken('token-name')->cookie([
      'httpOnly' => true,
      'secure' => env('APP_ENV') === 'production',
      'sameSite' => 'strict',
  ]);
  

• 极端安全场景：内存存储
  要是你对安全性要求拉满，不怕牺牲一点用户体验，可以把refresh_token存在前端的内存里——比如Vue的data、React的state或者Vuex/Pinia的非持久化状态里。
  这种方式下，页面一刷新token就没了，用户得重新登录，但胜在绝对不会被存在本地存储里，XSS攻击很难窃取到（除非恶意脚本在页面运行时实时抓取，但难度会大很多）。

• 退而求其次：加密后存在localStorage/sessionStorage
  如果你因为业务原因必须用本地存储，那一定要先加密再存！
  比如用前端加密库把refresh_token加密后，再存在localStorage里，加密的密钥要存在内存里（比如Vuex的临时状态），绝对不能存在任何持久化存储中。这样就算localStorage被XSS攻击窃取，拿到的也是密文，没有密钥根本解不开。不过这种方式只是降低风险，还是不如Cookie安全，能不用就不用。

最后再补几个额外的安全小tip：

• 给refresh_token设置较短的过期时间，定期轮换新的token；
• 前端做好XSS防护，比如转义用户输入、避免使用危险的DOM操作方法；
• 坚持用你正在实现的PKCE授权码流程，本身就比隐式授权更安全。

备注：内容来源于stack exchange，提问作者Lamens