Merge pull request #607 from esben-semmle/js/more-react-methods

JS: model additional React component methods

Author: Max Schaefer

change-notes/1.20/analysis-javascript.md

@@ -3,7 +3,8 @@
 ## General improvements
 
 * Support for popular libraries has been improved. Consequently, queries may produce more results on code bases that use the following features:
-  - servers, for example [hapi](https://hapijs.com/)
+  - client-side code, for example [React](https://reactjs.org/)
+  - server-side code, for example [hapi](https://hapijs.com/)
 
 ## New queries
 

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

@@ -34,6 +34,11 @@ abstract class ReactComponent extends ASTNode {
    */
   abstract Function getInstanceMethod(string name);
 
+  /**
+   * Gets a static method of this component with the given name.
+   */
+  abstract Function getStaticMethod(string name);
+
   /**
    * Gets the abstract value that represents this component.
    */
@@ -175,6 +180,11 @@ abstract class ReactComponent extends ASTNode {
         // setState with object: `this.setState({foo: 42})`
         result = arg0
     )
+    or
+    result.flowsToExpr(getStaticMethod("getDerivedStateFromProps").getAReturnedExpr())
+    or
+    // shouldComponentUpdate: (nextProps, nextState)
+    result = DataFlow::parameterNode(getInstanceMethod("shouldComponentUpdate").getParameter(1))
   }
 
   /**
@@ -190,9 +200,14 @@ abstract class ReactComponent extends ASTNode {
       callback = getAMethodCall("setState").getCallback(0) and
       stateParameterIndex = 0
       or
-      // componentDidUpdate: (prevProps, prevState)
-      callback = getInstanceMethod("componentDidUpdate").flow() and
-      stateParameterIndex = 1
+      stateParameterIndex = 1 and (
+        // componentDidUpdate: (prevProps, prevState)
+        callback = getInstanceMethod("componentDidUpdate").flow() or
+        // getDerivedStateFromProps: (props, state)
+        callback = getStaticMethod("getDerivedStateFromProps").flow() or
+        // getSnapshotBeforeUpdate: (prevProps, prevState)
+        callback = getInstanceMethod("getSnapshotBeforeUpdate").flow()
+      )
     )
   }
 
@@ -205,6 +220,9 @@ abstract class ReactComponent extends ASTNode {
     result.flowsTo(getComponentCreatorSource().getAnInvocation().getArgument(0))
     or
     result = getADefaultPropsSource()
+    or
+    // shouldComponentUpdate: (nextProps, nextState)
+    result = DataFlow::parameterNode(getInstanceMethod("shouldComponentUpdate").getParameter(0))
   }
 
   /**
@@ -234,9 +252,14 @@ abstract class ReactComponent extends ASTNode {
       callback = getAMethodCall("setState").getCallback(0) and
       propsParameterIndex = 1
       or
-      // componentDidUpdate: (prevProps, prevState)
-      callback = getInstanceMethod("componentDidUpdate").flow() and
-      propsParameterIndex = 0
+      propsParameterIndex = 0 and (
+        // componentDidUpdate: (prevProps, prevState)
+        callback = getInstanceMethod("componentDidUpdate").flow() or
+        // getDerivedStateFromProps: (props, state)
+        callback = getStaticMethod("getDerivedStateFromProps").flow() or
+        // getSnapshotBeforeUpdate: (prevProps, prevState)
+        callback = getInstanceMethod("getSnapshotBeforeUpdate").flow()
+      )
     )
   }
 
@@ -272,6 +295,10 @@ class FunctionalComponent extends ReactComponent, Function {
     name = "render" and result = this
   }
 
+  override Function getStaticMethod(string name) {
+    none()
+  }
+
   override DataFlow::SourceNode getADirectPropsAccess() {
     result = DataFlow::parameterNode(getParameter(0))
   }
@@ -302,6 +329,14 @@ private abstract class SharedReactPreactClassComponent extends ReactComponent, C
     result = ClassDefinition.super.getInstanceMethod(name)
   }
 
+  override Function getStaticMethod(string name) {
+    exists(MethodDeclaration decl |
+      decl = getMethod(name) and
+      decl.isStatic() and
+      result = decl.getBody()
+    )
+  }
+
   override DataFlow::SourceNode getADirectPropsAccess() {
     result.(DataFlow::PropRef).accesses(ref(), "props") or
     result = DataFlow::parameterNode(getConstructor().getBody().getParameter(0))
@@ -428,6 +463,10 @@ class ES5Component extends ReactComponent, ObjectExpr {
     result = getPropertyByName(name).getInit()
   }
 
+  override Function getStaticMethod(string name) {
+    none()
+  }
+
   override DataFlow::SourceNode getADirectPropsAccess() {
     result.(DataFlow::PropRef).accesses(ref(), "props")
   }

javascript/ql/test/library-tests/frameworks/ReactJS/ReactComponent.expected

@@ -14,6 +14,7 @@
 | props.js:2:5:3:5 | class C ... {\\n    } |
 | props.js:13:31:17:5 | {\\n      ... }\\n    } |
 | props.js:26:5:28:5 | functio ... ;\\n    } |
+| rare-lifecycle-methods.js:1:1:11:1 | class C ...     }\\n} |
 | statePropertyReads.js:1:1:13:1 | class R ...     }\\n} |
 | statePropertyWrites.js:1:1:34:1 | class W ...    };\\n} |
 | statePropertyWrites.js:36:19:45:1 | {\\n  ren ... ;\\n  }\\n} |

javascript/ql/test/library-tests/frameworks/ReactJS/ReactComponent_getACandidateStateSource.expected

@@ -1,4 +1,6 @@
 | es6.js:14:1:20:1 | class H ...     }\\n} | es6.js:18:22:18:31 | { baz: 42} |
+| rare-lifecycle-methods.js:1:1:11:1 | class C ...     }\\n} | rare-lifecycle-methods.js:3:16:3:17 | {} |
+| rare-lifecycle-methods.js:1:1:11:1 | class C ...     }\\n} | rare-lifecycle-methods.js:5:38:5:46 | nextState |
 | statePropertyReads.js:1:1:13:1 | class R ...     }\\n} | statePropertyReads.js:7:45:7:56 | prevState.p3 |
 | statePropertyWrites.js:1:1:34:1 | class W ...    };\\n} | statePropertyWrites.js:8:18:8:19 | {} |
 | statePropertyWrites.js:1:1:34:1 | class W ...    };\\n} | statePropertyWrites.js:12:18:12:19 | {} |

javascript/ql/test/library-tests/frameworks/ReactJS/ReactComponent_getADirectPropsSource.expected

@@ -15,6 +15,7 @@
 | probably-a-component.js:1:1:6:1 | class H ...     }\\n} | probably-a-component.js:3:9:3:18 | this.props |
 | props.js:2:5:3:5 | class C ... {\\n    } | props.js:2:37:2:36 | args |
 | props.js:26:5:28:5 | functio ... ;\\n    } | props.js:26:16:26:20 | props |
+| rare-lifecycle-methods.js:1:1:11:1 | class C ...     }\\n} | rare-lifecycle-methods.js:1:33:1:32 | args |
 | statePropertyWrites.js:36:19:45:1 | {\\n  ren ... ;\\n  }\\n} | statePropertyWrites.js:38:24:38:33 | this.props |
 | thisAccesses.js:31:2:36:1 | functio ... iv/>;\\n} | thisAccesses.js:31:12:31:16 | props |
 | thisAccesses.js:47:1:52:1 | class C ...     }\\n} | thisAccesses.js:48:18:48:18 | y |

javascript/ql/test/library-tests/frameworks/ReactJS/ReactComponent_getAPreviousStateSource.expected

@@ -0,0 +1,4 @@
+| rare-lifecycle-methods.js:1:1:11:1 | class C ...     }\\n} | rare-lifecycle-methods.js:2:44:2:48 | state |
+| rare-lifecycle-methods.js:1:1:11:1 | class C ...     }\\n} | rare-lifecycle-methods.js:8:40:8:48 | prevState |
+| statePropertyReads.js:1:1:13:1 | class R ...     }\\n} | statePropertyReads.js:7:24:7:32 | prevState |
+| statePropertyReads.js:1:1:13:1 | class R ...     }\\n} | statePropertyReads.js:10:35:10:43 | prevState |

javascript/ql/test/library-tests/frameworks/ReactJS/ReactComponent_getAPreviousStateSource.ql

@@ -0,0 +1,4 @@
+import semmle.javascript.frameworks.React
+
+from ReactComponent c
+select c, c.getAPreviousStateSource()

javascript/ql/test/library-tests/frameworks/ReactJS/ReactComponent_getInstanceMethod.expected

@@ -10,6 +10,8 @@
 | probably-a-component.js:1:1:6:1 | class H ...     }\\n} | render | probably-a-component.js:2:11:5:5 | () {\\n   ... ;\\n    } |
 | props.js:13:31:17:5 | {\\n      ... }\\n    } | getDefaultProps | props.js:14:24:16:9 | () {\\n   ...       } |
 | props.js:26:5:28:5 | functio ... ;\\n    } | render | props.js:26:5:28:5 | functio ... ;\\n    } |
+| rare-lifecycle-methods.js:1:1:11:1 | class C ...     }\\n} | getSnapshotBeforeUpdate | rare-lifecycle-methods.js:8:28:10:5 | (prevPr ... ;\\n    } |
+| rare-lifecycle-methods.js:1:1:11:1 | class C ...     }\\n} | shouldComponentUpdate | rare-lifecycle-methods.js:5:26:7:5 | (nextPr ... ;\\n    } |
 | statePropertyReads.js:1:1:13:1 | class R ...     }\\n} | componentDidUpdate | statePropertyReads.js:10:23:12:5 | (prevPr ... ;\\n    } |
 | statePropertyWrites.js:1:1:34:1 | class W ...    };\\n} | getInitialState | statePropertyWrites.js:25:20:29:5 | () { // ... ;\\n    } |
 | statePropertyWrites.js:36:19:45:1 | {\\n  ren ... ;\\n  }\\n} | getInitialState | statePropertyWrites.js:40:20:44:3 | functio ...  };\\n  } |

javascript/ql/test/library-tests/frameworks/ReactJS/ReactComponent_ref.expected

@@ -31,6 +31,10 @@
 | props.js:13:31:17:5 | {\\n      ... }\\n    } | props.js:14:24:14:23 | this |
 | props.js:26:5:28:5 | functio ... ;\\n    } | props.js:26:5:26:4 | this |
 | props.js:26:5:28:5 | functio ... ;\\n    } | props.js:34:5:34:55 | new C({ ... ctor"}) |
+| rare-lifecycle-methods.js:1:1:11:1 | class C ...     }\\n} | rare-lifecycle-methods.js:1:33:1:32 | this |
+| rare-lifecycle-methods.js:1:1:11:1 | class C ...     }\\n} | rare-lifecycle-methods.js:2:36:2:35 | this |
+| rare-lifecycle-methods.js:1:1:11:1 | class C ...     }\\n} | rare-lifecycle-methods.js:5:26:5:25 | this |
+| rare-lifecycle-methods.js:1:1:11:1 | class C ...     }\\n} | rare-lifecycle-methods.js:8:28:8:27 | this |
 | statePropertyReads.js:1:1:13:1 | class R ...     }\\n} | statePropertyReads.js:2:16:2:15 | this |
 | statePropertyReads.js:1:1:13:1 | class R ...     }\\n} | statePropertyReads.js:3:9:3:12 | this |
 | statePropertyReads.js:1:1:13:1 | class R ...     }\\n} | statePropertyReads.js:5:9:5:12 | this |

javascript/ql/test/library-tests/frameworks/ReactJS/rare-lifecycle-methods.js

@@ -0,0 +1,11 @@
+class C extends React.Component {
+    static getDerivedStateFromProps(props, state) {
+        return {};
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        return true;
+    }
+    getSnapshotBeforeUpdate(prevProps, prevState) {
+        return {};
+    }
+}