Загрузить изображение за аутентификацией oauth2

Question

Я разрабатываю приложение JavaScript, которое использует аутентификацию oauth2. Теперь я хочу загрузить/показать изображение с сервера, который стоит за этим механизмом аутентификации. Поэтому я отправляю xmlHttp-запрос на сервер rest и получаю URI изображения в качестве ответа.

После запроса я пытаюсь приобщить URI в ГКЗ изображения и приложение отвечает 401.

Как я могу сказать браузеру, чтобы повторно использовать мою проверку подлинности для этого изображения, а?

Это часть xmlHttp-запроса для получения URI.

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

Изображение представляет собой статический файл, и я сомневаюсь, что вы сможете получить защиту OAuth2 при запросе его с помощью простого URL-адреса. Хотя вы можете добавить информацию OAuth2 в свой URL, что, вероятно, не очень хорошо, потому что оно предоставит клиенту все данные, которые должны быть конфиденциальными и безопасными.

Возможно, вы можете рассматривать показ изображения с нормальной защищенной конечной точки в виде строки байта [] или Base64, которую вы можете визуализировать в своем клиенте, если вам действительно нужно защитить изображение.

Так что у вас есть защищенная конечная точка, которая обслуживает содержимое самого изображения. Конечно, вы сделали бы это только в том случае, если вам действительно нужно, чтобы изображение было приватным и безопасным. Если вы этого не сделаете, просто позвольте этому быть публичным и служить из отдельного CDN. На самом деле это не обязательно должно стоять за системой OAuth2.