Detec%ng Inconsistencies in JavaScript MVC Applica%ons - PowerPoint PPT Presentation

Detec%ng ¡Inconsistencies ¡ in ¡JavaScript ¡MVC ¡ Applica%ons ¡ Frolin ¡S. ¡Ocariza, ¡Jr., ¡ Karthik ¡PaAabiraman ¡and ¡Ali ¡Mesbah ¡ ¡ ¡ University of British Columbia ¡

Most ¡popular ¡ Used ¡by ¡ 90% ¡of ¡all ¡ language ¡on ¡GitHub ¡ websites ¡ (RedMonk ¡survey) ¡ JavaScript ¡ 68% ¡of ¡JavaScript ¡ 4 ¡JavaScript ¡error ¡ faults ¡are ¡ ¡ messages ¡on ¡average ¡per ¡ DOM-­‑related ¡ website ¡ ¡ [ISSRE’11] ¡ [ESEM’13] ¡

DOM-­‑Related ¡Faults ¡ JS CODE DOM var elem = getElementById(“car”) div ¡ elem.innerHTML = “Hello World!” p ¡ span ¡ DOM API Method Erroneous id=“bar” ¡ parameter DOM-Related Faults are … Prevalent Impactful Non-Trivial to Fix 3

MVC ¡Frameworks ¡to ¡the ¡Rescue! ¡ MODEL ¡ VIEW ¡ CONTROLLER ¡ USES USES USES DEFINES DEFINES MODEL VARIABLES CONTROLLER FUNCTIONS MVC Frameworks use two-way data binding è No DOM method calls! 4

MVC ¡Frameworks ¡to ¡the ¡Rescue! ¡ MODEL No DOM method calls è No DOM-Related $scope. msg = “”; Faults in MVC Applications! VIEW <input type=“text” ng- model=“ msg ” /> <div ng-bind=“ msg ”></div> 5

MVC ¡Frameworks ¡to ¡the ¡Rescue? ¡ MODEL ¡ VIEW ¡ CONTROLLER ¡ USES USES USES DEFINES DEFINES MODEL CONTROLLER VARIABLES (MV) FUNCTIONS (CF) IDENTIFIER INCONSISTENCIES 6

MVC ¡Frameworks ¡to ¡the ¡Rescue? ¡ MODEL ¡ VIEW ¡ CONTROLLER ¡ USES USES USES DEFINES DEFINES MODEL CONTROLLER VARIABLES (MV) FUNCTIONS (CF) TYPES TYPES IDENTIFIER INCONSISTENCIES TYPE INCONSISTENCIES 7

MVC ¡Frameworks ¡to ¡the ¡Rescue? ¡ Identifier and type “What’s wrong with : “Why you should not AngularJS?” use AngularJS” Inconsistencies By By happen in real life B. Kinoshita E. Koshelko : e.g., No error messages thrown! Inconsistencies are hard to find 8

To design a way to automatically detect identifier and type inconsistencies in MVC applications

The most popular JS MVC framework in GitHub, StackOverfow, and YouTube 300% increase in AngularJS usage over the past year 10

Our ¡Approach ¡ STATIC ANALYSIS 11

Our ¡Approach ¡ MODEL ¡ VIEW ¡ String: a String: d VIEW ¡ Boolean: b String: fun() Object: c CONTROLLER ¡ Boolean: e String: bar() Object: c Number: foo() MODEL ¡ VIEW ¡ String: d String: a CONTROLLER ¡ Boolean: e String: foo() String: bar() MODEL ¡ CONTROLLER ¡ Boolean: e 12 String: fun()

Our ¡Approach ¡ MODEL ¡ VIEW ¡ String: a String: d VIEW ¡ Boolean: b String: fun() Object: c CONTROLLER ¡ Boolean: e String: bar() Object: c Number: foo() MODEL ¡ VIEW ¡ String: d String: a CONTROLLER ¡ Boolean: e String: foo() String: bar() MODEL ¡ CONTROLLER ¡ Boolean: e Inconsistent 13 “e” is not defined in model! String: fun() types!

Challenges ¡ $scope.obj = { prop1: 2, obj is a model variable, Nested prop2: { but so is obj.prop1 , subprop1: “hello”, Objects subprop2: true obj.prop2.subprop1 , } etc. prop3: “world” }; <li ng-repeat=“temp in arr”> Aliasing {{temp.val}} $scope.arr = […] </li> temp is an alias! V ¡ M C ¡ Groupings V ¡ M C ¡ 14

Running Example Movie Search Search Page List User's Favourite Type Username Movies Input text element Button Movie Search Welcome User #1 Results Page - Star Wars Number of - 8 1/2 movies in list 2 movies List of movies Which User? 15

“Search” ¡Model ¡ “Search” Grouping “SearchCtrl” ¡Controller ¡ “search.html” ¡View ¡ “Results” Grouping “Results” ¡Model ¡ “ResultsCtrl” ¡Controller ¡ “results.html” ¡View ¡ 16

