如何对静态服务内容使用 jwt 身份验证？答案

【问题标题】：How to use jwt authentication for static served content?如何对静态服务内容使用 jwt 身份验证？
【发布时间】：2021-06-21 16:12:19
【问题描述】：

我有一个由 frontend（用 Vue 编写）和 backend（用 node 编写）组成的网站。 api使用jwt认证，只有登录用户才能向后端发起请求。

jwt 放在Authorization: Bearer xxx.

当我有敏感图像或静态文件（例如身份证）时，问题就出现了。

假设我有一个静态投放的敏感图片。现在，我也可以为静态提供的图像添加 jwt 身份验证，没问题，但是在前端，我如何告诉浏览器 将我的 jwt 放在请求中？

<img href="/my/sensitive/image.png" />

请注意，jwt 是先验未知的，它是由用户登录检索到的。

【问题讨论】：

【解决方案1】：

使用 cookie。将 JSON Web 令牌存储在 cookie 中（最好启用 HTTPOnly、Secure 和 SameSite 标志），以便浏览器自动将每个请求的值附加到您的源。

从安全的角度来看，这也是一个好主意 - 如果客户端 JS 无法随时访问令牌，则通过跨站点脚本漏洞泄露令牌的风险降至零。

【讨论】：