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
Logs
N/A