En-tête d'autorisation dans le lien img src

Question

J'ai un api qui utilise jwt pour authencation. J'utilise cette api pour un vuejs app. J'essaie d'afficher une image dans l'application à l'aide

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

Mais l' api prévoit Authorization - tête avec jwt token en elle.

Puis-je ajouter des en-têtes de demande de navigateur comme ceci(Réponse à quelques questions ici, m'a fait croire qu'il n'est pas possible)?

Est-il un moyen de contourner cela(à l'aide de js) ou dois-je changer l' api lui-même?

Answer 1

Vous ne pouvez pas effectuer d'authentification sur des images qui sont directement utilisées comme href dans la balise img. Si vous voulez vraiment ce type d'authentification sur vos images, il est préférable de les récupérer en utilisant ajax puis de les intégrer dans votre html.

Answer 2

Par défaut, les navigateurs sont à l'envoi de cookies. Vous pouvez empêcher l'envoi de cookie en fetch si vous définissez l'en-tête de {credentials: 'omit'}. MDN

Plein fetch exemple:

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) {
...

Maintenant, lorsque vous êtes de connexion dans votre site web, la webapp pourrait sauver pour des informations d'identification dans les deux localStorage et cookie. Exemple:

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
}

Si votre application utilise localStorage, tout comme votre application smartphone. Le navigateur reçoit tous les contenus statiques (img, la vidéo, href) par l'envoi de cookies par défaut.

Sur le côté serveur, vous pouvez copier le cookie à en-tête d'autorisation, si elle n'existe pas.

Node.js+express exemple:

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

J'espère que cela aide quelqu'un.

Answer 3

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

Dans le backend, vous validez JWT de queryparam.