JS: Add test and fix for contextType

Author: asgerf

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

@@ -650,9 +650,12 @@ private DataFlow::Node getAContextInput(DataFlow::CallNode createContext) {
  * ```
  */
 pragma[nomagic]
-private DataFlow::CallNode getAContextOutput(DataFlow::CallNode createContext) {
-  result = react().getAMemberCall("useContext") and
-  getAContextRef(createContext).flowsTo(result.getArgument(0))
+private DataFlow::SourceNode getAContextOutput(DataFlow::CallNode createContext) {
+  exists(DataFlow::CallNode call |
+    call = react().getAMemberCall("useContext") and
+    getAContextRef(createContext).flowsTo(call.getArgument(0)) and
+    result = call
+  )
   or
   exists(DataFlow::ClassNode cls |
     getAContextRef(createContext).flowsTo(cls.getAPropertyWrite("contextType").getRhs()) and

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

@@ -147,6 +147,9 @@ nodes
 | react-use-context.js:10:22:10:32 | window.name |
 | react-use-context.js:10:22:10:32 | window.name |
 | react-use-context.js:10:22:10:32 | window.name |
+| react-use-context.js:16:26:16:36 | window.name |
+| react-use-context.js:16:26:16:36 | window.name |
+| react-use-context.js:16:26:16:36 | window.name |
 | react-use-state.js:4:9:4:49 | state |
 | react-use-state.js:4:10:4:14 | state |
 | react-use-state.js:4:38:4:48 | window.name |
@@ -711,6 +714,7 @@ edges
 | react-native.js:7:17:7:33 | req.param("code") | react-native.js:7:7:7:33 | tainted |
 | react-native.js:7:17:7:33 | req.param("code") | react-native.js:7:7:7:33 | tainted |
 | react-use-context.js:10:22:10:32 | window.name | react-use-context.js:10:22:10:32 | window.name |
+| react-use-context.js:16:26:16:36 | window.name | react-use-context.js:16:26:16:36 | window.name |
 | react-use-state.js:4:9:4:49 | state | react-use-state.js:5:51:5:55 | state |
 | react-use-state.js:4:9:4:49 | state | react-use-state.js:5:51:5:55 | state |
 | react-use-state.js:4:10:4:14 | state | react-use-state.js:4:9:4:49 | state |
@@ -1129,6 +1133,7 @@ edges
 | react-native.js:8:18:8:24 | tainted | react-native.js:7:17:7:33 | req.param("code") | react-native.js:8:18:8:24 | tainted | Cross-site scripting vulnerability due to $@. | react-native.js:7:17:7:33 | req.param("code") | user-provided value |
 | react-native.js:9:27:9:33 | tainted | react-native.js:7:17:7:33 | req.param("code") | react-native.js:9:27:9:33 | tainted | Cross-site scripting vulnerability due to $@. | react-native.js:7:17:7:33 | req.param("code") | user-provided value |
 | react-use-context.js:10:22:10:32 | window.name | react-use-context.js:10:22:10:32 | window.name | react-use-context.js:10:22:10:32 | window.name | Cross-site scripting vulnerability due to $@. | react-use-context.js:10:22:10:32 | window.name | user-provided value |
+| react-use-context.js:16:26:16:36 | window.name | react-use-context.js:16:26:16:36 | window.name | react-use-context.js:16:26:16:36 | window.name | Cross-site scripting vulnerability due to $@. | react-use-context.js:16:26:16:36 | window.name | user-provided value |
 | react-use-state.js:5:51:5:55 | state | react-use-state.js:4:38:4:48 | window.name | react-use-state.js:5:51:5:55 | state | Cross-site scripting vulnerability due to $@. | react-use-state.js:4:38:4:48 | window.name | user-provided value |
 | react-use-state.js:11:51:11:55 | state | react-use-state.js:10:14:10:24 | window.name | react-use-state.js:11:51:11:55 | state | Cross-site scripting vulnerability due to $@. | react-use-state.js:10:14:10:24 | window.name | user-provided value |
 | react-use-state.js:17:51:17:55 | state | react-use-state.js:16:20:16:30 | window.name | react-use-state.js:17:51:17:55 | state | Cross-site scripting vulnerability due to $@. | react-use-state.js:16:20:16:30 | window.name | user-provided value |

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

@@ -147,6 +147,9 @@ nodes
 | react-use-context.js:10:22:10:32 | window.name |
 | react-use-context.js:10:22:10:32 | window.name |
 | react-use-context.js:10:22:10:32 | window.name |
+| react-use-context.js:16:26:16:36 | window.name |
+| react-use-context.js:16:26:16:36 | window.name |
+| react-use-context.js:16:26:16:36 | window.name |
 | react-use-state.js:4:9:4:49 | state |
 | react-use-state.js:4:10:4:14 | state |
 | react-use-state.js:4:38:4:48 | window.name |
@@ -715,6 +718,7 @@ edges
 | react-native.js:7:17:7:33 | req.param("code") | react-native.js:7:7:7:33 | tainted |
 | react-native.js:7:17:7:33 | req.param("code") | react-native.js:7:7:7:33 | tainted |
 | react-use-context.js:10:22:10:32 | window.name | react-use-context.js:10:22:10:32 | window.name |
+| react-use-context.js:16:26:16:36 | window.name | react-use-context.js:16:26:16:36 | window.name |
 | react-use-state.js:4:9:4:49 | state | react-use-state.js:5:51:5:55 | state |
 | react-use-state.js:4:9:4:49 | state | react-use-state.js:5:51:5:55 | state |
 | react-use-state.js:4:10:4:14 | state | react-use-state.js:4:9:4:49 | state |

javascript/ql/test/query-tests/Security/CWE-079/DomBasedXss/react-use-context.js

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { useContext, Component } from 'react';
 import { MyContext } from './react-create-context';
 
 function useMyContext() {
@@ -9,3 +9,12 @@ export function useDoc1() {
     let { root } = useMyContext();
     root.appendChild(window.name); // NOT OK
 }
+
+class C extends Component {
+    foo() {
+        let { root } = this.context;
+        root.appendChild(window.name); // NOT OK
+    }
+}
+
+C.contextType = MyContext;