Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MessageFormat transpiler throws 'unsafe-eval' when activating CSP #364

Closed
ftischler opened this issue Oct 22, 2020 · 9 comments · May be fixed by #649
Closed

MessageFormat transpiler throws 'unsafe-eval' when activating CSP #364

ftischler opened this issue Oct 22, 2020 · 9 comments · May be fixed by #649

Comments

@ftischler
Copy link

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
Copy link

k3nsei commented Oct 23, 2020

@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
Copy link
Author

@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
Copy link
Author

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
Copy link

k3nsei commented Oct 30, 2020

@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 messageformat/messageformat#180 created. They are recommending usage of https://formatjs.io/docs/intl-messageformat/ as a replacment.

@ftischler
Copy link
Author

ftischler commented Oct 31, 2020

@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
Copy link
Collaborator

@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
Copy link
Contributor

Coly010 commented Oct 31, 2020

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.

@shaharkazaz shaharkazaz changed the title Why is transloco using eval? MessageFormat transpiler throws 'unsafe-eval' when activating CSP Oct 31, 2020
@ftischler
Copy link
Author

ftischler commented Oct 31, 2020

@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
Copy link
Collaborator

@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.

f-aubert pushed a commit to f-aubert/transloco that referenced this issue Apr 25, 2023
Adding an alternative messageformat transpiler based on formatjs/intlmessageformat

white_check_mark Closes: jsverse#364

Signed-off-by: isc-auf <frederic.aubert@isc-ejpd.admin.ch>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants