Yodlee getMFAResponse Byte Array for Captcha

Question

I am trying to create an encoded string from the byte array returned by the Yodlee getMFAResponse (which looks something like [-1,0,2,-1] etc.) so that I can use it as the source on an image tag in HTML in order to display a CAPTCHA. (This also seems to be an issue when trying to get image information for financial institutions, as well).

To accomplish this, I am taking the byte array off the response object, passing it through btoa() and then appending it to a string that begins data:image/???;base64,, where the ??? are the file type. I have tried bitmap, jpeg, png, gif, etc, but none seem to work. I also tried the 'magic string' method to determine the format, but it matches no format that I can find. I would think the major issue is that I don't know the format of the file, but perhaps I'm just not doing the decoding properly.

I end up with something like this:

  data:image/jpeg;base64,NjYsNzcsNTgsMTE2LDAsMCwwLDAsMCwwLDU0LDAsMCwwLDQwLDAsMCwwLC05MSwwLDAsMCw0NSwwLDAsMCwxLDAsMzIsMCwwLDAsMCwwLDQsMTE2LDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLC0xLC0xLC0xLDAsLTEsLTEsLTEsMCwtMSwtMSwtMSwwLC0xLC0xLC0xLDAsLTEsLTEsLTEsMCwtMSwtNSwtMSwwLC0xLC0xLC0xLDAsLTksLTksLTksMCwtMSwtNSwtMSwwLC0xLC0xLC0xLDAsLTEsLTUsLTEsMCwtMTcsLTE3LC0xNywwLC0xLC0xLC0xLDAsLTEsLTEsLTEsMCwtMSwtMSwtMSwwLC05LC0xMywtOSwwLC0xLC0xLC0xLDAsLTEsLTEsLTEsMCwtMSwtMSwtMSwwLC0xLC0xLC0xLDAsLTEsLTEsLTEsMCwtMSwtMSwtMSwwLC0xLC0xLC0xLDAsLTEsLTEsLTEsMCwtMSwtMSwtMSwwLC05LC05LC05LDAsLTEsLTEsLTEsMCwtMSwtMSwtMSwwLC0xLC0xLC0xLDAsLTEsLTEsLTEsMCwtMTcsMCwtMSwtMSwtMSwwLC0xLC0xLC0xLDAsLTEsLTEsLTEsMCwtMSwtMSwtMSwwLC0xLC0xLC0xLDAsLTEsLTEsLTEsMCwtMSwtMSwtMSwwLC0xLC0xLC0xLDAsLTEsLTEsLTEsMCwtMSwtMSwtMSwwLC0xLC0xLC0xLDAsLTEsLTEsLTEsMCwtMSwtMSwtMSwwLC0xLC0xLC0xLDAsLTEsLTEsLTEsMCwtMSwtMSwtMSwwLC0xLC0xLC0xLDA='

I am working in Javascript only, both server side and client side, and I do not know Java (which seems to be what most of the Yodlee answers are geared towards). I am at a loss as to whether my decoding of the byte array is the issue, or if its the fact I don't know the proper image format.

Answer 1

I tried your Base64 string on my js file. it's not showing the image. I don't have access to your js code for btoa(). However, I paste my working code here, maybe the problem resides in converting byteArray to Base64. (I'm working on using Yodlee API using c#, angularJS).

 function _arrayBufferToBase64(biteArray) {
    var binary = '';
    var bytes = new Uint8Array(biteArray);
    var len = bytes.byteLength;
    for (var i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i]);
    }
    return window.btoa(binary);
}

and then this is how I use it in my js file to populate <IMG /> using jQuery:

let captchaImage64 = _arrayBufferToBase64(mfaLoginForm.fieldInfo.image);
                let captchaImage = $('<img />', {
                    src: "data:image/png;base64," + captchaImage64,
                    class: "img img-responsive",
                    style: "margin:auto; max-width:250px; margin-bottom: 15px;"
                });

let captchaContainer = $('<div />', {
                    class: "form-group row",
                    id: "captchaContainer"
                });

captchaContainer.append(captchaImage);