$eval() in AngularJS is used to evaluate expressions within the current scope. However, if not handled properly, it can introduce severe security risks, including code injection attacks. Let’s explore why $eval() is dangerous and best practices to avoid security vulnerabilities.
1. Understanding the Risks of $eval()
$eval() executes expressions in the current scope. If user input is passed to $eval() without proper validation, an attacker can inject and execute arbitrary JavaScript code.
Example of an Unsafe Implementation
$scope.userInput = "alert('Hacked!')";
$scope.$eval($scope.userInput); // Executes alert('Hacked!')
If an attacker inputs malicious JavaScript, it will be executed, leading to XSS attacks or remote code execution.
2. Best Practices to Avoid $eval() Risks
A. Avoid Using $eval() for User Input
Never pass raw user input to $eval(). Instead, handle expressions using safe alternatives.
Insecure Code
$scope.$eval(userInput); // Direct execution - Dangerous!
Secure Alternative
$scope.safeExpression = function(expression) {
try {
return new Function('return ' + expression)(); // Still risky, but controlled
} catch (e) {
return null;
}
};
B. Use AngularJS Data Binding Instead of $eval()
Instead of manually evaluating expressions, leverage AngularJS’s built-in data binding.
Secure Code
<p>{{ userInput }}</p> <!-- Automatically escapes malicious content -->
This approach ensures that user input is sanitized and safely rendered in the DOM.
C. Restrict User Input with Input Validation
Use validation techniques to filter and sanitize user input before processing it.
Example
$scope.validateExpression = function(input) {
var allowedCharacters = /^[a-zA-Z0-9\s]*$/; // Allow only letters, numbers, and spaces
return allowedCharacters.test(input);
};
Ensure that only safe expressions are executed.
D. Use $parse() Instead of $eval()
AngularJS provides $parse() for evaluating expressions safely. Unlike $eval(), $parse() does not execute arbitrary code.
Example of Using $parse() Securely
app.controller('MainCtrl', function($scope, $parse) {
$scope.safeEval = function(expression) {
var parsedExpression = $parse(expression);
return parsedExpression($scope); // Executes safely within the scope
};
});
This ensures that only AngularJS expressions are evaluated, not raw JavaScript.
E. Disable debugInfoEnabled in Production
Disabling debug info makes it harder for attackers to manipulate AngularJS expressions.
Secure Configuration
app.config(['$compileProvider', function($compileProvider) {
$compileProvider.debugInfoEnabled(false);
}]);