javascript - API 認証を必要とする大きなイメージ タグの表示

Question

現在、Cookie 認証の使用から ID サーバーへの切り替えを行っているシステムを使用しています。アプリケーションのフロント エンドは、KnockoutJS を使用した SPA です。SPA は、そのコンテンツの WebAPI スコープにアクセスできます。

現在、SPA が Identity Server のベアラー トークンを取得し、Authentication ヘッダーでトークンを渡す API に ajax 呼び出しを行うことができるようにするコードが用意されています。現在直面している問題は、以前は WebAPI に直接リンクしていた一部のイメージ タグの src 属性を置き換える方法です。

例は次のとおりです。

<img alt="Secure image" src="/api/username/secureimage?v=1464277579255" />

これは、以下のメソッドと同様のメソッド シグネチャを使用して Web API と通信していました (この記事では省略しています)。

[HttpGet("")]
[Route("api/{username}/[controller]")]
public async Task<IActionResult> SecureImage(string username)
{
    var secureImage = await _manager.GetSecureImageAsync(username);
    if (secureImage != null)
        return File(secureImage.FileName, secureImage.ContentType);
    return HttpNotFound();
}

これまでに見たアプローチの 1 つは、API を変更して base64 でエンコードされた画像を返し、ajax を使用して画像文字列を要求し、それを src として設定できるようにすることです。

<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />

ただし、この方法を使用して表示できる画像ファイルにはサイズ制限があり (ブラウザーによって異なるようです)、多くの画像がこの方法には大きすぎるため、これは現在のシステムではオプションではありません。

大きな画像をブラウザに安全に渡す他の方法はありますか?