react-pdf: Can't use with Content Security Policy
Describe the bug
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:
Our site has a Content Security Policy preventing eval() from being used. Several dependencies of this project use eval(), here are PRs where people have tried to fix this there unsuccessfully:
fontkit: https://github.com/foliojs/fontkit/pull/180
restructure: https://github.com/foliojs/restructure/pull/29
yoga-layout: (see below)
One guy has forked those two ( https://github.com/Hopding/fontkit and https://github.com/Hopding/restructure , @Hopding ) to fix these issues because it seems like the maintainer of the originals is somewhat unresponsive to this issue.
I was able to work around this by replacing this repo’s dependencies with @Hopding’s forks, for instance:
"resolutions": {
"restructure": "https://registry.yarnpkg.com/@pdf-lib/restructure/-/restructure-0.0.1.tgz#e38c81b6ddaa8c982e7780620c89bddfb6c53653"
}
the above is the result of a manual process to link to the fork’s product because of a bug in yarn (see https://github.com/yarnpkg/yarn/issues/5235 ), something like "restructure": "https://github.com/Hopding/restructure#8af8c49f3a63681d90554be1600d1b381ff9114d" should work in theory.
However, it looks like after doing that, there is another dependency here that uses eval, and this time it’s yoga-layout-prebuilt (a wrapper around yoga-layout). I can’t seem to find any forks or issues on either of those repos that attempt to remove the eval there. Seems like a large repo, so I’ve hit a bit of a wall towards solving this myself.
error message for reference:
if I add unsafe-eval in my CSP, everything works.
Note: I know these are issues in dependencies, and not in this repo itself, but:
- Ideally this repo wouldn’t have dependencies that cause issues like this for a relatively common CSP configuration
- This repo could potentially use forks of the dependencies that fix these issues
- I’m not sure where else to ask about / point out these issues, since they are somewhat widespread
To Reproduce
Have a CSP that is restrictive of script-src, i.e.:
<meta http-equiv="Content-Security-Policy" content="
...
script-src
'self';
..
"/>
and then try to include this project.
Expected behavior
I can avoid using unsafe-eval and use this project
Desktop (please complete the following information):
- OS: Mac
- Browser Chrome
- @react-pdf/renderer
1.4.0
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 24
- Comments: 25 (2 by maintainers)
it should be fixed in the next release
pdfkitandrestructuredidn’t have evals wor a while and i updatedyoga-layoutto version withoutevaltooFor those asking for updates, I can only say that we chose not to use
react-pdfbecause of this issue (though it’s notreact-pdfs fault). allowingunsafe-evalwas not an option for us.Feel free to try and make more noise on this issue, which blocks fixing this for
react-pdf: https://github.com/charto/nbind/issues/128We’re using a different tech stack, outside of the React realm, to create PDFs for now.
Yes, you are right about where those
evals come from. I hope opening an issue there will eventually has some effect on this. I once tried to translate Yoga to plain JS, with some success, but it was a crazy and time-consuming task. At the same time, it was very hard then to maintain. I know Yoga isn’t the most maintained project out there, and the way of using it on JS adds lots of overhead (such as nbind and stuff), but it does it’s job quite well and I just cannot maintain that much code alone 😅Hey, I still have this issue.
Im using react-pdf/renderer 3.3.8 that has a dependency on react-pdf/layout 3.11.2 that again depends yoga-layout: 2.0.1
wasm-async-web.js:13 Uncaught (in promise) RuntimeError: Aborted(CompileError: WebAssembly.instantiate(): Refused to compile or instantiate WebAssembly module because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' https://*.hotjar.com 'unsafe-inline' blob:"). Build with -sASSERTIONS for more info.Is it not a part of the release yet?
Adding a screenshot on where the file is located
New development by @shuding: https://github.com/shuding/yoga-wasm-web
Yoga ported to wasm. Used by vercel, which might help on the maintenance front. I don’t know if the bindings are compatible with official yoga build, but it’s worth a look.
Now it’s matter of figuring out, how to use this library in react-pdf. Main difference is that instantiation of wasm is async, so you need to somehow inject it to all the right places, which right now import it directly. I did all this for previous version, but I don’t think that any of this is still portable to current react-pdf and it was always hacky anyway.
Hi @AgarwalShyam and @ekilah, You can allow
'unsafe-eval'and secure all the others CSP or maybe allow it only for one path such as/path/to/page, it is not the best solution but you can use it if you had to@diegomura Is this issue being priortized, as it’s open since long? We were able to solve the long running pdf issues by this but kind of stuck now due to unsafe-eval in csp. If you can give an update on this, I will really appreciate that so that our team can make the decision to move away to some other approach. Thanks 😊
@ekilah
Someone posted on Stackoverflow about an alternative library: https://stackoverflow.com/questions/68557489/react-and-csp-evalerror-call-to-function-blocked-by-csp
Is there any solution for that? Unfortunately adding
'unsafe-eval'is no option for us. We are having troubles with the Restructure package as well.