Displaying Photo on Webpage using Bearer Authorization Token in JavaScript

Question

Displaying Photo on Webpage using Bearer Authorization Token in JavaScript

In my JavaScript code, I am currently loading an image using the following method:

var img = new Image();
img.onload = function () {
..
};
img.src = src;

However, I have recently realized that I need to secure the images on my server side with OAuth 2, just like the rest of my application. This means that I will receive a 401 Unauthorized error when trying to load the images.

My application is built using Angular and I have an interceptor set up to add the Authorization header to all service requests made through Angular. But in this case, since the image call is not made within an Angular context, the interceptor is not applied.

Does anyone have any suggestions for how I can add the Authorization header to the get request for the image?

javascript angularjs oauth-2.0 asp.net-web-api2

Answer 1

Answer №1

If your server side options are limited, you can also trigger a GET request using XMLHttpRequest with the appropriate access_token and utilize the image src attribute to display the content by encoding the response in base64 and creating a data URI scheme as shown below:

var request = new XMLHttpRequest();
request.open('GET','https://dl.content.com/contentfile.jpg', true);
request.setRequestHeader('Authorization', 'Bearer ' + oauthToken.access_token);
request.responseType = 'arraybuffer';
request.onload = function(e) {
    var data = new Uint8Array(this.response);
    var raw = String.fromCharCode.apply(null, data);
    var base64 = btoa(raw);
    var src = "data:image;base64," + base64;

    document.getElementById("image").src = src;
};

request.send();

Answer 2

If your server side options are limited, you can also trigger a GET request using XMLHttpRequest with the appropriate access_token and utilize the image src attribute to display the content by encoding the response in base64 and creating a data URI scheme as shown below:

var request = new XMLHttpRequest();
request.open('GET','https://dl.content.com/contentfile.jpg', true);
request.setRequestHeader('Authorization', 'Bearer ' + oauthToken.access_token);
request.responseType = 'arraybuffer';
request.onload = function(e) {
    var data = new Uint8Array(this.response);
    var raw = String.fromCharCode.apply(null, data);
    var base64 = btoa(raw);
    var src = "data:image;base64," + base64;

    document.getElementById("image").src = src;
};

request.send();

Answer 3

Answer №2

To include the bearer token in the URL, simply follow these steps:

var image = new Image();
image.onload = function () {
..
};
image.src = src + '?access_token=mF_9.B5f-4.1JqM';

This approach aligns with the OAuth 2 specification: https://www.rfc-editor.org/rfc/rfc6750#section-2.3

While this method has its limitations, the creators anticipated potential issues and incorporated it as a solution.

Answer 4

To include the bearer token in the URL, simply follow these steps:

var image = new Image();
image.onload = function () {
..
};
image.src = src + '?access_token=mF_9.B5f-4.1JqM';

This approach aligns with the OAuth 2 specification: https://www.rfc-editor.org/rfc/rfc6750#section-2.3

While this method has its limitations, the creators anticipated potential issues and incorporated it as a solution.

Displaying Photo on Webpage using Bearer Authorization Token in JavaScript

Answer №1

Answer №2

Similar questions

Duplicate values of React object properties when using .push method within a loop

Tips for iterating through data in JSON format and displaying it in a Codeigniter 4 view using foreach

Unable to locate $element post minification

Injecting CSS styles into a webpage using a Chrome extension before the page has completely loaded to achieve instant customization

Why does my console refuse to log the input entered for the search?

What could be causing JavaScript fetch to only send OPTIONS requests instead of the expected calls?

Sending the image's identification number as a parameter to a function and showing the total number

What is causing the error to occur during the installation of the NestJS Client?

I am uncertain about whether it would be better to utilize URL path parameters or query parameters for filtering on the back-end of the application

Detach an item from its parent once it has been added to an array

Incorporate React into current Node express application by utilizing a content delivery network (CD

Implementing the ui-tinymce Directive Within a Different Directive

Error message: App not defined in Ember App.router

Is there a way to maintain the second form's state when the page is refreshed using Vue.js?

Property that is dynamically populated based on data retrieved from an external API

Checking for a particular element's existence in an array using jQuery

Utilize existing *.resx translation files within a hybrid application combining AngularJS and Angular 5

Implementing a feature to insert a horizontal rule button in React Draft Wysiwyg

PreventDefault doesn't work well with Bootstrap toggling data

Steps to eliminate pre-chosen alternatives upon loading select control?