web-dev-qa-db-ja.com

img srcリンクの承認ヘッダー

認証にapiを使用するjwtがあります。このAPIをvuejsアプリに使用しています。私はアプリで画像を表示しようとしています

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

ただし、apiには、jwt tokenを含むAuthorizationヘッダーが必要です。

このようなブラウザリクエストにヘッダーを追加できますか（ここのいくつかの質問に対する回答により、それは不可能だと思われました）？

それを回避する方法はありますか（jsを使用）、またはapi自体を変更する必要がありますか？

javascripthtmljwt
28
Ragas

Imgタグでhrefとして直接使用される画像に対して認証を実行することはできません。画像に対してこのタイプの認証が本当に必要な場合は、ajaxを使用してそれらを取得し、htmlに埋め込む方が良いでしょう。

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

バックエンドで、queryparamからJWTを検証します。

4
Alexys

デフォルトでは、ブラウザはクッキーを送信しています。ヘッダーの{credentials: 'omit'}を設定すると、Cookieがfetchで送信されないようにすることができます。 [〜＃〜] 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) {
...

ログインすると、Webサイトで、webappは資格情報をbothlocalStorageおよび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
}

そのため、スマートフォンアプリケーションと同様に、webappはlocalStorageを使用します。ブラウザは、デフォルトでクッキーを送信することにより、すべての静的コンテンツ（img、video、href）を取得します。

サーバー側では、Cookieがない場合は、認証ヘッダーに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();
})

私はそれが誰かを助けることを願っています。

2
arcol