img src 链接中的授权标头

Question

我有一个使用< code>jwt进行身份验证的< code>api。我正在为一个< code>vuejs应用程序使用这个api。我试图在应用程序中显示图像，使用

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

但是api需要授权header，其中包含 。

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

有没有办法（使用js）或者我应该改变＜code＞api＜/code＞本身？

Answer 1

您可以使用服务工作进程截获 img 提取，并在命中服务器之前添加带有 JWT 令牌的授权标头。描述见：

• https://www.sjoerdlangkemper.nl/2021/01/06/adding-headers-to-image-request-using-service-workers/
• https://www.twelve21.io/how-to-access-images-securely-with-oauth-2-0/#：~： text=4.使用服务工人

Answer 2

默认情况下，浏览器会发送cookies。如果设置了header的< code > { credentials:' omit ' } ，则可以防止在< code>fetch中发送cookie。MDN

完整提取示例：

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中。示例：

let reqJson = await req.json();
// response is: {token: 'string'}
//// login successful if there's a jwt token in the response
if (reqJson.token) {
    // store user details and jwt token in local storage to keep user logged in between page refreshes
    localStorage.setItem('user', JSON.stringify({token: reqJson.token}));
    document.cookie = `token=${reqJson.token};`; //set the cookies for img, etc
}

因此，您的 Web 应用程序使用 localStorage，就像您的智能手机应用程序一样。浏览器默认通过发送cookie来获取所有静态内容（img，视频，href）。

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

Node.js表示示例：

.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();
})

我希望它对某人有所帮助。

Answer 3

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