Merge pull request #4564 from asgerf/js/react-hooks

Approved by esbena
This commit is contained in:
CodeQL CI
2020-10-30 21:00:31 +00:00
committed by GitHub
21 changed files with 669 additions and 66 deletions

View File

@@ -1508,6 +1508,7 @@ sources
| tst.js:50:14:53:3 | return of constructor of class A |
| tst.js:51:5:51:13 | super(42) |
| tst.js:58:1:58:3 | tag |
| tst.js:58:1:58:13 | tag `x: ${x}` |
| tst.js:61:1:61:5 | ::o.m |
| tst.js:61:3:61:5 | o.m |
| tst.js:62:1:62:4 | o::g |

View File

@@ -1,13 +1,13 @@
| tst.js:10:10:10:15 | source |
| tst.js:15:10:15:13 | f1() |
| tst.js:20:10:20:23 | compose1(f2)() |
| tst.js:28:10:28:27 | compose1(f3, f4)() |
| tst.js:33:10:33:28 | compose1(o.f, f5)() |
| tst.js:41:10:41:27 | compose1(f6, f7)() |
| tst.js:49:10:49:33 | compose ... source) |
| tst.js:61:10:61:40 | compose ... source) |
| tst.js:66:10:66:30 | compose ... source) |
| tst.js:20:10:20:24 | lcompose1(f2)() |
| tst.js:28:10:28:28 | lcompose1(f3, f4)() |
| tst.js:33:10:33:29 | lcompose1(o.f, f5)() |
| tst.js:41:10:41:28 | lcompose1(f6, f7)() |
| tst.js:49:10:49:34 | lcompos ... source) |
| tst.js:61:10:61:41 | lcompos ... source) |
| tst.js:66:10:66:31 | lcompos ... source) |
| tst.js:89:10:89:31 | f18(und ... source) |
| tst.js:94:10:94:24 | compose2(f19)() |
| tst.js:99:10:99:24 | compose3(f20)() |
| tst.js:104:10:104:24 | compose4(f21)() |
| tst.js:94:10:94:30 | rcompos ... o.f)() |
| tst.js:99:10:99:30 | lcompos ... f20)() |
| tst.js:104:10:104:30 | lcompos ... f21)() |

View File

