Transloco: MessageFormat transpiler throws 'unsafe-eval' when activating CSP

[ftischler]

After activating CSP for my app I get the following error:

ERROR 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' 'unsafe-inline'".

    at new Function (<anonymous>)
    at t.value (main-es2015.cb51f3636f796a68c875.js:formatted:3091)
    at transpile (main-es2015.cb51f3636f796a68c875.js:formatted:63482)
    at translate (main-es2015.cb51f3636f796a68c875.js:formatted:34366)
    at t.updateValue (main-es2015.cb51f3636f796a68c875.js:formatted:34679)
    at u._next (main-es2015.cb51f3636f796a68c875.js:formatted:34670)
    at u.__tryOrUnsub (main-es2015.cb51f3636f796a68c875.js:formatted:10670)
    at u.next (main-es2015.cb51f3636f796a68c875.js:formatted:10633)
    at l._next (main-es2015.cb51f3636f796a68c875.js:formatted:10593)
    at l.next (main-es2015.cb51f3636f796a68c875.js:formatted:10578)

Is it really necessary for transloco to use eval in production bundles? Or is there something wrong with the configuration of my app?

[k3nsei]

@ftischler I scaned source code on github and npm and I cannot find any new Function usage. Can you point file and version where you found those?

[ftischler]

@k3nsei messageformat.transpiler.ts imports the node_module messageformat which uses eval here at line 197 and many others as well.

Can I do something to get rid of this? I would like to remove 'unsafe-eval' from my CSP as quick as possible. Thank you 😊

[ftischler]

Here the error with SourceMaps enabled:

ERROR 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' 'unsafe-inline'".

    at new Function (<anonymous>)
    at t.value (messageformat.js:1)
    at transpile (ngneat-transloco-messageformat.js:70)
    at translate (ngneat-transloco.js:940)
    at t.updateValue (ngneat-transloco.js:1996)
    at u._next (ngneat-transloco.js:1978)
    at u.__tryOrUnsub (Subscriber.js:183)
    at u.next (Subscriber.js:122)
    at l._next (Subscriber.js:72)
    at l.next (Subscriber.js:49)
Zn @ core.js:6210

[k3nsei]

@ftischler so the best option is to create an issue in messageformat github repository and link it here. Also it worth to report package on its npm page to mark those versions as risky.

Edited:
There is already such an issue https://github.com/messageformat/messageformat/issues/180 created. They are recommending usage of https://formatjs.io/docs/intl-messageformat/ as a replacment.

[ftischler]

@k3nsei so does it need to be replaced in transloco or is there a possibility for me to change the configuration of my app to avoid the usage of it?

[shaharkazaz]

@k3nsei thanks for referencing the issues. I'll add a note about it in the docs so people are aware.

@ftischler You don't have to use the message format transpiler if you are not actually using it.
If you do need these abilities you can create a custom transpiler based on formatjs's messageformat.
I'm not sure if there are any syntax differences between the libs so replacing them under the hood is something that needs further investigation.
If you do end up creating the transpiler we can maybe think of a way to integrate it and offer a way to choose which one to consume.

[Coly010]

Can I also just add that eval in and of itself is not something to just replace when you see it, because it does have use cases.

It _becomes_ a problem when it's evaluating text from a source outside the developer's control, such as User Generated Content.

However, if the developer controls what it is evaluating it's a much reduced risk.

To avoid CSP issues though it's definitely worth investigating intl-messageformat if it does not use eval.

[ftischler]

@k3nsei @shaharkazaz @Coly010 thanks a lot for your help. I really appreciate your work!

I forked transloco and played a little bit arround with intl-messageformat here

Some things worked, but 2 tests still broke at the end.

On my way I saw another problem: transloco has a dependency on TypeScript v3 (I Think because of Angular v7) while intl-messageformat depends on TypeScript v4. Maybe this is the reason why I got the error ERROR in ../../../node_modules/intl-messageformat/src/core.d.ts(28,16): error TS1086: An accessor cannot be declared in an ambient context. when running the tests.

Nevertheless I hope my investigations can help a litte bit.

Just like @Coly010 wrote, eval should not be a huge security risk for our app here. But removing unsafe-eval from the CSP would safe me some time in discussions with our information security officers 😉

[shaharkazaz]

@ftischler Thanks for the update, and thanks @k3nsei @Coly010 for taking part in this discussion.
Transloco will support TS 4 in the next major version (v3) that will include mostly infra upgrades, but I'm sure they have a previous version that's compatible. (if you still wish to implement it instead of removing the unsafe-eval)
You are more than welcome to restart this discussion if you wish to integrate an intl-messageformat transpiler as an alternative in transloco.

Closing this, I'll update the docs with a note regarding the messageformat transpiler.