Library is incompatible with secure CSP + TSDX is unmaintained

[Wojonatior]

Issue Explanation

My team and I have been working to implement a Content Security Policy (CSP) on our site as a protection against XSS attacks. Unless explicitly disabled, CSP policies will block eval(...) Function(...) and other ways to trivially execute any javascript.

Through a series of dependencies, starting with TSDX, this library pulls in a use of Function(). The issue trickled in through Facebook’s Regenerator library, which is used in a polyfill for async/await. That particular pollyfill is used by TSDX. It looks like a possible fix for the issue was shipped recently.

But I wouldn’t expect that change to make its way into here, since TSDX appears abandoned. The developer allegedly skipped town on TSDX in favor of working on a closed-source and waitlisted tool.

Hopefully this is enough info and context on the issue. I’d be glad to answer any questions about our use case, I know CSP isn’t a popular subject of web development.

Related Issues

Facebook/Regenerator

• CSP unsafe-eval in Web Worker in Chrome Browser which is always strict mode · Issue #450 · Facebook/regenerator · GitHub
• Detection for accidentalStrictMode results in failures on some platforms · Issue #378 · Facebook/regenerator · GitHub

Formium/TSDX

• Is TSDX still maintained? · Issue #1065 · formium/tsdx · GitHub
• CSP that blocks unsafe eval errors on regenerator-runtime · Issue #954 · formium/tsdx · GitHub

Your Environment

• OS: Mac 11.4
• Node: 14.17.4
• React: 17.0.2
• Webpack: 4.44.2
• Babel: N/A
• @react-google-maps/api: 2.2.0

How is it behaving?

The entire React bundle we have is blocked in the browser by CSP because of unsafe code used by the polyfill. An error like this will show up in the browser console: Uncaught EvalError: call to Function() blocked by CSP

How should it behave correctly?

The library shouldn’t rely on a library using a polyfill that calls an unsafe workaround.

Code Sample

CodeSandbox and CSP don’t seem to play well together, so I wasn’t able to get a working example in codesandbox.io. But I have hosted the example on heroku. The app is here, the code is here. The maps code is just copied from an example in the repo. The dyno is only a free tier, so you may need to wait a moment for it to spin up.

When running locally, you can remove the @react-google-maps/api dependency and the bundle will run in the browser.

[JustFly1984]

@Wojonatior If you want to switch build to webpack instead of tsdx - you are welcome to post a PR. I will publish new versions based on your PR. I myself used webpack from beginning, but somebody along the way decided that they need several ways to package and replaced webpack with tsdx. I personally had only headaches with tsdx, and now it is unmaintained. Please ping me in slack channel if I'm not responding here for long time.

[JustFly1984]

PS: we can get rid of storybook, I don't think it is used by somebody, and it is a headache to update.

[JustFly1984]

@Wojonatior I had released 2.3.0 today, build with rollup instead of tsdx. Please test with CSP and close an issue if it is resolved for you.

[JustFly1984]

should be fixed, if not ask to reopen

[Wojonatior]

Sorry I didn't get back to this quicker! I'll let you know if our issues is still present after this change. Thanks for your help with this.