Images broken when using authentication

[MaxPMagee]

Following the wiki advice, we've got basic auth working for our requests. We've got a GET target that will respond with png or bmp image data. The requests are sending the data correctly, I see the image and can download its data (and open the resulting file to observe the correct image) when using Postman's GET.

In Swagger, the image GET is performed correctly, the response code is 200, and when I inspect the response.data, it shows:
"�PNG

IHDR&...plus lots more silly characters that ruin this post"

for a png. These are all good signs, however, in the Swagger UI, the image shows a broken image icon. The source is set to the target (so, theoretically, in an unauthenticated GET target, the browser would just pull that image in):
swagger-ui.js contains this line of code:
pre = $('').attr('src', url);

Since we're using authentication on our target, the browser's GET fails with a 401 Unauthorized error.
As a work-around, I thought I'd try to use the actual data that was retrieved in the original, successful response, but I'm not having any luck.

It looks like it's coming over the wire as plain vanilla binary image data. I tried btoa(content)- content is set above:
if (response.content === void 0) {
content = response.data;
url = response.url;
} else {
content = response.content.data;
url = response.request.url;
}

This gives me this error:
Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

Stackoverflow tells me to wrap the content in unescape(encodeURIComponent()):
http://stackoverflow.com/questions/9786508/javascript-atob-returning-string-contains-an-invalid-character

This executes, (but the image still shows as broken) and gives me output like the following:
77+9UE5HDQoaCgAAAA1JSERSAAAAJgAAAEAIBgAAAHbvv70F77+9AAAACXBIWXMAAAsSAAALEgHvv73vv71+77+9AAAA...lots more

When I add it as the image source:
<img src="data:image/bmp;base64,77+9UE5HDQoaCgAAAA1JSERSAAAAJgA...yada yada"
the image icon remains broken.

To verify that the approach will work if I get the encoding right, I dropped my sample image into this converter:
http://webcodertools.com/imagetobase64converter/Create

It gave me this output:
iVBORw0KGgoAAAANSUhEUgAAACYAAABACAYAAAB2kAXpAAAACXBIWXMA...etc.

When I overwrote the content with that base64 data (hardcoded in), it shows the correct image.
<img src="data:image/bmp;base64,iVBORw0KGgo...yada yada"

Long story short, I am not good at Javascript data conversion, anybody see what I'm doing wrong...and can we get authentication/images fixed in the next version?

Code snippet from swagger-ui.js (about line 1855) that I'm hacking on:
else if (/^image//.test(contentType)) {
// original code:
//pre = $('').attr('src', url);
var b64data = window.btoa(unescape(encodeURIComponent( content )));
// here's the hardcoded data:
//var b64data = "iVBORw0KGgoAAAANSUhEUgAAACYAAABACAYAAAB2kAXpAAAACXBIWXMAAAsSAAALEgHS3X78AAAAB3RJTUUH1QcWFRE6xk1oVgAAAdRJREFUaN7tWtluxDAILMj//8v0oXIVUQdzDO5m20j7EsdmMtxkSUTko3gR0Y971WMHAswKxFzPAhxZQDuBc52IUuA4CkpEQoJEZKlqGLDsm2fBcTeoLDhGeqJ1PwqOs2ythCCYLTOmwXlBeVnj6ptNMCimXHFsxYIVWHdBtzWOTaFaJdbaMRuzhFYBwWws81IeNXPEg64HagHW2pEkbgncgYkAHij17ABGWWQPQyuDJqLvn45nCAfgigHr4IoEx167uhNkBdnj1cVdcN3lzbnvagK3WrGaEW9dn21CLIcYldoenbi3qqx2OJEW706lfAKUDjFpxnR6QbOlbXclg6OVgVXrRxgJM2YlYx0WKilqt4ctuit2lgF/ZZxPub+3UZkAjxeKL1vBetrAUD2G8jZviuKuWUXVDrnL66rPs960a3IjXldR/+gOFVlwjDwYOWmkr2cEBsa79zqjXZ0zolWr5cFeb/bI4BWlGZWgQ8zQ+s4c3uE47V756FwZAoZq9VvGUI9XZQez78vYtBlvh+X1/tCoE/XsS6kSPlFECvsbxt8VaNsY625Y/hvetwE2PLYUyYeeL3Me2xzIpBxJTTuA4/R8wguQfwvUjpDne2Xl7zOZ6xM/e1/WBnq+CAAAAABJRU5ErkJggg=="
var outputImg = document.createElement('img');
outputImg.src = 'data:'+contentType+';base64,'+b64data;
pre = outputImg;

[mohsen1]

Duplicate of #152

[agusgr]

Hi, I have exactly the same problem described in the first comment. I also see that is issue is marked as duplicate of #152 (closed now) but I'm not able to figure how to do to view the image in the UI.

My situation:
When the tag try to load the image data not include our security headers so the request cannot be completed. Digging into the problem I see that the "src" attribute in tag not handles HTTP headers so I think that maybe the approach detailed in the first comment (encode the response as base64 and use it as in "src") might work

Any help or advice will be appreciated.

[webron]

Which version of the UI do you use?

[agusgr]

Hi @webron,

We are using the version 2.1.1.

[webron]

I'd suggest opening a new issue then.

[agusgr]

thanks @webron, new issue opened #1540