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

▶
detec ng unknown inconsistencies in web applica ons
SMART_READER_LITE
LIVE PREVIEW

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

Feb 09, 2024 120 likes •484 views

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

slide-1
SLIDE 1

Detec%ng Unknown Inconsistencies in Web Applica%ons

Frolin Ocariza Jr. Karthik Pa:abiraman Ali Mesbah

1

slide-2
SLIDE 2

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

JavaScript

2

slide-3
SLIDE 3

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

3

JavaScript

slide-4
SLIDE 4

JavaScript: Challenges

4

JS has loose seman@cs

Lack of standard programming style Frequent cross- language interac@ons

slide-5
SLIDE 5

MVC Frameworks

  • Model-View-Controller for structuring code
  • Amenable to sta@c analysis – less dynamism

300% increase in AngularJS usage in 2015

5

slide-6
SLIDE 6

Our Earlier Work: Aurebesh [ICSE’15]

  • Aurebesh: Detects mismatches between

model, view, controller components in AngularJS code through Sta%c Analysis

MODEL VIEW CONTROLLER MODEL VARIABLES CONTROLLER FUNCTIONS DEFINES USES DEFINES USES USES

  • Aurebesh hard-codes rules for bug detec%on

– Name and type inconsistencies

6

slide-7
SLIDE 7

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

slide-8
SLIDE 8

Example Inconsistency

JavaScript Code HTML

8

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

slide-9
SLIDE 9

Main Insights

9

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

slide-10
SLIDE 10

Outline

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

10

slide-11
SLIDE 11

11

Our Approach

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

slide-12
SLIDE 12

12

Step 1: Transform AST and DOM into CodeTrees

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

Marionette.LayoutView.extend({ el: '.some-view', ... }); <div class=“some-region”> <p>Hello World</p> </div>

div Aeribute p class some-region AST DOM Object Property el

StringLiteral

CallExpression extend

some-view

slide-13
SLIDE 13

13

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

Step 2: Find Code Paeerns from Subtrees

Object Property el

StringLiteral

CallExpression extend

some-view

Object Property el

NumberLiteral

CallExpression extend

3

Object Property el

StringLiteral

CallExpression extend

some-view

ROOT …. …. ….

slide-14
SLIDE 14

14

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

Step 2: Find Code Paeerns from Subtrees

Object Property CallExpression Object Property CallExpression Object Property CallExpression ROOT …. …. …. “Abstract out” iden@fiers, literals, and string types

slide-15
SLIDE 15

15

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

Step 2: Find Code Paeerns from Subtrees

Object Property CallExpression Object Property CallExpression Object Property CallExpression ROOT …. …. …. Group together isomorphic subtrees

slide-16
SLIDE 16

16

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

Step 3: Infer Consistency Rules

INTRA-PATTERN CONSISTENCY RULE

Inconsistencies within pa,ern groups Object Property CallExpression Object Property CallExpression Object Property CallExpression Nodes are “concre@zed” one by one

slide-17
SLIDE 17

17

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

Step 3: Infer Consistency Rules

INTRA-PATTERN CONSISTENCY RULE

Inconsistencies within pa,ern groups Object Property CallExpression extend Object Property CallExpression extend Object Property CallExpression extend Nodes are “concre@zed” one by one

slide-18
SLIDE 18

18

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

Step 3: Infer Consistency Rules

INTRA-PATTERN CONSISTENCY RULE

Inconsistencies within pa,ern groups Object Property el CallExpression extend Object Property el CallExpression extend Object Property el CallExpression extend Nodes are “concre@zed” one by one

slide-19
SLIDE 19

19

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

Step 3: Infer Consistency Rules

INTRA-PATTERN CONSISTENCY RULE

Inconsistencies within pa,ern groups Object Property el

StringLiteral

CallExpression extend Object Property el

NumberLiteral

CallExpression extend Object Property el

StringLiteral

CallExpression extend Subtrees are par@@oned according to differences found while concre@zing

slide-20
SLIDE 20

20

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

