Merge pull request #3 from adrienpessu/adrienpessu-vue-toref-computed-tests

Add Vue toRef value-flow and computed object-overload tests

Author: adrienpessu

javascript/ql/lib/ext/vue.model.yml

@@ -0,0 +1,9 @@
+extensions:
+  - addsTo:
+      pack: codeql/javascript-all
+      extensible: summaryModel
+    data:
+      # `computed(() => ...)` — function overload: the getter's return value flows to `.value`.
+      - ["vue", "Member[computed]", "Argument[0].ReturnValue", "ReturnValue.Member[value]", "value"]
+      # `computed({ get() { ... } })` — object overload: the `get` getter's return value flows to `.value`.
+      - ["vue", "Member[computed]", "Argument[0].Member[get].ReturnValue", "ReturnValue.Member[value]", "value"]

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

@@ -35,36 +35,33 @@ module Vue {
     result = any(GlobalVueEntryPoint e).getANode()
   }
 
-  /** Models data flow through Vue Composition API helpers. */
+  /**
+   * Models data flow through Vue Composition API helpers.
+   *
+   * Note that `computed` is not modeled here but in the `vue.model.yml` data
+   * extension, because its object overload (`computed({ get() { ... } })`)
+   * requires callback flow synthesis that data extensions support but a
+   * hand-written `SummarizedCallable` does not.
+   */
   overlay[local?]
   private class VueCompositionApiSummary extends DataFlow::SummarizedCallable::Range {
     string name;
 
     VueCompositionApiSummary() {
-      name = ["ref", "shallowRef", "toRef", "reactive", "computed"] and
+      name = ["ref", "shallowRef", "toRef", "reactive"] and
       this = "vue." + name
     }
 
     override predicate propagatesFlow(string input, string output, boolean preservesValue) {
-      name = ["ref", "shallowRef"] and
+      name = ["ref", "shallowRef", "toRef"] and
       input = "Argument[0]" and
       output = "ReturnValue.Member[value]" and
       preservesValue = true
       or
-      name = "toRef" and
-      input = "Argument[0]" and
-      output = "ReturnValue.Member[value]" and
-      preservesValue = false
-      or
       name = "reactive" and
       input = "Argument[0]" and
       output = "ReturnValue" and
       preservesValue = false
-      or
-      name = "computed" and
-      input = "Argument[0].ReturnValue" and
-      output = "ReturnValue.Member[value]" and
-      preservesValue = true
     }
 
     override DataFlow::InvokeNode getACall() {

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

@@ -251,10 +251,13 @@ threatModelSource
 compositionApiDataFlow
 | tst.js:119:14:119:26 | source("ref") | tst.js:119:6:119:33 | Vue.ref ... ).value |
 | tst.js:120:21:120:40 | source("shallowRef") | tst.js:120:6:120:47 | Vue.sha ... ).value |
+| tst.js:121:16:121:30 | source("toRef") | tst.js:121:6:121:37 | Vue.toR ... ).value |
 | tst.js:123:25:123:42 | source("computed") | tst.js:123:6:123:49 | Vue.com ... ).value |
+| tst.js:124:36:124:59 | source( ... bject") | tst.js:124:6:124:82 | Vue.com ... ).value |
 compositionApiTaintFlow
 | tst.js:119:14:119:26 | source("ref") | tst.js:119:6:119:33 | Vue.ref ... ).value |
 | tst.js:120:21:120:40 | source("shallowRef") | tst.js:120:6:120:47 | Vue.sha ... ).value |
 | tst.js:121:16:121:30 | source("toRef") | tst.js:121:6:121:37 | Vue.toR ... ).value |
 | tst.js:122:19:122:36 | source("reactive") | tst.js:122:6:122:37 | Vue.rea ... tive")) |
 | tst.js:123:25:123:42 | source("computed") | tst.js:123:6:123:49 | Vue.com ... ).value |
+| tst.js:124:36:124:59 | source( ... bject") | tst.js:124:6:124:82 | Vue.com ... ).value |

javascript/ql/test/library-tests/frameworks/Vue/tst.js

@@ -121,3 +121,4 @@ sink(Vue.shallowRef(source("shallowRef")).value);
 sink(Vue.toRef(source("toRef")).value);
 sink(Vue.reactive(source("reactive")));
 sink(Vue.computed(() => source("computed")).value);
+sink(Vue.computed({ get() { return source("computedObject"); }, set(v) {} }).value);