Question

我有api使用jwt进行身份验证。我正在使用此api作为vuejs应用。我正在尝试使用

在应用中显示图像

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

但api期望Authorization标题中包含jwt token。

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

有没有办法（使用js）或我应该更改api本身？

Answer 1

您无法对img标记中直接用作href的图像执行身份验证。如果你真的想在你的图像上使用这种类型的身份验证，那么最好使用ajax获取它们然后嵌入你的html。

Answer 2

我经常使用的解决方法是利用所谓的nonce API端点。从经过身份验证的客户端调用此终结点时，将生成一个简短的活动字符串（可以是guid）（例如30秒）并返回。在服务器端，您当然可以根据需要将当前用户数据添加到随机数。

然后将现时值添加到图像的查询字符串中，并在服务器端进行验证。解决方法的成本是额外的API调用。但是，解决方法的主要目的是提高安全性。就像魅力一样；）。</ p>

Answer 3

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

在后端，您从queryparam验证JWT。

Answer 4

还有另一种方法将标头添加到HTTP请求。是“拦截HTTP请求”。 https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests

Answer 5

默认情况下，浏览器正在发送cookie。如果您设置标题的fetch，则可以阻止Cookie在{credentials: 'omit'}中发送。 MDN

完整的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可以保存凭证到 localStorage和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 + 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();
})

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

Answer 6

这是我根据 Tapas 的回答和这个问题 How to display Base64 images in HTML? 得出的解决方案：

let jwtHeader = {headers: { Authorization: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpX..."}
let r = await axios.get(`/path/image`, {...jwtHeader, responseType:"arraybuffer"});
let d = Buffer.from(r.data).toString('base64');
let a = document.createElement('img');

a.src = `data:image/png;base64, ${d}`;
a.width = 300;
a.height = 300;
document.getElementById("divImage").appendChild(a);

在这种情况下，html 将有一个

img src链接

6 个答案: