JS: Use type info and type tracking in jQuery

Author: asger-semmle

javascript/ql/src/semmle/javascript/Extend.qll

@@ -47,7 +47,9 @@ private class ExtendCallWithFlag extends ExtendCall {
       name = "node.extend"
     )
     or
-    this = jquery().getAPropertyRead("extend").getACall()
+    // Match $.extend using the source of `$` only, as ExtendCall should not
+    // depend on type tracking.
+    this = JQuery::dollarSource().getAMemberCall("extend")
   }
 
   /**

javascript/ql/src/semmle/javascript/frameworks/jQuery.qll

@@ -7,50 +7,51 @@ import javascript
 /**
  * Gets a data flow node that may refer to the jQuery `$` function.
  */
-DataFlow::SourceNode jquery() {
-  // either a reference to a global variable `$` or `jQuery`
-  result = DataFlow::globalVarRef(any(string jq | jq = "$" or jq = "jQuery"))
-  or
-  // or imported from a module named `jquery`
-  result = DataFlow::moduleImport("jquery")
-}
+predicate jquery = JQuery::dollar/0;
 
 /**
+ * DEPRECATED. In most cases, `JQuery::Object` should be used instead.
+ * Alternatively, if used as a base class, and the intent is to extend the model of
+ * jQuery objects with more nodes, extend `JQuery::ObjectSource::Range` instead.
+ *
  * An expression that may refer to a jQuery object.
  *
  * Note that this class is an over-approximation: `nd instanceof JQueryObject`
  * may hold for nodes `nd` that cannot, in fact, refer to a jQuery object.
  */
-abstract class JQueryObject extends Expr { }
+deprecated class JQueryObject = JQueryObjectInternal;
+
+/**
+ * An internal version of `JQueryObject` that may be used to retain
+ * backwards compatibility without triggering a deprecation warning.
+ */
+abstract private class JQueryObjectInternal extends Expr { }
 
 /**
  * A jQuery object created from a jQuery method.
+ *
+ * This class is defined using the legacy API in order to retain the
+ * behavior of `JQueryObject`.
  */
