Using JsonWebToken authorization header to fetch images - javascript

I have an api where you need to have a valid json web token to upload an image:
For example, I make a post (with the Authorization header to this url) to upload a photo:
http://localhost:3000/api/account/events/54f9b55254fb9f32306a26dd/sponsors/54fdb4212f67981b1f6a8665/logo
If I want to fetch an image I'll do a GET request to the same url, however, this won't work when using JWT because I can't send an Authorization header when fetching an image.
Is there a solution? The image cannot be made public until the user authorises it.

It is not clear why you can't send an Authorization header when making a GET request. Who is making that request? Do you want to load the image using an HTML image tag?
If so, you'll need to add authorization to your site and point the src attribute of that tag to an resource in your site that is protected by cookie auth. You can then have that resource implementation call your web API with the JWT token.

Related

Using PDF.js viewer to display a pdf served by a protected resource

I'm investigating how to use the pdfjs viewer to serve a PDF that is behind a protected resource.
From my understanding, this would work if the resource allowed anonymous access:
https://app.com/pdf.js/web/viewer.html?file=https://app.com/pdf/{id}
The resource https://app.com/pdf/{id} returns a response with content type application/pdf.
However, that resource requres a OAuth2 token to be present in the authorization header.
So is it possible to modify the headers created by the viewer, to include a authorization header and pass the token of the user?
PDF.js can read file in Base64 format (example). So You can use Ajax / HTTP Client to download binary data with authorization header, convert to Base64 string then embed into PDF
Edit: You can set HTTP headers to PDF getDocument function. So you can store access token in Web Storage, then get it in pdf viewer's page
var loadingTask = pdfjsLib.getDocument({
url,
withCredentials,
httpHeaders: {
authentication: "abcxyz",
}
});

Spring REST-JWT-JavaScript navigate between secure pages

I have a Java Spring REST back-end (#RestController) and using as security option Json Web Tokens(no session). At the front-end I want to use JavaScript (jQuery to send requests to back-end), Html.
So after login I save a JWT in browser and send it back in header with every request I make to #RestController.
My question is: How to navigate between pages (that are accessible only for authenticated users) from js? How #RestController will work in this case?
The #RestController handle the requests containing a path (the path of the request is not necessary to be the same with the path(URL) from front-end)
Solution (if you have a front-end server): When you try to reach a front-end URL you make a call to the server-side; if the response status is 200 the page can be displayed(with the body of the response if you send information); if the response is not you will stay on the home page, or you can redirect the user to login page...
Also check this : http://www.studytrails.com/frameworks/spring/spring-security-method-level/

Calling API url parameters issue

I have a cms, where am using laravel as web api, angularjs for requests.
I have an iframe where I call to services with a direct link and put it usig trusted src function.
The main problem is, I can not use a normal http post request and hide parameters, because using http request will return data, not file, and the report api returns in headers, an html file, pdf ... etc) so when i get result to the success of my http request, it won't download pdf file, it will show special chars
in the i frame am calling the api like this :
"localhost/api/getreportService/"+$scope.brandid+"&"+$scope.customerid"
but that's cannot be secure, is there any way to hide the request here from users?
ok, I found a solution, I called the api via http post request then I used $sce tustAsHtml for the response, with a ng-bind-html in my template and the result is good now, the report is showing in the div,
Now all is safe, the user needs a token to access the report, and that's impossible without a login.

Nodejs read image from server with promise

I already found some posts regarding on how to send an image to a client with nodejs. However the in the backend I get the image from another url, where I need to pass an authentification header.
From the client, I want to access the response and the image what so ever, but this doesn't seem to work, as the response only shows the image binary encoded.
Any solutions to this? Or how would you access an image that is user:password protected on the server (so a basic auth header is required for that)

how to send Twitter OAuth access tokens with ajax request?

I want to load in a user's home timeline after authenticating through 'sign it with twitter' using OAuth. I'm using this library to handle the authentication part https://github.com/jmathai/twitter-async
The authentication part is working fine but I'm unclear about how to send requests to twitter api as the given authenticated user. I want to make an ajax request for for the user's home timeline like this:
// this call produces "is not allowed by Access-Control-Allow-Origin" error
$.getJSON("http://api.twitter.com/1/statuses/home_timeline.json", function(json) {
console.log(json);
});
So my question is how do I send the user's access token along with my request and where is the token stored? Or am I approaching this problem wrong?
You need to make this request into a JSONP request, so you can do cross-domain AJAX.
$.getJSON("http://api.twitter.com/1/statuses/home_timeline.json?callback=?", function(json) {
console.log(json);
});
The ?callback=? converts this into a JSONP request.
The link you provided is for a PHP library. If you want to make API calls in JavaScript, you need to use a JavaScript OAuth library.

Categories