Use of Eval in bodymovin.js

[mincusc03]

On line 11211 of bodymovin.js (https://github.com/bodymovin/bodymovin/blob/master/build/player/bodymovin.js), an eval is used in the code

var fn = eval('[function(){' + val+';this.v = $bm_rt;}' + ']')[0];

I'd like to use the library, but we have a policy to not use code that includes evals. Is it possible to refactor this to avoid the use of the eval?

Thank you!

[bodymovin]

Expressions need 'eval' to run. if you're not relying on expressions and can use the svg renderer, I'd suggest that you try the bodymovin_light version that doesn't have that part of the code.

[koto]

Can you explain a bit why eval is required for expressions? Its usage makes the library essentially a no-go for applications that use Content Security Policy that bans eval by default, and allowing unsafe-eval exposes these applications to a significant XSS risk.

[bodymovin]

@koto expressions are basically javascript. I have no other way to support them if I want to keep the player as light as possible. If you have any suggestions, they are welcome :) But as I said, if you can't use eval, you can use a light version of the player that doesn't support expressions.

[rombrom]

@bodymovin We're encountering similar concerns. Might there be a possibility of using Function() instead of eval for parsing? Using Function() has both security and performance benefits over eval. If not, could you give an explanation why eval is chosen over Function? Thanks in advance! (And of course, lots of thanks for maintaining Lottie! It's awesome regardless.)

[bodymovin]

@rombrom unfortunately Function() loses context. And After Effects expressions rely on many available scoped declared variables that would be lost by using it.

[rombrom]

Figured it would be something related to context. Thanks a lot for the answer!

[talsafran]

Hi folks 👋

if you're not relying on expressions and can use the svg renderer, I'd suggest that you try the bodymovin_light version that doesn't have that part of the code.

Is this still correct? I'm noticing now that the SVG renderer also has some eval statements:

https://github.com/airbnb/lottie-web/blob/1d266d29b950cbfd9789d6d055cbdea606aa9e22/build/player/lottie_svg.js#L10028-L10033

Wondering if there are any updated workarounds so we don't have to use eval? We're fine with just the SVG renderer.

[bodymovin]

@talsafran hi, the svg renderer without expressions is the lottie_light version here: https://github.com/airbnb/lottie-web/blob/master/build/player/lottie_light.js

[jamiehaywood]

hi @bodymovin - is Lottie_Light exported from the NPM package?

[bodymovin]

@jamiehaywood you, you should be able to access it by traversing the path on your import https://github.com/airbnb/lottie-web/tree/master/build/player

[cbergen]

Replacing import lottie from "lottie-web"; with import lottie from "lottie-web/build/player/lottie_light"; and using renderer: "svg", worked for me.