Detec%ng Unknown Inconsistencies in Web Applica%ons Frolin Ocariza - PowerPoint PPT Presentation

Detec%ng Unknown Inconsistencies in Web Applica%ons Frolin Ocariza Jr. Karthik Pa:abiraman Ali Mesbah 1

95% of all websites use JavaScript JavaScript The most popular language on both GitHub and StackOverflow for 4 years 2

Bugs abound – our prior work [ISSRE’11][ESEM’13][TSE] JavaScript Code smells [Fard and Mesbah – SCAM’2013] 3

JavaScript: Challenges Lack of JS has standard loose programming seman@cs style Frequent cross- language interac@ons 4

MVC Frameworks • Model-View-Controller for structuring code • Amenable to sta@c analysis – less dynamism 300% increase in AngularJS usage in 2015 5

Our Earlier Work: Aurebesh [ICSE’15] • Aurebesh : Detects mismatches between model, view, controller components in AngularJS code through Sta%c Analysis MODEL VIEW CONTROLLER USES USES USES DEFINES DEFINES MODEL VARIABLES CONTROLLER FUNCTIONS • Aurebesh hard-codes rules for bug detec%on – Name and type inconsistencies 6

Goal • Detect errors in JavaScript-based MVC applica%ons through sta%c analysis – Without hard-coded rules – Without programmer annota@ons or hints – Also code smells or bad coding prac@ces • Detect inconsistencies across languages – Main difference with exis@ng tools (e.g., Coverity) 7

Example Inconsistency JavaScript Code HTML Marionette.LayoutView.extend({ <div class=“some-region”> el: '.some-view', <p>Hello World</p> ... </div> }); View in the JS code incorrectly assumes that the HTML contains an element with class ‘some-view’ 8

Main Insights How do we infer the Leverage consistency rules? repea%ng code pa:erns How do we detect LINK RULES cross-language inconsistencies? 9

Outline • Mo@va@on and Goals • Approach • Evalua@on • Conclusion 10

Our Approach Find Code Transform Patterns JavaScript AST and from DOM into Subtrees CodeTrees HTML Intra-Pattern Rules Infer Detect Rule Inconsistencies Consistency Violations Rules Link Rules 11

Find Code Transform Patterns JavaScript AST and Step 1 : Transform AST and from DOM into Subtrees CodeTrees HTML DOM into CodeTrees Intra-Pattern Rules Infer Detect Rule Inconsistencies Consistency Violations Rules Link Rules Marionette.LayoutView.extend({ <div class=“some-region”> el: '.some-view', <p>Hello World</p> ... </div> }); DOM CallExpression div AST extend Object Aeribute p Property class some-region StringLiteral el some-view 12

Find Code Transform Patterns JavaScript AST and Step 2 : Find Code Paeerns from DOM into Subtrees CodeTrees HTML from Subtrees Intra-Pattern Rules Infer Detect Rule Inconsistencies Consistency Violations Rules Link Rules ROOT …. …. …. CallExpression CallExpression CallExpression extend Object extend Object extend Object Property Property Property StringLiteral StringLiteral NumberLiteral el el el some-view some-view 3 13

Find Code Transform Patterns JavaScript AST and Step 2 : Find Code Paeerns from DOM into Subtrees CodeTrees HTML from Subtrees Intra-Pattern Rules Infer Detect Rule Inconsistencies Consistency Violations Rules Link Rules ROOT …. …. …. CallExpression CallExpression CallExpression Object Object Object Property Property Property “Abstract out” iden@fiers, literals, and string types 14

Find Code Transform Patterns JavaScript AST and Step 2 : Find Code Paeerns from DOM into Subtrees CodeTrees HTML from Subtrees Intra-Pattern Rules Infer Detect Rule Inconsistencies Consistency Violations Rules Link Rules ROOT …. …. …. CallExpression CallExpression CallExpression Object Object Object Property Property Property Group together isomorphic subtrees 15

Find Code Transform Patterns JavaScript AST and Step 3 : Infer Consistency Rules from DOM into Subtrees CodeTrees HTML Intra-Pattern Rules Infer Detect Rule Inconsistencies Consistency Violations INTRA-PATTERN CONSISTENCY RULE Rules Link Rules Inconsistencies within pa,ern groups CallExpression CallExpression CallExpression Object Object Object Property Property Property Nodes are “concre@zed” one by one 16

Find Code Transform Patterns JavaScript AST and Step 3 : Infer Consistency Rules from DOM into Subtrees CodeTrees HTML Intra-Pattern Rules Infer Detect Rule Inconsistencies Consistency Violations INTRA-PATTERN CONSISTENCY RULE Rules Link Rules Inconsistencies within pa,ern groups CallExpression CallExpression CallExpression extend Object extend Object extend Object Property Property Property Nodes are “concre@zed” one by one 17

