javascript.angular.security.detect-angular-element-methods.detect-angular-element-methods

profile photo of semgrepsemgrep
Author
408
Download Count*
LGPL Commons Clause
License

Use of angular.element can lead to XSS if user-input is treated as part of the HTML element within $SINK. It is recommended to contextually output encode user-input, before inserting into $SINK. If the HTML needs to be preserved it is recommended to sanitize the input using $sce.getTrustedHTML or $sanitize.

Run Locally

Run in CI

Semgrep CI docs

Defintion

Edit RuleView Source
Open in Playground 
rules:
  - id: detect-angular-element-methods
    message: Use of angular.element can lead to XSS if user-input is treated as part
      of the HTML element within `$SINK`. It is recommended to contextually
      output encode user-input, before inserting into `$SINK`. If the HTML needs
      to be preserved it is recommended to sanitize the input using
      $sce.getTrustedHTML or $sanitize.
    metadata:
      confidence: LOW
      references:
        - https://docs.angularjs.org/api/ng/function/angular.element
        - https://owasp.org/www-chapter-london/assets/slides/OWASPLondon20170727_AngularJS.pdf
      category: security
      cwe:
        - "CWE-79: Improper Neutralization of Input During Web Page Generation
          ('Cross-site Scripting')"
      technology:
        - angularjs
      owasp:
        - A07:2017 - Cross-Site Scripting (XSS)
        - A03:2021 - Injection
      cwe2022-top25: true
      cwe2021-top25: true
      subcategory:
        - vuln
      likelihood: LOW
      impact: MEDIUM
      license: Commons Clause License Condition v1.0[LGPL-2.1-only]
      vulnerability_class:
        - Cross-Site-Scripting (XSS)
    languages:
      - javascript
      - typescript
    severity: INFO
    mode: taint
    pattern-sources:
      - patterns:
          - pattern-either:
              - patterns:
                  - pattern-inside: |
                      function(..., $SCOPE, ...) { ... }
                  - focus-metavariable: $SCOPE
                  - metavariable-regex:
                      metavariable: $SCOPE
                      regex: ^\$scope$
              - pattern: $rootScope
              - pattern: $injector.get('$rootScope')
              - pattern: $injector.get('$scope')
    pattern-sinks:
      - patterns:
          - pattern-either:
              - pattern-inside: |
                  angular.element(...). ... .$SINK($QUERY)
              - pattern-inside: |
                  $ANGULAR = angular.element(...)
                  ...
                  $ANGULAR. ... .$SINK($QUERY)
          - metavariable-regex:
              metavariable: $SINK
              regex: ^(after|append|html|prepend|replaceWith|wrap)$
          - focus-metavariable: $QUERY
    pattern-sanitizers:
      - patterns:
          - pattern-either:
              - pattern: $sce.getTrustedHtml(...)
              - pattern: $sanitize(...)
              - pattern: DOMPurify.sanitize(...)

Examples

detect-angular-element-methods.js

var app = angular.module('MyApp', []);
app.controller('myCtrl', function($scope,$sanitize) {
    $rootScope.foo = getData();
    $scope.foo = getData();
    // ok: detect-angular-element-methods
    angular.element('div').html('hi')
    // We're telling Semgrep that *every* occurrence of $rootScope is tainted,
    // we need to write the rule in a different way!
    // todook: detect-angular-element-methods
    angular.element('div').html($rootScope.foo)
    // ok: detect-angular-element-methods
    angular.element('div').html($scope.foo)
    // ruleid: detect-angular-element-methods
    angular.element('div').html($rootScope)
    // ruleid: detect-angular-element-methods
    angular.element('div').html($scope)
});