PDF fails to load with script-src 'self' CSP directive

[benjaminjohnking]

Describe the bug
When applying content security policy script-src 'self' to your website, the viewer fails to load the PDF. The browser console includes an error that reads:
Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".

Version info

• 8.2.0

Desktop

• Browser: Google Chrome Version 88.0.4324.192 (Official Build) (x86_64)

To Reproduce

1. In the reproducer template, update the ngx-extended-pdf-viewer version in package.json to ^8.2.0
2. Apply this line inside the head element in src/index.html: <meta http-equiv="Content-Security-Policy" content="script-src 'self'">
3. Load the reproducer template in a browser
4. Observe that the PDF does not load
5. Open the JavaScript console to observe the aforementioned error, also pictured below.

Screenshots

Additional context
In investigating this issue, I was led to ngx-extended-pdf-viewer.component.ts and its routine for checking for whether or not to use the ES5 library. Part of this check involves evaluating the JavaScript expression null?.size(). However, it uses the eval function to verify this, which is prohibited by the CSP. This is what generates the error and ultimately results in a false positive that incorrectly sets the needsES5 flag to true. Below is the offending line of code.

ngx-extended-pdf-viewer/projects/ngx-extended-pdf-viewer/src/lib/ngx-extended-pdf-viewer.component.ts

Line 600 in a3965cb

eval("null?.size()");

An interesting historical tidbit, the original complaint that led to there being two builds of the PDF.js library was an incompatibility with a CSP policy.

mozilla/pdf.js#11036

Let me know if you have any further questions. Thank you in advance for your help!

[stephanrauh]

Holy moly! OK, back to square one, once again... I've done quite a bit of research before implementing the eval() bit, but I didn't expect this error.

At the moment, I'm out of clues. Maybe you can help it. Everything could be easy if Angular allowed me to use a simple JavaScript file. But I didn't find a way to include a JavaScript file, apart from uploading a library to npm, which feels like overkill to me. Basically, all I need is to excecute the null?.size() bit to find out if the null-safe operators are supported. If there's a different way to find use, such as using the CanIUseLight library, I'm happy with that, too.

Any suggestions?

[benjaminjohnking]

In terms of loading a JS file into Angular, I'm aware of two ways to do that. One would be to load it dynamically, whereas the other would be to apply it to the scripts block in your angular-cli.json file. Something else to play with is to see what can be run using window.Function or window[fnName].apply, as seen here. If all else fails, then it might be worth asking whether or not there is another means of checking for browser compatibility other than testing null safety via optional chaining. I don't have any ideas off the top of what that would be, but hopefully this serves as some food for thought. I'll be sure to let you know if I have any further ideas. Hope that helps! Thanks again!

[stephanrauh]

Awesome, thanks! The approach using window.Function() looks promising. I'd prefer to add the script to the angular.json file, but that's not possible in a library (at least in Angular 7, recently the Angular team has done a lot for library developers).

[leacollaboro]

Hitting this too!

[leacollaboro]

I noticed you've pushed some changes for this? Any chance we could get a package released with the fix or are you still testing it. Thanks!

[stephanrauh]

Sorry for the late answer - the last couple of week have been busy. The bugfix has landed with the current 9.0.0-alpha versions.

[zakhenry]

@stephanrauh I get the same issue, using 9.0.0-alpha.4 - is it possible the issue regressed?

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'sha256-ayhj4XIfUWdGDRrgCFc3xqL2QUXlRw9PIRIGE+d7wT4=' http://www.babylonjs.com".

    at Function (<anonymous>)
    at Object.defineProperty.value (VM51 pdf-2.7.684-es5.min.js:22)
    at __w_pdfjs_require__ (VM51 pdf-2.7.684-es5.min.js:22)
    at Object.<anonymous> (VM51 pdf-2.7.684-es5.min.js:22)
    at __w_pdfjs_require__ (VM51 pdf-2.7.684-es5.min.js:22)
    at Object.<anonymous> (VM51 pdf-2.7.684-es5.min.js:22)
    at __w_pdfjs_require__ (VM51 pdf-2.7.684-es5.min.js:22)
    at VM51 pdf-2.7.684-es5.min.js:22
    at VM51 pdf-2.7.684-es5.min.js:22
    at VM51 pdf-2.7.684-es5.min.js:22
    at webpackUniversalModuleDefinition (VM51 pdf-2.7.684-es5.min.js:22)
    at VM51 pdf-2.7.684-es5.min.js:22

[zakhenry]

Hum I'm not sure why it is loading the es5 version, I'm on Chrome and a very tight browserlist:

last 2 Chrome versions
last 2 Firefox versions

[zakhenry]

ah ok I've got it, I'll raise a separate issue