ajax - File download in Angular and JWT -
tl;dr
how download/save file using angular , jwt authentication without leaving token trail in browser?
my angular/node app secured on https , uses jwt authentication. jwt stored in sessionstorage , passed in authorization header field ajax requests server.
i need functionality in app download file it's automatically saved browser (or popup displayed save etc.).
it should work ideally in browser can run angular.
i have looked @ following:
ajax requests. doesn't work because of inherent security measures preventing browser saving file locally.
pass jwt in cookie - cookies want avoid using, hence reason using sessionstorage.
pass jwt in query string means logged in server logs, , more importantly can seen in browser history.
iframe contains form posts data. can't set header method.
any other options?
the iframe method close. need set server accept jwt body of post rather query string.
it's not elegant solution having use iframe, seems meet requirements. here's directive used:
.directive('filedownload', function () { return { restrict: 'a', replace: false, template: "<iframe style='position:fixed;display:none;top:-1px;left:-1px;' />", link: function (scope, element) { element.click(function() { var iframe = element.find('iframe'), iframebody = $(iframe[0].contentwindow.document.body), form = angular.element("<form method='post' action='/my/endpoint/getfile'><input type='hidden' name='foo' value='bar' /><input type='hidden' name='access_token' value='" + scope.access_token + "' /></form>"); iframebody.append(form); form.submit(); }); } } });
and in express middleware pop jwt header before validating express-jwt module
if (req.body && req.body.hasownproperty('access_token')) { req.headers.authorization = 'bearer ' + req.body.access_token; }
Comments
Post a Comment