airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
MIT License
30.53k stars 2.87k forks source link

Use of Eval in bodymovin.js #289

Closed mincusc03 closed 7 years ago

mincusc03 commented 7 years ago

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 commented 7 years ago

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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

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

rombrom commented 5 years ago

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

talsafran commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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

bodymovin commented 4 years ago

@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 commented 1 year ago

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