Software Analysis for the Web:Achievements and Prospects

Ali MesbahUniversity of British Columbia http://ece.ubc.ca/~amesbah/

2

Web Evolution Challenges

Achievements Prospects

STATIC WEBSITESFile ServerBrowser

HTML

HTTPRequest

ResponseHTMLHTMLHTMLHTML

Internet

HTML

DYNAMIC WEBSITESServerBrowser

HTML

HTTPRequest

Response

Internet

HTML

Generate HTML

RESTFUL WEBSITESStateless ServerBrowser

HTML

HTTPRequest

Response

Internet

HTML

Generate HTML

“Principled design of the modern Web architecture”, Fielding and Tylor, ICSE 2000

RICH INTERNET APPSServerBrowser

Flash

HTTPRequest

Response

Internet

Flash

GenerateFlash

RIA Plugin

MODERN WEB APPS Stateless ServerBrowser

Async HTTPRequest

Response

Internet

JSON

GenerateJSON

DOMCSS

JS

Web Apps

9

“writeonce,runanywhere”

Instantaneoussoftwaredelivery

Web-basedservicessuchasandhavechangedhowpeopledevelop

software

10

11

Web Evolution Challenges

Achievements Prospects

12

Challenges

Heterogeneous

Async Dynamic Interactions

Distributed Stateless

Event-driven

Stateless ServerBrowser

Async HTTPRequest

Response

Internet

JSON

JS, Java, PHP, Ruby,

etc

DOMCSS

JS

JavaScript:theDifficultParts

1. Dynamic and weakly-typed• types can change dynamically• objects/functions can change

• First-class functions2. Event-driven3. Asynchronous callbacks4. Prototype-based

• objects inherent from objects• can be redefined at runtime

5. Constructs such as eval 6. Interactions with DOM7. Interpreted (not compiled)8. …

Make Software Analysis Challenging

13

14

Web Evolution Challenges

Achievements Prospects

Industrial Achievements

Mocha

Esprima Rhino

jsHint

jsLint

QunitSelenium

Istanbul

Closure Compiler

Flow

Web Code Analysis• Static Analysis

• Points-to analysis (WALA)• Approximate call graphs • Data-flow analysis

• Dynamic Analysis • Code quality checking• Tracing and visualization• Unused code detection

Web Code Analysis• Static Analysis

• Points-to analysis • Approximate call graphs • Data-flow analysis

• Hybrid Analysis • Taint and blended analysis • Change impact analysis • Event-flow analysis

• Dynamic Analysis • Code quality checking • Tracing and visualization • Unused code detection

18

checkPrice()

XHR

updateItem()

suggestItem()

getUpdatedPrice() calculateTax()

addTaxToPrice()

Function XHR object DOM element Directed and labeled edge

Static analysis

Dynamic analysis

checkPrice()

XHR

updateItem()

suggestItem()

getUpdatedPrice() calculateTax()

#item231

#price-ca.price

displaySuggesCon()

Function XHR object DOM element Directed and labeled edge

Hybrid analysischeckPrice()

XHR

updateItem()

suggestItem()

getUpdatedPrice() calculateTax()

addTaxToPrice()

#item231

#price-ca.price

displaySuggesDon()

Function XHR object DOM element Directed and labeled edge

Web Code Testing

• Different types of testing• Cross-Browser testing• Deterministic capture/replay • Regression testing

• Test Adequecy• Guided mutation analysis• State-based coverage • Code coverage

• Test Generation• Event-based Crawling • Feedback-directed execution• (Dynamic) symbolic execution

22

State Coverage

23

24

Web Evolution Challenges

Achievements Prospects

Cross-Language Analysis

We don’t know how to infer proper control flow graphs for web code.

Stateless ServerBrowser

Async HTTPRequest

Response

Internet

JSON

JS, Java, PHP, Ruby,

etc

DOMCSS

JS

Cross-Language Program Slicing

Nguyen et al, FSE’14

Cross-Language Bug Detection

Ocariza et al, ICSE’15

Programmer Support in IDEs

• Code completion• Refactoring• Bug alerts• Smell detection

Web Programmer Support in IDEs

• Code completion• Refactoring• Bug alerts• Smell detection

Callback Hell

Refactoring to Promises

Test Case Maintenance

We need better: Web element locators

Repair techniques

Benchmarks for Comparison

33

SIR

Defect4J

BugBench?

DroidBench

Empirical Studies

Web analysis tools mainly built by reading best practices or through developer intuition and

anecdotal observation

Example: what are the most common cross-project bug patterns in web code?

Mining Repositories