Step 3: Infer Consistency Rules

INTRA-PATTERN CONSISTENCY RULE

Inconsistencies within pa,ern groups Object Property el

StringLiteral

CallExpression extend Object Property el

NumberLiteral

CallExpression extend Object Property el

StringLiteral

CallExpression extend Dominant paeerns are marked as intra-paeern consistency rules

slide-21
SLIDE 21

21

Step 4: Detect Rule Viola@ons

INTRA-PATTERN CONSISTENCY RULE

Inconsistencies within pa,ern groups Object Property el

StringLiteral

CallExpression extend Object Property el

NumberLiteral

CallExpression extend Object Property el

StringLiteral

CallExpression extend Subtrees that do not belong to dominant paeerns are marked as inconsistencies

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

22

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

Step 3: Infer Consistency Rules

LINK RULE

Inconsistencies between pa,ern groups Property el

StringLiteral some-view

Property el

StringLiteral some-region

Property el

StringLiteral layout

Code Paeern from JS

Aeribute class

some-region

Aeribute class

layout

Code Paeern from HTML

slide-23
SLIDE 23

23

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

Step 3: Infer Consistency Rules

LINK RULE

Inconsistencies between pa,ern groups Property el

StringLiteral some-view

Property el

StringLiteral some-region

Property el

StringLiteral layout

Code Paeern from JS

Aeribute class

some-region

Aeribute class

layout

Code Paeern from HTML

Dominant matches are marked as link rules

slide-24
SLIDE 24

24

Step 4: Detect Rule Viola@ons

LINK RULE

Inconsistencies between pa,ern groups Property el

StringLiteral some-view

Property el

StringLiteral some-region

Property el

StringLiteral layout

Code Paeern from JS

Aeribute class

some-region

Aeribute class

layout

Code Paeern from HTML

Subtrees not belonging to dominant match are marked as inconsistent

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

25

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

slide-26
SLIDE 26

Outline

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

26

slide-27
SLIDE 27

Research Ques@ons

27

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?

slide-28
SLIDE 28

28

Analyzed 90 GitHub bug reports (30 for each of three main MVC frameworks)

RQ1: Prevalence of Inconsistencies

slide-29
SLIDE 29

RQ1: Prevalence of Inconsistencies

29

AngularJS BackboneJS Ember.js All

Not Inconsistency Inconsistency MVC Framework % of Bug Reports 20 40 60 80 100

70% of the

bug reports correspond to inconsistencies

35% of the

inconsistencies are cross-language - 25% of bug reports

slide-30
SLIDE 30

30

1 2 3 4 5 6 7 Frequency Number of Categories 5 10 15 20 25 30

Most “inconsistency categories” appear

  • nly once in the bug reports we studied

Many consistency rules in MVC applica@ons

RQ1: Prevalence of Inconsistencies

slide-31
SLIDE 31

31

Ran Holocron on 12 real-world MVC applica%ons (4 for each framework) – different from those used in RQ1 Inspected each output by Holocron, and classified each as a bug, a code smell, or a false posi%ve

RQ2: Real Bugs and Code Smells

slide-32
SLIDE 32

RQ2: Real Bugs and Code Smells

32

18 unreported bugs (95 inconsistencies)

5 cross-language inconsistencies

33 code smells

Around 54% of the inconsistencies are either real bugs or code smells Took 1.14 minutes on average for each applica%on

slide-33
SLIDE 33

Outline

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

33

slide-34
SLIDE 34

Future Work

34

Smarter way of choosing code examples - fewer false posi@ves Extending Holocron to non-MVC web applica@ons

slide-35
SLIDE 35

Conclusion

  • Bugs and code smells ogen manifest as

inconsistencies in MVC web applica%ons

– Many are cross-language inconsistencies

  • Holocron can find bugs and code smells

without hardcoded consistency rules

– Found 18 unreported bugs (5 cross-language) – About 1 in 2 inconsistencies are bugs or smells

35

h:ps://github.com/karthikp-ubc/Holocron