Refused to evaluate a string as JavaScript because 'unsafe-eval'

[mskzo]

Before you start - checklist

• [x] I followed instructions in documentation written for my React-PDF version
• [x] I have checked if this bug is not already reported
• [x] I have checked if an issue is not listed in Known issues
• [x] If I have a problem with PDF rendering, I checked if my PDF renders properly in Mozilla Firefox

Description

• Version 5.4.0 is using unsafe eval code that is not compatible with web apps using csp tags.

react_devtools_backend.js:4049 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' 'nonce-RPukjdOq7L0Ry+9a/fRRIw==' 'nonce-Zu/WxXUZuiyYVpKneulw8w==' 'nonce-F/QtNUz/WFmYzFb11CAZrg=='".

at Function (<anonymous>)
at Object.__webpack_modules__ (pdf.js:1462)
at __w_pdfjs_require__ (pdf.js:24579)
at Object.__webpack_modules__ (pdf.js:866)
at __w_pdfjs_require__ (pdf.js:24579)
at Object.__webpack_modules__ (pdf.js:58)
at __w_pdfjs_require__ (pdf.js:24579)
at pdf.js:24820
at pdf.js:24601
at factory (pdf.js:33)

Steps to reproduce

• Build the app and define CSP header (You can also test with csp-html-webpack-plugin in order to generte html tag)

[aleksil]

I think this is due to using the legacy version of pdfjs-dist. The transpiler that they use generates code that uses eval when polyfilling for async/await as discussed here: https://github.com/mozilla/pdf.js/issues/11036

The solution would be to not use the legacy version, and drop support for old (unsupported by the vendor) browsers. Adding 'unsafe-eval' to your CSP will fix the problem, but also severely reduce the security provided by CSP.

[aleksil]

I can confirm that using patch-package and replacing every instance of pdfjs-dist/legacy/build/ with pdfjs-dist/build/ in the react-pdf package fixes the problem and allows the use of a strict CSP without 'unsafe-eval'.

Perhaps there would be a way to build two versions of the react-pdf package, one that uses the the legacy pdfjs and one that uses a modern variant, similar to how pdfjs themselves do it?

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

[wojtekmaj]

@aleksil I think that's a great idea, but I don't have a clue at the moment on how we could implement that. pdfjs-dist lib is used in lots of places throughout the code so we would need to have some kind a module that reexports pdfjs-dist version we want. This creates some additional challenges, not only with creating the module itself, but also how to make it work with tree shaking and so on.

[twistedpair]

+1 vote here, as we'll likely have to remove react-pdf from our apps, given it prevents making apps more secure.

It really would be nice if this could be addressed.

[wojtekmaj]

Since v5.4.0, PDF.js has been updated twice in React-PDF. Is this still an issue?

I was able to run v5.7.1 with <meta http-equiv="Content-Security-Policy" content="script-src 'self'" /> added to html with no issues.

[mskzo]

The issue is still happening in the last two versions (5.7.1 and 5.7.2) if you use the entry.webpack. But It is not replicable if you use the Standard configuration described in the documentation.

[jepek]

~~I can confirm - On 5.7.1 and 5.7.2 it messes up with our CSP~~

EDIT: I was wrong, in my case, it was coming from another react-pdf. I used @react-pdf/renderer and react-pdf together and confused both.

[wojtekmaj]

Based on https://github.com/wojtekmaj/react-pdf/issues/862#issuecomment-941005115 I believe that 6.0.0 beta may solve this issue.

[jepek]

I am sorry @wojtekmaj I made a mistake. I edited my comment.

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 14 days with no activity.