@@ -1,8 +1,8 @@
import compose1 from 'just-compose';
import compose2 from 'compose-function';
import compose3 from 'lodash.flow';
import lcompose1 from 'just-compose';
import rcompose2 from 'compose-function';
import lcompose3 from 'lodash.flow';
import _ from 'lodash';
var compose4 = _.flow;
var lcompose4 = _.flow;
(function(){
var source = SOURCE();
@@ -17,7 +17,7 @@ var compose4 = _.flow;
function f2(){
return source;
}
SINK(compose1(f2)());
SINK(lcompose1(f2)());
function f3(){
@@ -25,12 +25,12 @@ var compose4 = _.flow;
function f4(){
return source;
}
SINK(compose1(f3, f4)());
SINK(lcompose1(f3, f4)());
function f5(){
return source;
}
SINK(compose1(o.f, f5)());
SINK(lcompose1(o.f, f5)());
function f6(){
return source;
@@ -38,7 +38,7 @@ var compose4 = _.flow;
function f7(x){
return x;
}
SINK(compose1(f6, f7)());
SINK(lcompose1(f6, f7)());
function f8(x){
return x;
@@ -46,7 +46,7 @@ var compose4 = _.flow;
function f9(x){
return x;
}
SINK(compose1(f8, f9)(source));
SINK(lcompose1(f8, f9)(source));
function f10(x){
@@ -58,12 +58,12 @@ var compose4 = _.flow;
function f12(x){
return x;
}
SINK(compose1(f10, f11, f12)(source));
SINK(lcompose1(f10, f11, f12)(source));
function f13(x){
return x + 'foo' ;
}
SINK(compose1(f13)(source));
SINK(lcompose1(f13)(source));
function f14(){
return undefined;
@@ -76,7 +76,7 @@ var compose4 = _.flow;
function f16(){
return undefined;
}
SINK(compose1(f15, f16)()); // NO FLOW
SINK(lcompose1(f15, f16)()); // NO FLOW
function f17(x, y){
return y;
@@ -91,16 +91,21 @@ var compose4 = _.flow;
function f19(){
return source;
}
SINK(compose2(f19)());
SINK(rcompose2(f19, o.f)());
function f20(){
return source;
}
SINK(compose3(f20)());
SINK(lcompose3(f16, f20)());
function f21(){
return source;
}
SINK(compose4(f21)());
SINK(lcompose4(f16, f21)());
function f22(){
return source;
}
SINK(lcompose3(f22, f16)()); // NO FLOW
})();

View File

@@ -0,0 +1,24 @@
import { memo } from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import styled from 'styled-components';
import unknownFunction from 'somewhere';
import { MyComponent } from './exportedComponent';
const StyledComponent = styled(MyComponent)`
color: red;
`;
function mapStateToProps(x) {
return x;
}
function mapDispatchToProps(x) {
return x;
}
const withConnect = connect(mapStateToProps, mapDispatchToProps);
const ConnectedComponent = compose(withConnect, unknownFunction)(StyledComponent);
export default memo(ConnectedComponent);

View File

@@ -227,6 +227,9 @@ test_ReactComponent_getACandidatePropsValue
| props.js:30:46:30:67 | "propFr ... tProps" |
| props.js:32:22:32:34 | "propFromJSX" |
| props.js:34:33:34:53 | "propFr ... ructor" |
| useHigherOrderComponent.jsx:5:33:5:37 | "red" |
| useHigherOrderComponent.jsx:11:39:11:44 | "lazy" |
| useHigherOrderComponent.jsx:17:40:17:46 | "lazy2" |
test_ReactComponent
| es5.js:1:31:11:1 | {\\n dis ... ;\\n }\\n} |
| es5.js:18:33:22:1 | {\\n ren ... ;\\n }\\n} |
@@ -285,6 +288,9 @@ test_JSXname
| thisAccesses.js:60:19:60:41 | <this.n ... s.name> | thisAccesses.js:60:20:60:28 | this.name | this.name | dot |
| thisAccesses.js:61:19:61:41 | <this.t ... s.this> | thisAccesses.js:61:20:61:28 | this.this | this.this | dot |
| thisAccesses_importedMappers.js:13:16:13:21 | <div/> | thisAccesses_importedMappers.js:13:17:13:19 | div | div | Identifier |
| useHigherOrderComponent.jsx:5:12:5:39 | <SomeCo ... "red"/> | useHigherOrderComponent.jsx:5:13:5:25 | SomeComponent | SomeComponent | Identifier |
| useHigherOrderComponent.jsx:11:12:11:46 | <LazyLo ... lazy"/> | useHigherOrderComponent.jsx:11:13:11:31 | LazyLoadedComponent | LazyLoadedComponent | Identifier |
| useHigherOrderComponent.jsx:17:12:17:48 | <LazyLo ... azy2"/> | useHigherOrderComponent.jsx:17:13:17:32 | LazyLoadedComponent2 | LazyLoadedComponent2 | Identifier |
test_JSXName_this
| es5.js:4:12:4:45 | <div>He ... }</div> | es5.js:4:24:4:27 | this |
| es5.js:20:12:20:44 | <h1>Hel ... e}</h1> | es5.js:20:24:20:27 | this |

View File

@@ -0,0 +1,18 @@
import SomeComponent from './higherOrderComponent';
import { lazy } from 'react';
function foo() {
return <SomeComponent color="red"/>
}
const LazyLoadedComponent = lazy(() => import('./higherOrderComponent'));
function bar() {
return <LazyLoadedComponent color="lazy"/>
}
const LazyLoadedComponent2 = lazy(() => import('./exportedComponent').then(m => m.MyComponent));
function barz() {
return <LazyLoadedComponent2 color="lazy2"/>
}

View File

@@ -174,6 +174,36 @@ nodes
| react-native.js:8:18:8:24 | tainted |
| react-native.js:9:27:9:33 | tainted |
| react-native.js:9:27:9: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: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 |
| react-use-state.js:4:38:4:48 | window.name |
| react-use-state.js:5:51:5:55 | state |
| react-use-state.js:5:51:5:55 | state |
| react-use-state.js:9:9:9:43 | state |
| react-use-state.js:9:10:9:14 | state |
| react-use-state.js:10:14:10:24 | window.name |
| react-use-state.js:10:14:10:24 | window.name |
| react-use-state.js:11:51:11:55 | state |
| react-use-state.js:11:51:11:55 | state |
| react-use-state.js:15:9:15:43 | state |
| react-use-state.js:15:10:15:14 | state |
| react-use-state.js:16:20:16:30 | window.name |
| react-use-state.js:16:20:16:30 | window.name |
| react-use-state.js:17:51:17:55 | state |
| react-use-state.js:17:51:17:55 | state |
| react-use-state.js:21:10:21:14 | state |
| react-use-state.js:22:14:22:17 | prev |
| react-use-state.js:23:35:23:38 | prev |
| react-use-state.js:23:35:23:38 | prev |
| react-use-state.js:25:20:25:30 | window.name |
| react-use-state.js:25:20:25:30 | window.name |
| sanitiser.js:16:7:16:27 | tainted |
| sanitiser.js:16:17:16:27 | window.name |
| sanitiser.js:16:17:16:27 | window.name |
@@ -737,6 +767,28 @@ edges
| react-native.js:7:7:7:33 | tainted | react-native.js:9:27:9:33 | tainted |
| 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 |
| react-use-state.js:4:38:4:48 | window.name | react-use-state.js:4:10:4:14 | state |
| react-use-state.js:4:38:4:48 | window.name | react-use-state.js:4:10:4:14 | state |
| react-use-state.js:9:9:9:43 | state | react-use-state.js:11:51:11:55 | state |
| react-use-state.js:9:9:9:43 | state | react-use-state.js:11:51:11:55 | state |
| react-use-state.js:9:10:9:14 | state | react-use-state.js:9:9:9:43 | state |
| react-use-state.js:10:14:10:24 | window.name | react-use-state.js:9:10:9:14 | state |
| react-use-state.js:10:14:10:24 | window.name | react-use-state.js:9:10:9:14 | state |
| react-use-state.js:15:9:15:43 | state | react-use-state.js:17:51:17:55 | state |
| react-use-state.js:15:9:15:43 | state | react-use-state.js:17:51:17:55 | state |
| react-use-state.js:15:10:15:14 | state | react-use-state.js:15:9:15:43 | state |
| react-use-state.js:16:20:16:30 | window.name | react-use-state.js:15:10:15:14 | state |
| react-use-state.js:16:20:16:30 | window.name | react-use-state.js:15:10:15:14 | state |
| react-use-state.js:21:10:21:14 | state | react-use-state.js:22:14:22:17 | prev |
| react-use-state.js:22:14:22:17 | prev | react-use-state.js:23:35:23:38 | prev |
| react-use-state.js:22:14:22:17 | prev | react-use-state.js:23:35:23:38 | prev |
| react-use-state.js:25:20:25:30 | window.name | react-use-state.js:21:10:21:14 | state |
| react-use-state.js:25:20:25:30 | window.name | react-use-state.js:21:10:21:14 | state |
| sanitiser.js:16:7:16:27 | tainted | sanitiser.js:23:29:23:35 | tainted |
| sanitiser.js:16:7:16:27 | tainted | sanitiser.js:30:29:30:35 | tainted |
| sanitiser.js:16:7:16:27 | tainted | sanitiser.js:33:29:33:35 | tainted |
@@ -1140,6 +1192,12 @@ edges
| optionalSanitizer.js:45:18:45:56 | sanitiz ... target | optionalSanitizer.js:26:16:26:32 | document.location | optionalSanitizer.js:45:18:45:56 | sanitiz ... target | Cross-site scripting vulnerability due to $@. | optionalSanitizer.js:26:16:26:32 | document.location | user-provided value |
| 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 |
| react-use-state.js:23:35:23:38 | prev | react-use-state.js:25:20:25:30 | window.name | react-use-state.js:23:35:23:38 | prev | Cross-site scripting vulnerability due to $@. | react-use-state.js:25:20:25:30 | window.name | user-provided value |
| sanitiser.js:23:21:23:44 | '<b>' + ... '</b>' | sanitiser.js:16:17:16:27 | window.name | sanitiser.js:23:21:23:44 | '<b>' + ... '</b>' | Cross-site scripting vulnerability due to $@. | sanitiser.js:16:17:16:27 | window.name | user-provided value |
| sanitiser.js:30:21:30:44 | '<b>' + ... '</b>' | sanitiser.js:16:17:16:27 | window.name | sanitiser.js:30:21:30:44 | '<b>' + ... '</b>' | Cross-site scripting vulnerability due to $@. | sanitiser.js:16:17:16:27 | window.name | user-provided value |
| sanitiser.js:33:21:33:44 | '<b>' + ... '</b>' | sanitiser.js:16:17:16:27 | window.name | sanitiser.js:33:21:33:44 | '<b>' + ... '</b>' | Cross-site scripting vulnerability due to $@. | sanitiser.js:16:17:16:27 | window.name | user-provided value |

View File

@@ -174,6 +174,36 @@ nodes
| react-native.js:8:18:8:24 | tainted |
| react-native.js:9:27:9:33 | tainted |
| react-native.js:9:27:9: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: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 |
| react-use-state.js:4:38:4:48 | window.name |
| react-use-state.js:5:51:5:55 | state |
| react-use-state.js:5:51:5:55 | state |
| react-use-state.js:9:9:9:43 | state |
| react-use-state.js:9:10:9:14 | state |
| react-use-state.js:10:14:10:24 | window.name |
| react-use-state.js:10:14:10:24 | window.name |
| react-use-state.js:11:51:11:55 | state |
| react-use-state.js:11:51:11:55 | state |
| react-use-state.js:15:9:15:43 | state |
| react-use-state.js:15:10:15:14 | state |
| react-use-state.js:16:20:16:30 | window.name |
| react-use-state.js:16:20:16:30 | window.name |
| react-use-state.js:17:51:17:55 | state |
| react-use-state.js:17:51:17:55 | state |
| react-use-state.js:21:10:21:14 | state |
| react-use-state.js:22:14:22:17 | prev |
| react-use-state.js:23:35:23:38 | prev |
| react-use-state.js:23:35:23:38 | prev |
| react-use-state.js:25:20:25:30 | window.name |
| react-use-state.js:25:20:25:30 | window.name |
| sanitiser.js:16:7:16:27 | tainted |
| sanitiser.js:16:17:16:27 | window.name |
| sanitiser.js:16:17:16:27 | window.name |
@@ -741,6 +771,28 @@ edges
| react-native.js:7:7:7:33 | tainted | react-native.js:9:27:9:33 | tainted |
| 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 |
| react-use-state.js:4:38:4:48 | window.name | react-use-state.js:4:10:4:14 | state |
| react-use-state.js:4:38:4:48 | window.name | react-use-state.js:4:10:4:14 | state |
| react-use-state.js:9:9:9:43 | state | react-use-state.js:11:51:11:55 | state |
| react-use-state.js:9:9:9:43 | state | react-use-state.js:11:51:11:55 | state |
| react-use-state.js:9:10:9:14 | state | react-use-state.js:9:9:9:43 | state |
| react-use-state.js:10:14:10:24 | window.name | react-use-state.js:9:10:9:14 | state |
| react-use-state.js:10:14:10:24 | window.name | react-use-state.js:9:10:9:14 | state |
| react-use-state.js:15:9:15:43 | state | react-use-state.js:17:51:17:55 | state |
| react-use-state.js:15:9:15:43 | state | react-use-state.js:17:51:17:55 | state |
| react-use-state.js:15:10:15:14 | state | react-use-state.js:15:9:15:43 | state |
| react-use-state.js:16:20:16:30 | window.name | react-use-state.js:15:10:15:14 | state |
| react-use-state.js:16:20:16:30 | window.name | react-use-state.js:15:10:15:14 | state |
| react-use-state.js:21:10:21:14 | state | react-use-state.js:22:14:22:17 | prev |
| react-use-state.js:22:14:22:17 | prev | react-use-state.js:23:35:23:38 | prev |
| react-use-state.js:22:14:22:17 | prev | react-use-state.js:23:35:23:38 | prev |
| react-use-state.js:25:20:25:30 | window.name | react-use-state.js:21:10:21:14 | state |
| react-use-state.js:25:20:25:30 | window.name | react-use-state.js:21:10:21:14 | state |
| sanitiser.js:16:7:16:27 | tainted | sanitiser.js:23:29:23:35 | tainted |
| sanitiser.js:16:7:16:27 | tainted | sanitiser.js:30:29:30:35 | tainted |
| sanitiser.js:16:7:16:27 | tainted | sanitiser.js:33:29:33:35 | tainted |

View File

@@ -0,0 +1,3 @@
import { createContext } from 'react';
export let MyContext = createContext({root: null});

View File

@@ -0,0 +1,5 @@
import { MyContext } from './react-create-context';
export function renderMain() {
return <MyContext.Provider value={{root: document.body}}></MyContext.Provider>
}

View File

@@ -0,0 +1,20 @@
import { useContext, Component } from 'react';
import { MyContext } from './react-create-context';
function useMyContext() {
return useContext(MyContext);
}
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;

View File

@@ -0,0 +1,33 @@
import { useState } from 'react';
function initialState() {
let [state, setState] = useState(window.name);
return <div dangerouslySetInnerHTML={{__html: state}}></div>; // NOT OK
}
function setStateValue() {
let [state, setState] = useState('foo');
setState(window.name);
return <div dangerouslySetInnerHTML={{__html: state}}></div>; // NOT OK
}
function setStateValueLazy() {
let [state, setState] = useState('foo');
setState(() => window.name);
return <div dangerouslySetInnerHTML={{__html: state}}></div>; // NOT OK
}
function setStateValueLazy() {
let [state, setState] = useState('foo');
setState(prev => {
document.body.innerHTML = prev; // NOT OK
})
setState(() => window.name);
}
function setStateValueSafe() {
let [state, setState] = useState('foo');
setState('safe');
setState(() => 'also safe');
return <div dangerouslySetInnerHTML={{__html: state}}></div>; // OK
}