DEV Community

JavaScript Magic Tricks: Mutable Eval

WangLiwen on October 07, 2023

In JavaScript development, Eval is often used in dark areas to execute some code that is not intended to be seen by others. However, Eval has dist...
Read full post
Collapse
 
lionelrowe profile image
lionel-rowe • • Edited
  1. eval() equals to window.eval().

That's only half-true. For example, JS itself will tell you it's true:

eval === window.eval // true
Enter fullscreen mode Exit fullscreen mode

However, calling eval directly and calling window.eval don't always give identical results. This is due to the special semantics of direct eval:

Although the expression eval(x) looks like a normal function call, it actually takes on special behavior in JavaScript. Using eval in this way means that the evaluated code stored in x can reference any variable in any containing scope by name. For example, the code let y = 123; return eval('y') will return 123.

Here's a more complete example:

{
    const x = true

    const codeStr = `
        try {
            console.log(x)
        } catch {
            console.log(false)
        }
    `

    eval(codeStr)        // logs `true`
    window.eval(codeStr) // logs `false`
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
wangliwen profile image
WangLiwen •

you are right,professional enough.

Collapse
 
bwca profile image
Volodymyr Yepishev •

Got to love how JavaScript can take forms which look more like cryptic magic spells than the actual code 🙃

Collapse
 
wangliwen profile image
WangLiwen •

JavaScript is cool,my favorite programming language.

Collapse
 
joelbonetr profile image
JoelBonetR 🥇 •

So true 😂

Collapse
 
efpage profile image
Eckehard •

you can prevent the accidential use of eval by overloading this function:

        window.eval = function(){}
        console.log(eval("1+2+3"))
Enter fullscreen mode Exit fullscreen mode
Collapse
 
wangliwen profile image
WangLiwen •

it's a good idea!

Collapse
 
tailcall profile image
Maria Zaitseva •

The lesson to learn here would be: anything could be an eval, cut and paste code carefully.

Collapse
 
wangliwen profile image
WangLiwen •

YES!

Collapse
 
manchicken profile image
Mike Stemle •

Eval is great fun, just be careful to never eval on user-supplied strings for security reasons. Even if you sanitize it, there are still likely holes. One of the safe-eval modules on NPM would be helpful if you need to do such a thing.

Collapse
 
wadecodez profile image
Wade Zimmerman •

This is very true, even if you instantiate functions instead of eval, everything is a prototype with access to the Function constructor. Here is the most common occurrence I see.

<div> We found { count } hits for { search } </div>
Enter fullscreen mode Exit fullscreen mode

then a user searches for something like this

window.constructor.__proto__.constructor('alert("hello JS framework")')()
Enter fullscreen mode Exit fullscreen mode
Collapse
 
wadecodez profile image
Wade Zimmerman •

eval is also a code smell. devs use it in frameworks and libraries to be clever, but there is no reason to use it. if you're making something to handle user input, you're better off writing a customer parser to handle your specific use case.

Collapse
 
pavlopaska profile image
Pavlo Paska •

It is still not safe. You can use jspython interpreter (jspython.dev) for safe evaluation within JavaScript (browser or NodeJS)

Collapse
 
johnthemilesi profile image
Joao Milesi •

Nice