CodeQL documentation
CodeQL resources

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

  • © GitHub, Inc.
  • Terms
  • Privacy