Merge pull request github#12949 from asgerf/js/angular-native

JS: Add a few more DOM element sources

Author: asgerf

javascript/ql/lib/semmle/javascript/DOM.qll

@@ -421,6 +421,9 @@ module DOM {
     t.startInProp("target") and
     result = domEventSource()
     or
+    t.startInProp(DataFlow::PseudoProperties::arrayElement()) and
+    result = domElementCollection()
+    or
     exists(DataFlow::TypeTracker t2 | result = domValueRef(t2).track(t2, t))
   }
 

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

@@ -547,4 +547,10 @@ module Angular2 {
       )
     }
   }
+
+  private class DomValueSources extends DOM::DomValueSource::Range {
+    DomValueSources() {
+      this = API::Node::ofType("@angular/core", "ElementRef").getMember("nativeElement").asSource()
+    }
+  }
 }

javascript/ql/test/library-tests/DOM/Customizations.expected

@@ -3,6 +3,7 @@ test_documentRef
 | event-handler-receiver.js:1:1:1:8 | document |
 | event-handler-receiver.js:5:1:5:8 | document |
 | nameditems.js:1:1:1:8 | document |
+| querySelectorAll.js:2:5:2:12 | document |
 test_locationRef
 | customization.js:3:3:3:14 | doc.location |
 test_domValueRef
@@ -20,5 +21,8 @@ test_domValueRef
 | nameditems.js:1:1:1:23 | documen ... entById |
 | nameditems.js:1:1:1:30 | documen ... ('foo') |
 | nameditems.js:1:1:2:19 | documen ... em('x') |
+| querySelectorAll.js:2:5:2:29 | documen ... ctorAll |
+| querySelectorAll.js:2:5:2:36 | documen ... ('foo') |
+| querySelectorAll.js:2:46:2:48 | elm |
 | tst.js:49:3:49:8 | window |
 | tst.js:50:3:50:8 | window |

javascript/ql/test/library-tests/DOM/querySelectorAll.js

@@ -0,0 +1,5 @@
+(function() {
+    document.querySelectorAll('foo').forEach(elm => {
+        elm.innerHTML = 'hey';
+    });
+});

javascript/ql/test/library-tests/frameworks/Angular2/source.component.ts

@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Component,ElementRef } from "@angular/core";
 import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({
@@ -9,6 +9,7 @@ export class Source {
     taint: string;
     taintedArray: string[];
     safeArray: string[];
+    elementRef: ElementRef;
 
     constructor(private sanitizer: DomSanitizer) {
         this.taint = source();
@@ -18,5 +19,6 @@ export class Source {
 
     methodOnComponent(x) {
         this.sanitizer.bypassSecurityTrustHtml(x);
+        this.elementRef.nativeElement.innerHTML = x;
     }
 }

javascript/ql/test/library-tests/frameworks/Angular2/test.expected

@@ -24,13 +24,14 @@ pipeClassRef
 taintFlow
 | inline.component.ts:15:22:15:29 | source() | sink.component.ts:28:48:28:57 | this.sink7 |
 | inline.component.ts:15:22:15:29 | source() | sink.component.ts:30:48:30:57 | this.sink9 |
-| source.component.ts:14:22:14:29 | source() | TestPipe.ts:6:31:6:35 | value |
-| source.component.ts:14:22:14:29 | source() | sink.component.ts:22:48:22:57 | this.sink1 |
-| source.component.ts:14:22:14:29 | source() | sink.component.ts:25:48:25:57 | this.sink4 |
-| source.component.ts:14:22:14:29 | source() | sink.component.ts:26:48:26:57 | this.sink5 |
-| source.component.ts:14:22:14:29 | source() | sink.component.ts:27:48:27:57 | this.sink6 |
-| source.component.ts:14:22:14:29 | source() | sink.component.ts:29:48:29:57 | this.sink8 |
-| source.component.ts:14:22:14:29 | source() | source.component.ts:20:48:20:48 | x |
-| source.component.ts:15:33:15:40 | source() | sink.component.ts:22:48:22:57 | this.sink1 |
+| source.component.ts:15:22:15:29 | source() | TestPipe.ts:6:31:6:35 | value |
+| source.component.ts:15:22:15:29 | source() | sink.component.ts:22:48:22:57 | this.sink1 |
+| source.component.ts:15:22:15:29 | source() | sink.component.ts:25:48:25:57 | this.sink4 |
+| source.component.ts:15:22:15:29 | source() | sink.component.ts:26:48:26:57 | this.sink5 |
+| source.component.ts:15:22:15:29 | source() | sink.component.ts:27:48:27:57 | this.sink6 |
+| source.component.ts:15:22:15:29 | source() | sink.component.ts:29:48:29:57 | this.sink8 |
+| source.component.ts:15:22:15:29 | source() | source.component.ts:21:48:21:48 | x |
+| source.component.ts:15:22:15:29 | source() | source.component.ts:22:51:22:51 | x |
+| source.component.ts:16:33:16:40 | source() | sink.component.ts:22:48:22:57 | this.sink1 |
 testAttrSourceLocation
 | inline.component.ts:8:43:8:60 | [testAttr]=taint | inline.component.ts:8:55:8:59 | <toplevel> |