-private class OrdinaryJQueryObject extends JQueryObject {
+private class OrdinaryJQueryObject extends JQueryObjectInternal {
   OrdinaryJQueryObject() {
-    exists(JQueryMethodCall jq |
-      this.flow().getALocalSource().asExpr() = jq and
+    exists(JQuery::MethodCall jq |
+      this.flow().getALocalSource() = jq and
       // `jQuery.val()` does _not_ return a jQuery object
       jq.getMethodName() != "val"
     )
   }
 }
 
 /**
+ * DEPRECATED. Use `JQuery::MethodCall` instead.
+ *
  * A (possibly chained) call to a jQuery method.
  */
-class JQueryMethodCall extends CallExpr {
+deprecated class JQueryMethodCall extends CallExpr {
   string name;
 
-  JQueryMethodCall() {
-    this = jquery().getACall().asExpr() and name = "$"
-    or
-    // initial call
-    this = jquery().getAMemberCall(name).asExpr()
-    or
-    // chained call
-    this.(MethodCallExpr).calls(any(JQueryObject jq), name)
-  }
+  JQueryMethodCall() { name = this.flow().(JQuery::MethodCall).getMethodName() }
 
   /**
    * Gets the name of the jQuery method this call invokes.
@@ -65,13 +66,7 @@ class JQueryMethodCall extends CallExpr {
    * `interpretsArgumentAsSelector` below overlap.
    */
   predicate interpretsArgumentAsHtml(Expr e) {
-    // some methods interpret all their arguments as (potential) HTML
-    JQuery::isMethodArgumentInterpretedAsHtml(name) and
-    e = getAnArgument()
-    or
-    // for `$, it's only the first one
-    name = "$" and
-    e = getArgument(0)
+    this.flow().(JQuery::MethodCall).interpretsArgumentAsHtml(e.flow())
   }
 
   /**
@@ -82,21 +77,15 @@ class JQueryMethodCall extends CallExpr {
    * `interpretsArgumentAsHtml` above overlap.
    */
   predicate interpretsArgumentAsSelector(Expr e) {
-    // some methods interpret all their arguments as (potential) selectors
-    JQuery::isMethodArgumentInterpretedAsSelector(name) and
-    e = getAnArgument()
-    or
-    // for `$, it's only the first one
-    name = "$" and
-    e = getArgument(0)
+    this.flow().(JQuery::MethodCall).interpretsArgumentAsSelector(e.flow())
   }
 }
 
 /**
  * A call to `jQuery.parseXML`.
  */
 private class JQueryParseXmlCall extends XML::ParserInvocation {
-  JQueryParseXmlCall() { this.(JQueryMethodCall).getMethodName() = "parseXML" }
+  JQueryParseXmlCall() { flow().(JQuery::MethodCall).getMethodName() = "parseXML" }
 
   override Expr getSourceArgument() { result = getArgument(0) }
 
@@ -249,13 +238,12 @@ private class JQueryAttr3Call extends JQueryAttributeDefinition, @callexpr {
  * For example, the call `$("<script/>").attr("src", mySource)` returns
  * the DOM element constructed by `$("<script/>")`.
  */
-private class JQueryChainedElement extends DOM::Element {
+private class JQueryChainedElement extends DOM::Element, InvokeExpr {
   DOM::Element inner;
 
   JQueryChainedElement() {
-    exists(JQueryMethodCall jqmc | this = jqmc |
-      jqmc.(MethodCallExpr).getReceiver() = inner and
-      this instanceof JQueryObject and
+    exists(JQuery::MethodCall call | this = call.asExpr() |
+      call.getReceiver().asExpr() = inner and
       defn = inner.getDefinition()
     )
   }
@@ -318,4 +306,133 @@ module JQuery {
     name = "wrapAll" or
     name = "wrapInner"
   }
+
+  module DollarSource {
+    /** A data flow node that may refer to the jQuery `$` function. */
+    abstract class Range extends DataFlow::Node { }
+
+    private class DefaultRange extends Range {
+      DefaultRange() {
+        // either a reference to a global variable `$` or `jQuery`
+        this = DataFlow::globalVarRef(any(string jq | jq = "$" or jq = "jQuery"))
+        or
+        // or imported from a module named `jquery`
+        this = DataFlow::moduleImport("jquery")
+        or
+        this.hasUnderlyingType("JQueryStatic")
+      }
+    }
+  }
+
+  /**
+   * Gets a data flow node that may refer to the jQuery `$` function.
+   */
+  DataFlow::SourceNode dollarSource() { result instanceof DollarSource::Range }
+
+  /** Gets a data flow node referring to the jQuery `$` function. */
+  private DataFlow::SourceNode dollar(DataFlow::TypeTracker t) {
+    t.start() and
+    result = dollarSource()
+    or
+    exists(DataFlow::TypeTracker t2 | result = dollar(t2).track(t2, t))
+  }
+
+  /** Gets a data flow node referring to the jQuery `$` function. */
+  DataFlow::SourceNode dollar() { result = dollar(DataFlow::TypeTracker::end()) }
+
+  /** Gets an invocation of the jQuery `$` function. */
+  DataFlow::CallNode dollarCall() { result = dollar().getACall() }
+
+  /** A call to the jQuery `$` function. */
+  class DollarCall extends DataFlow::CallNode {
+    DollarCall() { this = dollarCall() }
+  }
+
+  module ObjectSource {
+    /**
+     * A data flow node that should be considered a source of jQuery objects.
+     */
+    abstract class Range extends DataFlow::Node { }
+
+    private class DefaultRange extends Range {
+      DefaultRange() {
+        this.asExpr() instanceof JQueryObjectInternal
+        or
+        hasUnderlyingType("JQuery")
+        or
+        hasUnderlyingType("jQuery")
+      }
+    }
+  }
+
+  /** Gets a source of jQuery objects. */
+  private DataFlow::SourceNode objectSource() { result instanceof ObjectSource::Range }
+
+  /** Gets a data flow node referring to a jQuery object. */
+  private DataFlow::SourceNode objectRef(DataFlow::TypeTracker t) {
+    t.start() and
+    result = objectSource()
+    or
+    exists(DataFlow::TypeTracker t2 | result = objectRef(t2).track(t2, t))
+  }
+
+  /** Gets a data flow node referring to a jQuery object. */
+  DataFlow::SourceNode objectRef() { result = objectRef(DataFlow::TypeTracker::end()) }
+
+  /** A data flow node that refers to a jQuery object. */
+  class Object extends DataFlow::SourceNode {
+    Object() { this = objectRef() }
+  }
+
+  /** A call to a method on a jQuery object or the jQuery dollar function. */
+  class MethodCall extends DataFlow::CallNode {
+    string name;
+
+    MethodCall() {
+      this = dollarCall() and name = "$"
+      or
+      this = dollar().getAMemberCall(name)
+      or
+      this = objectRef().getAMethodCall(name)
+    }
+
+    /**
+     * Gets the name of the jQuery method this call invokes.
+     */
+    string getMethodName() { result = name }
+
+    /**
+     * Holds if `node` is an argument that this method may interpret as HTML.
+     *
+     * Note that some jQuery methods decide whether to interpret an argument
+     * as HTML based on its syntactic shape, so this predicate and
+     * `interpretsArgumentAsSelector` below overlap.
+     */
+    predicate interpretsArgumentAsHtml(DataFlow::Node node) {
+      // some methods interpret all their arguments as (potential) HTML
+      JQuery::isMethodArgumentInterpretedAsHtml(name) and
+      node = getAnArgument()
+      or
+      // for `$, it's only the first one
+      name = "$" and
+      node = getArgument(0)
+    }
+
+    /**
+     * Holds if `node` is an argument that this method may interpret as a selector.
+     *
+     * Note that some jQuery methods decide whether to interpret an argument
+     * as a selector based on its syntactic shape, so this predicate and
+     * `interpretsArgumentAsHtml` above overlap.
+     */
+    predicate interpretsArgumentAsSelector(DataFlow::Node node) {
+      // some methods interpret all their arguments as (potential) selectors
+      JQuery::isMethodArgumentInterpretedAsSelector(name) and
+      node = getAnArgument()
+      or
+      // for `$, it's only the first one
+      name = "$" and
+      node = getArgument(0)
+    }
+  }
 }

javascript/ql/test/library-tests/frameworks/jQuery/JQueryMethodCall.expected

@@ -1,3 +1,9 @@
+| tracking.js:7:5:7:24 | this.elm.html('foo') | html |
+| tracking.js:14:5:14:17 | e.html('foo') | html |
+| tracking.js:18:7:18:15 | $('#foo') | $ |
+| ts_global_types.ts:3:5:3:17 | e.html('foo') | html |
+| ts_global_types.ts:7:1:7:9 | $('#foo') | $ |
+| ts_import.ts:5:5:5:17 | e.html('foo') | html |
 | tst2.js:2:1:2:7 | jq("a") | $ |
 | tst.js:1:1:1:3 | $() | $ |
 | tst.js:2:1:2:8 | jQuery() | $ |

javascript/ql/test/library-tests/frameworks/jQuery/interpretsArgumentAsHtml.expected

@@ -1,3 +1,9 @@
+| tracking.js:7:5:7:24 | this.elm.html('foo') | tracking.js:7:19:7:23 | 'foo' |
+| tracking.js:14:5:14:17 | e.html('foo') | tracking.js:14:12:14:16 | 'foo' |
+| tracking.js:18:7:18:15 | $('#foo') | tracking.js:18:9:18:14 | '#foo' |
+| ts_global_types.ts:3:5:3:17 | e.html('foo') | ts_global_types.ts:3:12:3:16 | 'foo' |
+| ts_global_types.ts:7:1:7:9 | $('#foo') | ts_global_types.ts:7:3:7:8 | '#foo' |
+| ts_import.ts:5:5:5:17 | e.html('foo') | ts_import.ts:5:12:5:16 | 'foo' |
 | tst2.js:2:1:2:7 | jq("a") | tst2.js:2:4:2:6 | "a" |
 | tst.js:3:1:3:9 | $("<a/>") | tst.js:3:3:3:8 | "<a/>" |
 | tst.js:7:1:7:14 | $("<br>", doc) | tst.js:7:3:7:8 | "<br>" |

javascript/ql/test/library-tests/frameworks/jQuery/jquery.d.ts

@@ -0,0 +1,5 @@
+interface JQuery {}
+
+declare module 'jquery' {
+  export = JQuery;
+}

javascript/ql/test/library-tests/frameworks/jQuery/tracking.js

@@ -0,0 +1,18 @@
+class C {
+  constructor(elm) {
+    this.elm = elm;
+  }
+
+  doSomething() {
+    this.elm.html('foo');
+  }
+
+  /**
+   * @param {JQuery} e
+   */
+  doSomethingWithTypes(e) {
+    e.html('foo');
+  }
+}
+
+new C($('#foo'));

javascript/ql/test/library-tests/frameworks/jQuery/ts_global_types.ts

@@ -0,0 +1,7 @@
+class MyClass {
+  foo2(e: JQuery) {
+    e.html('foo');
+  }
+}
+
+$('#foo');

javascript/ql/test/library-tests/frameworks/jQuery/ts_import.ts

@@ -0,0 +1,7 @@
+import jQuery = require('jquery');
+
+class MyClass {
+  foo3(e: jQuery) {
+    e.html('foo');
+  }
+}

javascript/ql/test/library-tests/frameworks/jQuery/tsconfig.json

@@ -0,0 +1 @@
+{"include": ["."]}