Broken React PDF preview

Self-Hosted | v5
1

Version

v5.11.17

Environment

VPS under Ubuntu v22.04.4 STANDARD virtuozzo with cPanel 124.0.21 running LiteSpeed Web Server Enterprise 6.3.1

Checklist

  • Can you replicate the issue on our v5 demo site https://demo.invoiceninja.com or Invoice Ninja?
    No
  • Have you searched existing issues?
    Yes
  • Have you inspected the logs in storage/logs/laravel.log for any errors?
    Yes, empty error log

Describe the bug

Can’t see the PDF preview anymore in React, either by creating/editing documents or creating/editing templates. The invoice editor HTML preview doesn’t load either.

There is a message on the page about the content being blocked, so I tried disabling a few extensions, running the web app in incognito mode, I switched browsers… nothing worked.

The div id for the preview pane is “sub-frame-error”.

Steps To Reproduce

Just try to edit or create a PDF document on the React web app.

Expected Behavior

The PDF preview should be displayed.

Additional context

I am using hosted_ninja as the generator.

I can create and edit PDF docs just fine with the Flutter native apps (Windows, Android), it’s just a bit more tricky since I lose the HTML selectors to edit relevant CSS in the template editor.

Here is what the browser console is saying when loading the preview with the React web app:

bundle.e2d701a2.js:143 
 Refused to connect to 'https://pdf.invoicing.co/api/version' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.
bundle.e2d701a2.js:143 
 Refused to connect to 'https://pdf.invoicing.co/api/version' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.
bundle.e2d701a2.js:390 
 
ND {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}
InvoiceViewer-44b35aed.js:1 
 Refused to frame 'blob:https://domain.com/a16bb86e-cb5b-443b-a39c-c785c7366ef9' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback.
VM328:646 
 Uncaught TypeError: Cannot read properties of null (reading 'classList')
    at HTMLDocument.onDocumentLoad (VM328:646:19)
InvoiceViewer-44b35aed.js:1 
 Refused to frame 'blob:https://domain.com/623837ad-1a17-4b03-ac95-f2a5a5570cf4' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback.
VM366:646 
 Uncaught TypeError: Cannot read properties of null (reading 'classList')
    at HTMLDocument.onDocumentLoad (VM366:646:19)
onDocumentLoad	@	VM366:646

I have the following line added to my .env file, but it doesn’t seem to help:

CSP_STRING="default-src 'self' https://pdf.invoicing.co; connect-src 'self' https://pdf.invoicing.co; frame-src 'self' blob:; img-src 'self' https: data: blob:; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://static.cloudflareinsights.com; ..."

Screenshots

image
image2979×1821 399 KB

Logs

N/A

2

Hi,

Thank you for the detailed error report, I suggest asking in a discussion on GitHub.

3

OK sure, I’ll do that when I have a few minutes.

In the meantime, what’s the best way to go back to the Flutter web app? I really need to fix a CSS issue that was introduced with one of the updates and for that I need the HTML invoice viewer to use the element selector.

Edit: I “set_react_as_default_ap” option in the accounts table to “0”, then ran php artisan optimize. It worked.

Edit 2: PDF preview works as intended in the Flutter web app but not the HTML preview, it gets blocked just like in the React app :face_with_spiral_eyes: