how to add authentication header to $window.open

Question

I have angularjs application where users enter data that is saved to database, then on server side it is compiled into pdf file. All access requires appropriate authentication headers in place. After needed data is filled a user presses button to save data and then to retrieve pdf file. Optimally, I call $window.open(url_generating_pdf) in my angularjs app. This works well and opens in another window, but how to add authentication header to this $window request? In my understanding I cannot download pdf, and print it with ajax, so I am missing this authentication. Or would there be other ways to call url from server, and make the file open in another window?

Answer 1

I think you can add this authentication parameters in URL and do a GET in your server side

//Add authentication headers as params
var params = {
    access_token: 'An access_token',
    other_header: 'other_header'
};

//Add authentication headers in URL
var url = [url_generating_pdf, $.param(params)].join('?');

//Open window
window.open(url);

Answer 2

I think I should update this old question with a correct and secure answer.

You can not add any headers in the HTTP GET request performed by window.open.

The secure way to make an authenticated request is to set the authentication token into a request header, and avoid exposing it into the URL, as my previous answer suggested (I have learned a some things since then).

To download a PDF (or any other binary data) from an authenticated server with AngularJS you should:

1. Make an HTTP GET request to the resource sending the authentication token in a header, setting its responseType to a binary data type, for example blob or arraybuffer.
2. Download the binary data in a file using the "Save As" dialog from the browser, usually creating a download link for the binary data and clicking it.

I hope this answer to clear doubts on this question and provides a secure way to download a resource from an authenticated REST API.

Answer 3

You could call your secured api with token in header and responseType to blob and parse your response in following way and hope you will view your pdf in browser for chrome and firefox.

var ieEDGE = navigator.userAgent.match(/Edge/g);
        var ie = navigator.userAgent.match(/.NET/g); // IE 11+
        var oldIE = navigator.userAgent.match(/MSIE/g);

        var blob = new window.Blob([response], { type: 'application/pdf' });

        if (ie || oldIE || ieEDGE) {
          window.navigator.msSaveBlob(blob, fileName);
        }
        else {
          var fileURL = URL.createObjectURL(blob);
          window.open(fileURL);
        }