Content Security Policy headers: 'nonce' key not working

[jlfrances]

Overview

In my Angular application, I'm setting the Content-Security-Policy response header using 'nonce' by a meta tag and also angular.json headers section, and both work well.

But when I open a dialog to load the PDF (using ngx-extended-pdf-viewer) I get errors.

What I'm thinking

It seems to me that there's no way to specify to ngx-extended-pdf-viewer what's actually the nonce value.

I saw in your docs you added a reference to this, but I think it's not enough for two reasons:

• the nonce value should not go in the directive "default-src" (only "script-src" or "style-src")
• there should be a way to send the nonce value by parameter to the pdf-viewer (i.e. like the language, theme, showDrawEditor, etc). Like for example in Angular they added a way to provide it (in v17).

Source: https://www.npmjs.com/package/ngx-extended-pdf-viewer

Bug

1. Create Angular app that uses ngx-extended-pdf-viewer
2. Open the angular.json file
3. Find (or create) the path: projects > (your-project) > architect > serve > options > headers
4. Add the header like:

       "architect": {
           ...
           "serve": {
               ...
               "options": {
                   "headers": {
                       "Content-Security-Policy" : "default-src 'self' 'nonce-fakeNonce'; style-src 'self' 'nonce-fakeNonce'; script-src 'self' 'nonce-fakeNonce';"
                   }
               }
         }

5. Serve your application
6. Open the application in your browser
7. Open the debug tools
8. In the web app, open any PDF with the ngx-extended-pdf-viewer
9. You will see several errors in the console like:

10. Click on the file where the error is pointed:

12. You will see the piece of code where the error is happening:

Version info

"ngx-extended-pdf-viewer": "^20.0.2"

[stephanrauh]

Your error description looks very detailed - I hope I manage to reproduce the bug. Solving it may take a while because I know very little about CSP, and the CSP documentation doesn't seem to be compatible to the way my brain works. Luckily, your Angular.dev link seems to be better. Maybe I'll finally manage to wrap my head around it!