Find Code Transform Patterns JavaScript AST and Step 3 : Infer Consistency Rules from DOM into Subtrees CodeTrees HTML Intra-Pattern Rules Infer Detect Rule Inconsistencies Consistency Violations INTRA-PATTERN CONSISTENCY RULE Rules Link Rules Inconsistencies within pa,ern groups CallExpression CallExpression CallExpression extend Object extend Object extend Object Property Property Property el el el Nodes are “concre@zed” one by one 18

Find Code Transform Patterns JavaScript AST and Step 3 : Infer Consistency Rules from DOM into Subtrees CodeTrees HTML Intra-Pattern Rules Infer Detect Rule Inconsistencies Consistency Violations INTRA-PATTERN CONSISTENCY RULE Rules Link Rules Inconsistencies within pa,ern groups CallExpression CallExpression CallExpression extend Object extend Object extend Object Property Property Property StringLiteral NumberLiteral StringLiteral el el el Subtrees are par@@oned according to differences found while concre@zing 19

Find Code Transform Patterns JavaScript AST and Step 3 : Infer Consistency Rules from DOM into Subtrees CodeTrees HTML Intra-Pattern Rules Infer Detect Rule Inconsistencies Consistency Violations INTRA-PATTERN CONSISTENCY RULE Rules Link Rules Inconsistencies within pa,ern groups CallExpression CallExpression extend Object extend Object CallExpression Property Property extend Object NumberLiteral StringLiteral Property el el StringLiteral el Dominant paeerns are marked as intra-paeern consistency rules 20

Find Code Transform Patterns JavaScript AST and Step 4 : Detect Rule Viola@ons from DOM into Subtrees CodeTrees HTML Intra-Pattern Rules Infer Detect Rule Inconsistencies Consistency Violations INTRA-PATTERN CONSISTENCY RULE Rules Link Rules Inconsistencies within pa,ern groups CallExpression CallExpression extend Object extend Object CallExpression Property Property extend Object NumberLiteral StringLiteral Property el el StringLiteral el Subtrees that do not belong to dominant paeerns are marked as inconsistencies 21

Find Code Transform Patterns JavaScript AST and Step 3 : Infer Consistency Rules from DOM into Subtrees CodeTrees HTML LINK RULE Intra-Pattern Rules Infer Detect Rule Inconsistencies Consistency Violations Rules Link Rules Inconsistencies between pa,ern groups Code Paeern from JS Property Property Property StringLiteral StringLiteral StringLiteral el el el layout some-region some-view Code Paeern from HTML Aeribute Aeribute some-region layout class class 22

Find Code Transform Patterns JavaScript AST and Step 3 : Infer Consistency Rules from DOM into Subtrees CodeTrees HTML LINK RULE Intra-Pattern Rules Infer Detect Rule Inconsistencies Consistency Violations Rules Link Rules Inconsistencies between pa,ern groups Code Paeern from JS Property Property Property StringLiteral StringLiteral StringLiteral el el el layout some-region some-view Code Paeern from HTML Dominant Aeribute Aeribute matches are marked as link some-region layout class class rules 23

Find Code Transform Patterns JavaScript AST and Step 4 : Detect Rule Viola@ons from DOM into Subtrees CodeTrees HTML LINK RULE Intra-Pattern Rules Infer Detect Rule Inconsistencies Consistency Violations Rules Link Rules Inconsistencies between pa,ern groups Code Paeern from JS Property Property Property StringLiteral StringLiteral StringLiteral el el el layout some-region some-view Code Paeern from HTML Subtrees not Aeribute Aeribute belonging to dominant match some-region layout class class are marked as inconsistent 24

Holocron Implemented as INPUT a Brackets IDE plugin Web Applica@on under Test OUTPUT LIST OF INCONSISTENCIES Mined Applica@ons (from Web) 25

Outline • Mo@va@on and Goals • Approach • Evalua@on • Conclusion 26

Research Ques@ons RQ1 (Prevalence of Inconsistencies) : Do inconsistencies occur in MVC applica@ons, and if so, what are their characteris@cs? RQ2 (Real Bugs and Code Smells) : Can Holocron be used to detect bugs and code smells in real-world MVC applica@ons? 27

RQ1: Prevalence of Inconsistencies Analyzed 90 GitHub bug reports (30 for each of three main MVC frameworks) 28

RQ1: Prevalence of Inconsistencies Not Inconsistency Inconsistency 100 70% of the 80 bug reports correspond to % of Bug Reports inconsistencies 60 35% of the 40 inconsistencies are 20 cross-language - 25% of bug reports 0 AngularJS BackboneJS Ember.js All MVC Framework 29