Largely unexplored gold mines!

modules 250K

repositories 3.4M

developers 26K

������������

���������

��

�� ��

����������

��������

�������� �

������ �

��������

������

�������� �

������ �

�

�

�

�

�

��

MSR’13

Semi-automatic Learning

40

@Testpublic void testAddNote(){ get("http://localhost:8080/theorganizer/"); findElement(By.id("logon_username")). sendKeys("user"); findElement(By.id("logon_password")). sendKeys("pswd"); findElement(By. cssSelector("input type ="image"")).click(); assertEquals("Welcome to The Organizer!", closeAlertAndGetItsText()); findElement(By.id("newNote")). click(); findElement(By.id("noteCreateShow_subject")).sendKeys("Running Example"); findElement(By.id("noteCreateShow_text")).sendKeys("Create a simple running example"); findElement(By. cssSelector("input type ="image"")).click(); assertEquals("Note has been created.", findElement(By.id("mainContent")). getText()); findElement(By.id("logoff")).click();}

@Testpublic void testAddNote(){ get("http://localhost:8080/theorganizer/"); findElement(By.id("logon_username")). sendKeys("user"); findElement(By.id("logon_password")). sendKeys("pswd"); findElement(By. cssSelector("input type ="image"")).click(); assertEquals("Welcome to The Organizer!", closeAlertAndGetItsText()); findElement(By.id("newNote")). click(); findElement(By.id("noteCreateShow_subject")).sendKeys("Running Example"); findElement(By.id("noteCreateShow_text")).sendKeys("Create a simple running example"); findElement(By. cssSelector("input type ="image"")).click(); assertEquals("Note has been created.", findElement(By.id("mainContent")). getText()); findElement(By.id("logoff")).click();}

@Testpublic void testAddNote(){ get("http://localhost:8080/theorganizer/"); findElement(By.id("logon_username")). sendKeys("user"); findElement(By.id("logon_password")). sendKeys("pswd"); findElement(By. cssSelector("input type ="image"")).click(); assertEquals("Welcome to The Organizer!", closeAlertAndGetItsText()); findElement(By.id("newNote")). click(); findElement(By.id("noteCreateShow_subject")).sendKeys("Running Example"); findElement(By.id("noteCreateShow_text")).sendKeys("Create a simple running example"); findElement(By. cssSelector("input type ="image"")).click(); assertEquals("Note has been created.", findElement(By.id("mainContent")). getText()); findElement(By.id("logoff")).click();}

@Testpublic void testAddNote(){ get("http://localhost:8080/theorganizer/"); findElement(By.id("logon_username")). sendKeys("user"); findElement(By.id("logon_password")). sendKeys("pswd"); findElement(By. cssSelector("input type ="image"")).click(); assertEquals("Welcome to The Organizer!", closeAlertAndGetItsText()); findElement(By.id("newNote")). click(); findElement(By.id("noteCreateShow_subject")).sendKeys("Running Example"); findElement(By.id("noteCreateShow_text")).sendKeys("Create a simple running example"); findElement(By. cssSelector("input type ="image"")).click(); assertEquals("Note has been created.", findElement(By.id("mainContent")). getText()); findElement(By.id("logoff")).click();}

@Testpublic void testAddNote(){ get("http://localhost:8080/theorganizer/"); findElement(By.id("logon_username")). sendKeys("user"); findElement(By.id("logon_password")). sendKeys("pswd"); findElement(By. cssSelector("input type ="image"")).click(); assertEquals("Welcome to The Organizer!", closeAlertAndGetItsText()); findElement(By.id("newNote")). click(); findElement(By.id("noteCreateShow_subject")).sendKeys("Running Example"); findElement(By.id("noteCreateShow_text")).sendKeys("Create a simple running example"); findElement(By. cssSelector("input type ="image"")).click(); assertEquals("Note has been created.", findElement(By.id("mainContent")). getText()); findElement(By.id("logoff")).click();}

@Testpublic void testAddNote(){ get("http://localhost:8080/theorganizer/"); findElement(By.id("logon_username")). sendKeys("user"); findElement(By.id("logon_password")). sendKeys("pswd"); findElement(By. cssSelector("input type ="image"")).click(); assertEquals("Welcome to The Organizer!", closeAlertAndGetItsText()); findElement(By.id("newNote")). click(); findElement(By.id("noteCreateShow_subject")).sendKeys("Running Example"); findElement(By.id("noteCreateShow_text")).sendKeys("Create a simple running example"); findElement(By. cssSelector("input type ="image"")).click(); assertEquals("Note has been created.", findElement(By.id("mainContent")). getText()); findElement(By.id("logoff")).click();}

