Get PDF via REST API with header authentication token and show in iframe

Question

I need to embed a PDF document into html but the document needs a token authentication that is passed in as a header.

headers: {'X-Authentication': t}

Where t is the token that I retrieved after Server authentication.

How can I get the document on the client side and display it in an iframe?

I am using angular to make the REST calls to the server.

Answer 1

I'm not entirely sure this will work but here's how I'd approach it...

Assuming you can get the PDF binary in your app, do so like this

$http.get('/path/to/pdf', {
    responseType: 'blob',
    headers: {
        'X-Authentication': t
    },
    transformResponse: function(data) {
        // don't forget to inject $window

        return ($window.URL || $window.webkitURL).createObjectURL(data);
    }
})

This will return an $http promise (like a normal promise but with success and error methods) where the data is resolved as a URI you can use in your iframe's src attribute. For example...

.success(function(uri) {
    $scope.iframeUri = uri;
});

See https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL