JS: Add DOM event sources in Angular2 model

Author: asgerf

javascript/ql/lib/semmle/javascript/frameworks/Angular2.qll

@@ -554,4 +554,25 @@ module Angular2 {
       this = API::Node::ofType("@angular/core", "ElementRef").getMember("nativeElement").asSource()
     }
   }
+
+  /**
+   * A source of DOM events originating from the `$event` variable in an event handler installed in an Angular template.
+   */
+  private class DomEventSources extends DOM::DomEventSource::Range {
+    DomEventSources() {
+      exists(HTML::Element elm, string attributeName |
+        elm = any(ComponentClass cls).getATemplateElement() and
+        // Ignore instantiations of known element (mainly focus on native DOM elements)
+        not elm = any(ComponentClass cls).getATemplateInstantiation() and
+        not elm.getName().matches("ng-%") and
+        this =
+          elm.getAttributeByName(attributeName)
+              .getCodeInAttribute()
+              .(TemplateTopLevel)
+              .getAVariableUse("$event") and
+        attributeName.matches("(%)") and // event handler attribute
+        not attributeName.matches("(ng%)") // exclude NG events which aren't necessarily DOM events
+      )
+    }
+  }
 }

javascript/ql/test/query-tests/Security/CWE-079/XssThroughDom/XssThroughDom.expected

@@ -42,6 +42,8 @@ edges
 | xss-through-dom.js:154:25:154:27 | msg | xss-through-dom.js:155:27:155:29 | msg | provenance |  |
 | xss-through-dom.js:159:34:159:52 | $("textarea").val() | xss-through-dom.js:154:25:154:27 | msg | provenance |  |
 nodes
+| angular.ts:11:24:11:41 | event.target.value | semmle.label | event.target.value |
+| angular.ts:15:24:15:35 | target.value | semmle.label | target.value |
 | forms.js:8:23:8:28 | values | semmle.label | values |
 | forms.js:9:31:9:36 | values | semmle.label | values |
 | forms.js:9:31:9:40 | values.foo | semmle.label | values.foo |
@@ -124,6 +126,8 @@ nodes
 | xss-through-dom.js:159:34:159:52 | $("textarea").val() | semmle.label | $("textarea").val() |
 subpaths
 #select
+| angular.ts:11:24:11:41 | event.target.value | angular.ts:11:24:11:41 | event.target.value | angular.ts:11:24:11:41 | event.target.value | $@ is reinterpreted as HTML without escaping meta-characters. | angular.ts:11:24:11:41 | event.target.value | DOM text |
+| angular.ts:15:24:15:35 | target.value | angular.ts:15:24:15:35 | target.value | angular.ts:15:24:15:35 | target.value | $@ is reinterpreted as HTML without escaping meta-characters. | angular.ts:15:24:15:35 | target.value | DOM text |
 | forms.js:9:31:9:40 | values.foo | forms.js:8:23:8:28 | values | forms.js:9:31:9:40 | values.foo | $@ is reinterpreted as HTML without escaping meta-characters. | forms.js:8:23:8:28 | values | DOM text |
 | forms.js:12:31:12:40 | values.bar | forms.js:11:24:11:29 | values | forms.js:12:31:12:40 | values.bar | $@ is reinterpreted as HTML without escaping meta-characters. | forms.js:11:24:11:29 | values | DOM text |
 | forms.js:25:23:25:34 | values.email | forms.js:24:15:24:20 | values | forms.js:25:23:25:34 | values.email | $@ is reinterpreted as HTML without escaping meta-characters. | forms.js:24:15:24:20 | values | DOM text |

javascript/ql/test/query-tests/Security/CWE-079/XssThroughDom/angular.ts

@@ -8,10 +8,10 @@ import { Component } from "@angular/core";
 })
 export class Foo {
     setInput1(event) {
-        document.write(event.target.value); // NOT OK [INCONSISTENCY]
+        document.write(event.target.value); // NOT OK
     }
 
     setInput2(target) {
-        document.write(target.value); // NOT OK [INCONSISTENCY]
+        document.write(target.value); // NOT OK
     }
 }