@Testpublic void testAddNote(){ get("http://localhost:8080/theorganizer/"); findElement(By.id("logon_username")). sendKeys("user"); findElement(By.id("logon_password")). sendKeys("pswd"); findElement(By. cssSelector("input type ="image"")).click(); assertEquals("Welcome to The Organizer!", closeAlertAndGetItsText()); findElement(By.id("newNote")). click(); findElement(By.id("noteCreateShow_subject")).sendKeys("Running Example"); findElement(By.id("noteCreateShow_text")).sendKeys("Create a simple running example"); findElement(By. cssSelector("input type ="image"")).click(); assertEquals("Note has been created.", findElement(By.id("mainContent")). getText()); findElement(By.id("logoff")).click();}

@Testpublic void testAddNote(){ get("http://localhost:8080/theorganizer/"); findElement(By.id("logon_username")). sendKeys("user"); findElement(By.id("logon_password")). sendKeys("pswd"); findElement(By. cssSelector("input type ="image"")).click(); assertEquals("Welcome to The Organizer!", closeAlertAndGetItsText()); findElement(By.id("newNote")). click(); findElement(By.id("noteCreateShow_subject")).sendKeys("Running Example"); findElement(By.id("noteCreateShow_text")).sendKeys("Create a simple running example"); findElement(By. cssSelector("input type ="image"")).click(); assertEquals("Note has been created.", findElement(By.id("mainContent")). getText()); findElement(By.id("logoff")).click();}

@Testpublic void testAddNote(){ get("http://localhost:8080/theorganizer/"); findElement(By.id("logon_username")). sendKeys("user"); findElement(By.id("logon_password")). sendKeys("pswd"); findElement(By. cssSelector("input type ="image"")).click(); assertEquals("Welcome to The Organizer!", closeAlertAndGetItsText()); findElement(By.id("newNote")). click(); findElement(By.id("noteCreateShow_subject")).sendKeys("Running Example"); findElement(By.id("noteCreateShow_text")).sendKeys("Create a simple running example"); findElement(By. cssSelector("input type ="image"")).click(); assertEquals("Note has been created.", findElement(By.id("mainContent")). getText()); findElement(By.id("logoff")).click();}

@Testpublic void testAddNote(){ get("http://localhost:8080/theorganizer/"); findElement(By.id("logon_username")). sendKeys("user"); findElement(By.id("logon_password")). sendKeys("pswd"); findElement(By. cssSelector("input type ="image"")).click(); assertEquals("Welcome to The Organizer!", closeAlertAndGetItsText()); findElement(By.id("newNote")). click(); findElement(By.id("noteCreateShow_subject")).sendKeys("Running Example"); findElement(By.id("noteCreateShow_text")).sendKeys("Create a simple running example"); findElement(By. cssSelector("input type ="image"")).click(); assertEquals("Note has been created.", findElement(By.id("mainContent")). getText()); findElement(By.id("logoff")).click();}

@Testpublic void testAddNote(){ get("http://localhost:8080/theorganizer/"); findElement(By.id("logon_username")). sendKeys("user"); findElement(By.id("logon_password")). sendKeys("pswd"); findElement(By. cssSelector("input type ="image"")).click(); assertEquals("Welcome to The Organizer!", closeAlertAndGetItsText()); findElement(By.id("newNote")). click(); findElement(By.id("noteCreateShow_subject")).sendKeys("Running Example"); findElement(By.id("noteCreateShow_text")).sendKeys("Create a simple running example"); findElement(By. cssSelector("input type ="image"")).click(); assertEquals("Note has been created.", findElement(By.id("mainContent")). getText()); findElement(By.id("logoff")).click();}

Learning AssertionsA classification problem:

• Is a web element important to be checked by an assertion?

Apply machine learning to train a classier• Features: position, size, page-rank, LinkNum, ChildNum, …

FROM MONOLITHIC APPS

Stateless ServerBrowser

Async HTTPRequest

Response

Internet

JSON

GenerateJSON

DOMCSS

JS

42

TO MICRO SERVICES

Micro ServicesBrowser

Restful HTTPRequest

Response

Internet

JSON

DOMCSS

JS

MicroService

MicroService

MicroService

MicroService

MicroService

MicroService

MicroService

MicroService

MicroService

MicroService

MicroService

MicroService

44

On the client Even in hardware! On the server

JavaScriptiseverywhere

45

“writeonce,runanywhere”

Instantaneoussoftwaredelivery

Anythingthatcanbewrittenasawebapp,willbewrittenasawebapp

(eventually)