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

ng-if not functioning properly in Internet Explorer 8

Can whitelist functionality be applied in the browser version of Babel?

Extract the Date portion from a DateTime object in ASP.NET MVC

Middleware for enabling the Cross-Origin Resource Sharing (CORS) functionality to efficiently manage preflight

Top method for identifying browser window modifications such as navigating back, altering the URL, refreshing, or closing the window

I'm feeling confused about the breaking change in Angular 1.4.0 and its select feature

Tips for correctly updating the status of a checkbox linked to a database

Struggling with AngularJS routing woes

Passing PHP value from a current page to a popup page externally: A guide

Tips for preventing the occurrence of undefined when retrieving data?

Enhance and Modify feature using Javascript

How to break out of an endless loop in Node.js and Express.Js

The Angular watcher is not triggered when listening for changes from the Date() function

unable to add browse-sync to Ubuntu 16.04

Track and manage date ranges inclusive of specific times

Pedaling back and forth along a sequence

What is the purpose of using $ symbols within NodeJS?

What is the method for altering the date format of a published article?

Issue with Hover Effect on Safari Browser

Ways to merge multiple cells horizontally in a table right from the beginning