Practical AJAX Race Detection For JavaScript Web Applications - - PowerPoint PPT Presentation

▶

Mar 13, 2024 170 likes •431 views

Practical AJAX Race Detection For JavaScript Web Applications Christoffer Quist Adamsen, Anders Mller, Saba Alimadadi, Frank Tip saba@northeastern.edu J ava S cript 69.8 323,938 222,852 45.3 JS Java JS Java popularity % active

SLIDE 1

Practical AJAX Race Detection For JavaScript Web Applications

Christoffer Quist Adamsen, Anders Møller, Saba Alimadadi, Frank Tip

saba@northeastern.edu

SLIDE 2

JS Java

222,852 323,938

JavaScript

JS Java

45.3 69.8

popularity % active repositories

SLIDE 3

function addRemoveFilter (fId) { filters = toggleFilter(fId); url = createUrl(server, filters); $.ajax({ url: url, success: updateStationData }); }

Diesel Car Wash simplified and modified example from chevronwithtechron.com

client server

request response request response

car wash car wash car wash, diesel car wash, diesel

click click

SLIDE 4

function addRemoveFilter (fId) { filters = toggleFilter(fId); url = createUrl(server, filters); $.ajax({ url: url, success: updateStationData }); }

Diesel Car Wash simplified and modified example from chevronwithtechron.com

client server

request response request response

car wash car wash car wash, diesel car wash, diesel

click click

client server

request response request response

car wash car wash car wash, diesel car wash, diesel

SLIDE 5

function addRemoveFilter (fId) { filters = toggleFilter(fId); url = createUrl(server, filters); $.ajax({ url: url, success: updateStationData }); }

Diesel Car Wash simplified and modified example from chevronwithtechron.com

client server

request response request response

car wash car wash car wash, diesel car wash, diesel

click click

client server

request response request response

car wash car wash car wash, diesel car wash, diesel

client server

request response request response

car wash car wash car wash, diesel car wash, diesel

SLIDE 6

Event Races

SLIDE 7

Event Races

Zheng et al., 2011 Petrov et al., 2012 Raychev et al., 2013 Hong et al., 2014 Jensen et al., 2015 Mutlu et al., 2015 Wang et al., 2016 Zhang & Wang, 2017 Adamsen et al., 2017a, 2017b

SLIDE 8

detecting harmful races reducing benign warnings providing helpful reports performance and practicality

SLIDE 9

AXRacer J J A

SLIDE 10

1. Generating event graphs
2. Testing potential conflicts

application user events event races

AXRacer J A J

SLIDE 11

1. Generating event graphs
2. Testing potential conflicts

Instrument automatically Trigger user events Generate event traces Create event graphs Find event conflicts

application user events

AXRacer J A J

SLIDE 12

1. Generating event graphs
2. Testing potential conflicts

Instrument automatically Trigger user events Generate event traces Create event graphs Find event conflicts

application user events

AXRacer J A J

SLIDE 13

1. Generating event graphs
2. Testing potential conflicts

Instrument automatically Trigger user events Generate event traces Create event graphs Find event conflicts

application user events

v1 v2 v3 response received response loaded happens before click (x, y, w, h) (x’, y’, w’, h’)

AXRacer J A J

SLIDE 14

1. Generating event graphs
2. Testing potential conflicts

Instrument automatically Trigger user events Generate event traces Create event graphs Find event conflicts

v1 v3 (x, y, w, h) (x’, y’, w’, h’)

AXRacer J A J

application user events

SLIDE 15

1. Generating event graphs
2. Testing potential conflicts

potentially conflicted events event races

synchronous mode adverse mode

v v’s consequences w w’s consequences v v’s consequences w w’s consequences

AXRacer J A J

hi bye

SLIDE 16

Does help us find and understand

AXRacer J J A

AX A J J

races?

SLIDE 17

12 web applications, 20 pages

SLIDE 18

effectiveness

7 65 80

Pass Fail False Positive

152 tests

SLIDE 19

false positives

7 65 80

Pass Fail False Positive

152 tests

effectiveness

SLIDE 20

7 65 80

Pass Fail False Positive

152 tests dataset queries interactive maps auto completion

race characteristics

effectiveness

SLIDE 21

comparison

7 65 80

Pass Fail False Positive

https://eventracer.org/

EventRacer*

Raychev et al. OOPSLA’13

2 events ~130,000 races ~37,000 locations ~740 uncovered

152 tests

SLIDE 22

usefulness

SLIDE 23

performance

phase 1 phase 2 (per test)

duration (s)

8 18

avg: 26s page load execution

duration (s)

5 28 36

avg: 69s page load execution report

SLIDE 24

common developer practices

SLIDE 25

https://github.com/cs-au-dk/ajaxracer

@saba_a