oauth2認証の背後にイメージをロード

Question

oauth2認証を使用するJavaScriptアプリケーションを開発します。今私は、この認証メカニズムの背後にあるサーバーからイメージをロード/表示したいと思います。そのため、私はxmlHttp-requestをrest-serverに送り、レスポンスとしてイメージのURIを取得します。私は画像のSRCにURIを追加しようと、アプリケーションが私もこのイメージの私の認証を再利用するために、ブラウザを伝えることができますどのように401

で応答？リクエストした後

これはURIを取得するためのxmlHttp-requestの一部です。

var xhr = new XMLHttpRequest(); 
xhr.open("GET", url, true); 

xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); 
xhr.setRequestHeader('Authorization','bearer '+token); 
xhr.send(null); 

xhr.onreadystatechange = function() { 
    console.log(xhr); 
    if (xhr.readyState == 4 && xhr.status == 200) { 
     var img = document.createElement('img'); 
     img.src = xhr.responseURL; 
     document.body.appendChild(img); 
    } 
} 

私は何かを忘れましたか？

Answer 1

画像は静的なファイルなので、単純なURLでリクエストすると、OAuth2保護機能を利用できるようになります。 URLにOAuth2情報を追加することはできますが、これはプライベートで安全なすべてのデータをクライアントに公開するため、おそらく良いことではありません。

正常に保護されたエンドポイントからの画像を、実際に画像自体を保護する必要がある場合は、クライアントでレンダリングできるbyte []またはBase64文字列として扱うことをお勧めします。

画像そのもののコンテンツを扱う保護されたエンドポイントがある。もちろん、実際にプライベートで安全なイメージが必要な場合にのみこれを実行します。あなたがしない場合は、それを公開し、別のCDNから提供してください。 OAuth2システムの背後にある必要はありません。