Javascript img src链接中的授权标头

我有一个

api

，它使用

jwt

进行身份验证。我将此api用于

vuejs

应用程序。我正在尝试使用在应用程序中显示图像

<img src="my/api/link" />

但是

api

需要

授权

头中包含

jwt令牌

我可以像这样向浏览器请求添加标题吗（这里对几个问题的回答让我相信这是不可能的）

---

有没有办法（使用js）或者我应该更改

api

本身

您不能对直接用作img标记中href的图像执行身份验证。如果您真的希望在图像上使用这种类型的身份验证，那么最好使用ajax获取图像，然后将其嵌入到html中。

<img src="/api/images/yourimage.jpg?token=here-your-token">

---

在后端，您从queryparam验证JWT。

默认情况下，浏览器正在发送cookie。 如果设置头的

{credentials:'omit'}

，则可以阻止cookie在

获取中发送

完整
fetch
示例：

const user = JSON.parse(localStorage.getItem('user'));
let headers = {};

if (user && user.token) {
  headers = { 'Authorization': 'Bearer ' + user.token };
} 

const requestOptions = {
    method: 'GET',
    headers: headers,
    credentials: 'omit'
};

let req = await fetch(`${serverUrl}/api/v2/foo`, requestOptions);
if (req.ok === true) {
...

现在，当您登录到您的网站时，webapp可以保存
将凭据同时存储到本地存储和cookie中。
例如：

因此，您的Web应用程序使用本地存储，就像您的智能手机应用程序一样。
默认情况下，浏览器通过发送cookies获取所有静态内容（img、视频、a href）

在服务器端，如果没有授权标头，则可以将cookie复制到授权标头

Node.js+express示例：

.use(function(req, res, next) { //function setHeader
  if(req.cookies && req.headers &&
     !Object.prototype.hasOwnProperty.call(req.headers, 'authorization') &&
     Object.prototype.hasOwnProperty.call(req.cookies, 'token') &&
     req.cookies.token.length > 0
   ) {
    //req.cookies has no hasOwnProperty function,
    // likely created with Object.create(null)
    req.headers.authorization = 'Bearer ' + req.cookies.token.slice(0, req.cookies.token.length);
  }
  next();
})

我希望它能帮助一些人。
还有一种方法可以向HTTP请求添加头。是“拦截HTTP请求”
 我经常使用的一种解决方法是利用所谓的nonce API端点。从经过身份验证的客户端调用此端点时，将生成一个短的活动字符串（可能是guid）（例如30秒）并返回。在服务器端，如果您愿意，当然可以将当前用户数据添加到nonce

然后将nonce添加到映像的查询字符串中，并在服务器端进行验证。此解决方案的成本是额外的API调用。然而，此解决方案的主要目的是增加安全保证。工作起来很有魅力；）
 API应将映像作为静态资产交付。这不需要JWT授权。@MaKobi这是关于用例的一个很大的假设。关于这个问题的一些相关阅读和潜在解决方案：我需要对图像进行jwt授权，因为它们是私有的，只有经过身份验证的用户才能看到它们。如果您使用Vue.js开发，您可以使用插件。jwt不仅仅是普通cookie，这在很大程度上是一个设计缺陷。网络只会起作用，现在还是这样吗？如果是这样，这个答案可以被接受。要添加这个答案：您甚至不能手动/强制地在服务人员
fetch
处理程序中添加标题。在发出实际的网络请求之前，它将被删除。链接会更好，但是您的令牌会以明文形式发送，不是吗？@ShafiqueJamal即使您在HTTP头中包含JWT，它仍然以明文形式发送。当使用browserI提供的访问令牌等时，HTTPS始终是一项要求。我不建议这样做，令牌就像密码一样，如果您的用户复制它，然后将其提供给其他人，则他们可以看到图像。如果用户是恶意的，那么他们可以使用该令牌从原始用户获取更多信息。如果用户是恶意的，那么用户可以随时使用该令牌。那么JWT就不是问题了。可能的风险是：用户右键单击图像并在公共计算机上的另一个选项卡中打开它。他离开了电脑。攻击者进入te计算机并开始键入基本url（这不是秘密），该url由浏览器使用包含jwt的参数自动完成。当我尝试此方法时，它在请求选项上出现错误这是一个聪明的解决方案：在客户端将jwt映射到适当的web标准（cookies），并在后端取消映射它们！这确实是个好办法。作为提醒，您必须将cookie解析器中间件添加到express.js中才能使其正常工作。否则，req.cookies将被取消定义注意：此方法仅适用于firefox浏览器扩展的上下文，不能用于网页脚本。
.use(function(req, res, next) { //function setHeader
  if(req.cookies && req.headers &&
     !Object.prototype.hasOwnProperty.call(req.headers, 'authorization') &&
     Object.prototype.hasOwnProperty.call(req.cookies, 'token') &&
     req.cookies.token.length > 0
   ) {
    //req.cookies has no hasOwnProperty function,
    // likely created with Object.create(null)
    req.headers.authorization = 'Bearer ' + req.cookies.token.slice(0, req.cookies.token.length);
  }
  next();
})