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

Question

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?

Answer 1

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",
  }
});