Is the eval() function safe to use here?

Question

I'm learning DOM Scripting with JavaScript and thought it nice to make a simple calculator app, I found the logic easy enough to do but ran into a problem using parseInt to convert the string type arithmetic expression to number type arithmetic expression.

I ended up having to use the eval() function which worked fine for a basic calculator app but on further research I found out the eval() function is a security risk in most casese, I've used a regex expression to cleanse the result but don't know if this is safe enough.

Here is the code snippet I'm unsure is safe to be executed on the client browser.

const equals = document.getElementById("equals");

equals.addEventListener("click", (e) => {
    document.getElementById("result").innerText =  eval(document.getElementById("result").innerText).replace(/[^**-+/*\d]/g, '');                                      
});

NOTE: This code is deployed as a static site on Netlify.

Answer 1

You should definitely stop using eval().

Executing JavaScript instructions from a string opens up a huge security risk that makes it easy for would-be third-party attackers to inject potentially malicious code into your application without your knowledge or permission.

Another reason not to use eval(), in my view, is that some sources have already marked it as obsolete or deprecated and it is being blocked by default in some environments due to its security risks and slow performance. In other words, support for eval() is at issue and there is a push to possibly phase it out from future versions of Javascript. That means anything you've built that uses it has the potential to eventually stop working.

The good news is eval() has been on its way out for a quite while now so there are plenty of much better, much more secure ways to accomplish just about everything you'd use eval() for. In fact, the code snippet you shared doesn't need eval() at all.

The innerText property you are updating is directly accessible from within the DOM. While we're on the subject, avoid using the innerHTML property. It too poses security risks similar to eval().

This code here should address your concerns:

const equals = document.getElementById("equals");

equals.addEventListener("click", (e) => {
    let result = document.getElementById("result");
    result.innerText = result.innerText.replace(/[^**-+/*\d]/g, '');
    return true;
});

The only place in a calculator app I can think of where a developer might be tempted to use eval() would be to run it's actual calculations. It's sort of a cheat to just feed an entire mathematical expression to eval() rather than construct a proper parser. I suppose it works (for now) but it's a bad practice.

I built a little calculator app you are welcome to study that performs all the key operations one expects a calculator to do without touching eval(). Feel free to check it out: https://calc-work.webflow.io.

Hope you find this helpful. Cheers!