React-pdf: Can't use with Content Security Policy

[ekilah]

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

[diegomura]

Hey @ekilah !

Thanks for reporting this. I'm sorry to hear about this problem.

I would like to help you on this but I'm not sure if I can. Even if we fix fontkit and restructure (we are already using a fork for fontkit), yoga-layout is something that is way out of my control. yoga is originally written in C++ and compiled to asm.js using emscripten. So any eval call comes from there. I couldn't find a way of removing them, and I'm not sure if there's any at all.

I would be happy to solve this on the fontkit and restructure side, but only if there's a way of also fixing yoga-layout-prebuilt.

I'm keeping this open for awhile if you or someone else knows how to tackle that part, but until then I cannot do much.

My apologizes again

[ekilah]

@diegomura thanks for the reply. I agree, if it can't be fixed completely for my use-case, there's not much point beyond having a little more confidence in the dependencies from a security standpoint.

yoga-layout looks like a repo that doesn't get much attention from Facebook on GH issues. a little deeper look showed that all the evals in yoga-layout probably come from https://github.com/charto/nbind , the tool that helps them use C++ in JS, and it looks like (from a quick search, and an assumption) that eval is somewhat critical to that library's functionality... I may open an issue there but it will likely be a dead-end.

[diegomura]

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 😅

[ekilah]

made an issue over at nbind: https://github.com/charto/nbind/issues/128

[AgarwalShyam]

Hi Team,

We have also used the same @react-pdf/renderer package but getting the CSP issue in the chrome browser, is anybody has any update on this or any workaround?

Thanks & Regards,
Shyam Agarwal