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

[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 😅

[CodeWitchBella]

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.