The view expects userData.count to be of type Number … ng-repeat attribute used to loop through movies in the movie list … … but … but ng-repeat loops userData.count through userData is assigned a String instead of userName model in the model userData.movieList variable not defined in model “Results” ¡Model ¡ “ResultsCtrl” ¡Controller ¡ $scope. userData = { “results.html” ¡View ¡ movieList : … count : “two”, … … $scope. alertUserName = function() }; <li ng-repeat=“movie in { userData ”>{{ movie.name }}</li> alert(… + $scope. userName ); … } <ng-pluralize 17 count=“ userData.count ” /> …

Finding ¡the ¡Models, ¡Views, ¡and ¡Controllers ¡ Model Controller View 18

“Results” ¡Model ¡ “SearchCtrl” ¡Controller ¡ “ResultsCtrl” ¡Controller ¡ “search.html” ¡View ¡ “Search” ¡Model ¡ “results.html” ¡View ¡ 19

Inferring ¡IdenKfiers ¡ Model Variable Model Variable and and Controller Controller Function Function Definitions Usages Done via $scope identifier Embedded in HTML code “Straw man” approach : Just take whatever identifiers you see in the above parts of the code 20

“Results” ¡Model ¡ “SearchCtrl” ¡Controller ¡ userData userName This is a searchUser() nested object “ResultsCtrl” ¡Controller ¡ userName “search.html” ¡View ¡ alertUserName() userName alertUserName() “Search” ¡Model ¡ “results.html” ¡View ¡ userName userData movie.name This is an alias userData.count 21

Inferring ¡IdenKfiers: ¡Nested ¡Objects ¡ Tree, where each Object node is an object Literal property identifier userData ¡ $scope. userData = { movieList : { movie1 : …, count ¡ movieList ¡ intro ¡ display ¡ movie2 : … }, count : “two”, intro : …, movie1 ¡ movie2 ¡ display : true }; 22

Inferring ¡Types ¡ For assigned/returned types : Look at AST node! bar is of type $scope.bar = “hello” String StringLiteral Insight : Parts of MVC applications typically written in “declarative” way 23

Inferring ¡Types ¡ For expected types : Examine HTML attribute userData.count <ng-pluralize count =“ userData.count ” /> is expected to be a Number userData.display <h3 ng-if =“ userData.display ”>…</h3> is expected to be a Boolean 24

“Results” ¡Model ¡ “SearchCtrl” ¡Controller ¡ Object: userData userName String: userData.count Void: searchUser() Object: userData.movieList “ResultsCtrl” ¡Controller ¡ “search.html” ¡View ¡ userName Void: alertUserName() userName alertUserName() “Search” ¡Model ¡ “results.html” ¡View ¡ String: userName Array/Object: userData userData.count.name userData.movieList.name Number: userData.count 25

Discovering ¡MVC ¡Groupings ¡ Groupings can be inferred via ng-controller attribute Groupings can be inferred via routers

.when(‘/’, { controller: ‘ SearchCtrl ’, templateUrl: ‘ search.html ’ } .when(‘/’, { controller: ‘ ResultsCtrl ’, templateUrl: ‘ results.html ’ } 27

Grouping 1 “Search” ¡Model ¡ “SearchCtrl” ¡Controller ¡ “search.html” ¡View ¡ Grouping 2 “Results” ¡Model ¡ “ResultsCtrl” ¡Controller ¡ “results.html” ¡View ¡ 28

DetecKng ¡Inconsistencies ¡ Controller Functions : String comparison of identifiers and types Model Variables: userData ¡ count ¡ movieList ¡ intro ¡ display ¡ userData.count Traverse ¡ movie1 ¡ movie2 ¡ 29

Message 1: userName is not defined in “Results” model Message 2: userData.count.name not defined in “Results” model Message 3: userData.count expected to be of type Number, but is of type String instead in “Results” model 30

Aurebesh ¡ http://www.ece.ubc.ca/~frolino/projects/aurebesh APP.JS “count” is expected to be a Number! RESULTS.HTML 31

Research ¡QuesKons ¡ RQ1 : ¡Can ¡Aurebesh ¡help ¡developers ¡find ¡real ¡ bugs ¡in ¡real-­‑world ¡web ¡applicaKons? ¡ ¡ RQ2 : ¡How ¡accurate ¡is ¡Aurebesh ¡in ¡finding ¡ idenKfier ¡and ¡type ¡inconsistencies? ¡ ¡ RQ3 : ¡How ¡quickly ¡can ¡Aurebesh ¡perform ¡the ¡ inconsistency ¡detecKon ¡analysis? ¡ 32

20 ¡ open-­‑source ¡AngularJS ¡ applicaKons ¡ 100+ ¡to ¡ 1000+ ¡lines ¡of ¡JS ¡code ¡ ✗ eval() ¡ ✗ dynamic ¡type ¡conversions ¡ 33

RQ1: ¡Real ¡Bugs ¡ Aurebesh found 15 bugs previously undetected (5 were acknowledged by developers) Slide Maker Todo Application Can’t change themes Can’t add todo items … and transitions in slides …

RQ2: ¡Accuracy ¡ 10 types of Fault injection 200 injections per experiment mutations application 96% # of successful detections Recall # of total injections overall Close to 100% # of successful detections Precision # of error messages displayed (only one false positive)

RQ3: ¡Performance ¡ Average Execution Time 121 ms Worst-case Execution Time 849 ms (eTuneBook)