JS: Support [(ngModel)]

Author: asgerf

javascript/extractor/src/com/semmle/js/extractor/HTMLExtractor.java

@@ -186,7 +186,7 @@ private boolean isAngularTemplateAttributeName(String name) {
 
   /** Attribute names that look valid in HTML or in one of the template languages we support, like Vue and Angular. */
   private static final Pattern VALID_ATTRIBUTE_NAME =
-      Pattern.compile("[*:@]?\\[?\\(?[\\w:_\\-.]+\\]?\\)?");
+      Pattern.compile("[*:@]?\\[?\\(?[\\w:_\\-.]+\\)?\\]?");
 
   /** List of HTML attributes whose value is interpreted as JavaScript. */
   private static final Pattern JS_ATTRIBUTE =

javascript/ql/lib/semmle/javascript/security/dataflow/XssThroughDomCustomizations.qll

@@ -249,4 +249,16 @@ module XssThroughDom {
       this = getSelectionCall(DataFlow::TypeTracker::end()).getAMethodCall("toString")
     }
   }
+
+  /**
+   * A source of DOM input originating from an Angular two-way data binding.
+   */
+  private class AngularNgModelSource extends Source {
+    AngularNgModelSource() {
+      exists(Angular2::ComponentClass component, string fieldName |
+        fieldName = component.getATemplateElement().getAttributeByName("[(ngModel)]").getValue() and
+        this = component.getFieldInputNode(fieldName)
+      )
+    }
+  }
 }

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

@@ -1,4 +1,6 @@
 nodes
+| angular.ts:12:5:12:23 | field: string = ""; |
+| angular.ts:12:5:12:23 | field: string = ""; |
 | angular.ts:15:24:15:41 | event.target.value |
 | angular.ts:15:24:15:41 | event.target.value |
 | angular.ts:15:24:15:41 | event.target.value |
@@ -9,6 +11,8 @@ nodes
 | angular.ts:23:24:23:33 | form.value |
 | angular.ts:23:24:23:37 | form.value.foo |
 | angular.ts:23:24:23:37 | form.value.foo |
+| angular.ts:27:24:27:33 | this.field |
+| angular.ts:27:24:27:33 | this.field |
 | forms.js:8:23:8:28 | values |
 | forms.js:8:23:8:28 | values |
 | forms.js:9:31:9:36 | values |
@@ -175,6 +179,10 @@ nodes
 | xss-through-dom.js:159:34:159:52 | $("textarea").val() |
 | xss-through-dom.js:159:34:159:52 | $("textarea").val() |
 edges
+| angular.ts:12:5:12:23 | field: string = ""; | angular.ts:27:24:27:33 | this.field |
+| angular.ts:12:5:12:23 | field: string = ""; | angular.ts:27:24:27:33 | this.field |
+| angular.ts:12:5:12:23 | field: string = ""; | angular.ts:27:24:27:33 | this.field |
+| angular.ts:12:5:12:23 | field: string = ""; | angular.ts:27:24:27:33 | this.field |
 | angular.ts:15:24:15:41 | event.target.value | angular.ts:15:24:15:41 | event.target.value |
 | angular.ts:19:24:19:35 | target.value | angular.ts:19:24:19:35 | target.value |
 | angular.ts:23:24:23:33 | form.value | angular.ts:23:24:23:37 | form.value.foo |
@@ -292,6 +300,7 @@ edges
 | angular.ts:15:24:15:41 | event.target.value | angular.ts:15:24:15:41 | event.target.value | angular.ts:15:24:15:41 | event.target.value | $@ is reinterpreted as HTML without escaping meta-characters. | angular.ts:15:24:15:41 | event.target.value | DOM text |
 | angular.ts:19:24:19:35 | target.value | angular.ts:19:24:19:35 | target.value | angular.ts:19:24:19:35 | target.value | $@ is reinterpreted as HTML without escaping meta-characters. | angular.ts:19:24:19:35 | target.value | DOM text |
 | angular.ts:23:24:23:37 | form.value.foo | angular.ts:23:24:23:33 | form.value | angular.ts:23:24:23:37 | form.value.foo | $@ is reinterpreted as HTML without escaping meta-characters. | angular.ts:23:24:23:33 | form.value | DOM text |
+| angular.ts:27:24:27:33 | this.field | angular.ts:12:5:12:23 | field: string = ""; | angular.ts:27:24:27:33 | this.field | $@ is reinterpreted as HTML without escaping meta-characters. | angular.ts:12:5:12:23 | field: string = ""; | 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

@@ -24,6 +24,6 @@ export class Foo {
     }
 
     useField() {
-        document.write(this.field); // NOT OK [INCONSISTENCY]
+        document.write(this.field); // NOT OK
     }
 }