Double compilation — CodeQL query help documentation
CodeQL docs
Double compilation
ID: js/angular/double-compilation
Kind: problem
Security severity: 8.8
Severity: warning
Precision: very-high
Tags:
- reliability
- frameworks/angularjs
- security
- external/cwe/cwe-1176
Query suites:
- javascript-code-scanning.qls
- javascript-security-extended.qls
- javascript-security-and-quality.qls
Click to see the query in the CodeQL repository
The AngularJS compiler processes (parts of) the DOM, determining which directives match which DOM elements, and then applies the directives to the elements. Each DOM element should only be compiled once, otherwise unexpected behavior may result.
Recommendation
Only compile new DOM elements.
Example
The following example (adapted from the AngularJS developer guide) shows a directive that adds a tooltip to a DOM element, and then compiles the entire element to apply nested directives.
angular.module('myapp')
.directive('addToolTip', function($compile) {
return {
link: function(scope, element, attrs) {
var tooltip = angular.element('<span ng-show="showToolTip">A tooltip</span>');
tooltip.on('mouseenter mouseleave', function() {
scope.$apply('showToolTip = !showToolTip');
});
element.append(tooltip);
$compile(element)(scope); // NOT OK
}
};
});
This is problematic, since it will recompile all of element, including parts that have already been compiled.
Instead, only the new element should be compiled:
angular.module('myapp')
.directive('addToolTip', function($compile) {
return {
link: function(scope, element, attrs) {
var tooltip = angular.element('<span ng-show="showToolTip">A tooltip</span>');
tooltip.on('mouseenter mouseleave', function() {
scope.$apply('showToolTip = !showToolTip');
});
element.append(tooltip);
$compile(tooltip)(scope); // OK
}
};
});
References