Loading document with cookie for authentication

Technical Support
1

Which product are you using?
PDF.js Express Viewer

PDF.js Express Version
8.7.4

Detailed description of issue
The PDFs are accessible through a Rest-API that expects a cookie with an authenicated jwtToken.
I use this:
instance.UI.loadDocument(apiUrl + ‘api/files/’ + pdfState.selectedPDF, { withCredentials: true });
But this request fails to add the cookie which is stored in the browser.

I would also need to add the cookie upon creation of the PDFJSExpress object when setting the initialDoc

Expected behaviour
Based on the API documentation (PDFJS Express WebViewer Namespace: UI) i assume that the withCredentials option is what i need.
The request would then include the required cookie

Does your issue happen with every document, or just one?
Yes, any document

Link to document
not possible

Code snippet

useEffect(() => {
if(pdfJsExpressInstanceRef) {
console.log('starting to load document: '+apiUrl + ‘api/files/’ + pdfState.selectedPDF)
pdfJsExpressInstanceRef.current?.UI.loadDocument(apiUrl + ‘api/files/’ + pdfState.selectedPDF, { withCredentials: true });
}
},[pdfState]);

3

Hi there,

Thank you for contacting pdf.js express forums,

Could you please share a screenshot of the error message and the failed network requests?
Are you able to share a minimal runnable sample project that can reproduce your issue?
Are you adding any specific options to instantiate the Viewer? i.e.
customHeaders: { Cookie: “AUTHTOKEN=xxxxxxx” },

Here’s a potentially relevant discussion I found on StackOverflow:

Best regards,
Kevin Kim

4

Dear Kevin,
Thanks for having a look at my question.
The error message is just a http response indicating that there was an unauthorized request.
For any other request made with axios with the .withCredentials = true setting to the same entry point run without any problem. In my browser i can see that the axios request indeed includes a cookie having the jwtToken which is required by the Rest service. However, although I use the , { withCredentials: true }) option for the webbviewers.ui.loaddocument, there is no cookie in the request.
I can’t provide a minimal sample project. It’s running within my closed network.
I’m not using the customHeaders. My cookie is supposed to be HttpOnly which means that the javascript should not have access to the content of the cookie.
kind regards,
Bart

5

Hi there,

Because the viewer is in its own iframe container, you may have to set up CORS to include credentials as well as mentioned in the above stackoverflow post (Why is the browser not setting cookies after an AJAX request returns? - Stack Overflow)
Perhaps this post may also prove useful:
CORS error and withCredentials - #6 by Andy_Huang - Technical Support - Apryse Community

Best regards,
Kevin Kim

6

Hi Kevin,
Thanks for the suggestions, i looked at both of them but i can’t figure out how the info on these pages can be used to solve the problem.
The headings and CORS are all set correctly on the server. Any request from outside the iframe is running smoothly.

It seems that the iframe in which the viewer is does not allow communication from the parent page as it is in a strict sandbox.
Is it possible to overrule these sandbox settings. That would allow me to send the token by a message to the viewer.

kind regards
Bart

7

Hi there,

Thank you for your response,

To access the outer page from the iframe, you will need to use a config file:

Best regards,
Kevin Kim