Discovering UserDefined Event Handlers in Presence of Java

  • Slides: 30
Download presentation
Discovering User-Defined Event Handlers in Presence of Java. Script Libraries Shuai Wang, Wensheng Dou,

Discovering User-Defined Event Handlers in Presence of Java. Script Libraries Shuai Wang, Wensheng Dou, Chushu Gao, Jun Wei, Tao Huang Institute of Software Chinese Academy of Sciences 2021/3/9

Background – Web Applications p Multiple languages n HTML n Java. Script HTML <div

Background – Web Applications p Multiple languages n HTML n Java. Script HTML <div id=“parent”> <div id=“child”></div> Java. Script var parent = document. get. Element. By. Id(‘parent’); parent. add. Event. Listener(‘click’, click. DIV); p Event-driven View click. DIV child parent

Background – Java. Script Libraries p Java. Script libraries are widely used in web

Background – Java. Script Libraries p Java. Script libraries are widely used in web client side development Top million web sites n j. Query : 74% n Prototype : 5. 1% n Moo. Tools : 5. 5% n script. aculo. us : 4. 4% n Yahoo User Interface : 4. 2% n …… j. Query Prototype Moo. Tools script. aculo. us Yahoo User Interface Backbone. js Moment JS lodash Knockout. JS Enquire JS Others

Motivation – Running Example p The entry of a search engine p Java. Script

Motivation – Running Example p The entry of a search engine p Java. Script for event registration get. By. Id('submit'). add. Event. Listener(‘click’, search); $(document). on('click', '. keyword', search. Keyword);

Motivation – Running Example p The entry of a search engine click input#submit search

Motivation – Running Example p The entry of a search engine click input#submit search p Java. Script for event registration get. By. Id('submit'). add. Event. Listener(‘click’, search); $(document). on('click', '. keyword', search. Keyword); Chrome Developer Tools standard DOM API

Motivation – Running Example p The entry of a search engine click input#submit search

Motivation – Running Example p The entry of a search engine click input#submit search p Java. Script for event registration get. By. Id('submit'). add. Event. Listener(‘click’, search); $(document). on('click', '. keyword', search. Keyword); Chrome Developer Tools

Motivation – Running Example p The entry of a search engine click document anonymous

Motivation – Running Example p The entry of a search engine click document anonymous function p Java. Script for event registration get. By. Id('submit'). add. Event. Listener(‘click’, search); $(document). on('click', '. keyword', search. Keyword); Chrome Developer Tools j. Query API

Motivation – Running Example p The entry of a search engine click document anonymous

Motivation – Running Example p The entry of a search engine click document anonymous function p Java. Script for event registration get. By. Id('submit'). add. Event. Listener(‘click’, search); $(document). on('click', '. keyword', search. Keyword); Chrome Developer Tools y! r e u Q j y b Hidden

Goal p Discover user-defined event handlers in presence of Java. Script libraries Java. Script

Goal p Discover user-defined event handlers in presence of Java. Script libraries Java. Script for event registration $(document). on('click', '. keyword', search. Keyword); n Event type : click √ n DOM element : div. keyword n DOM element : document n Event handler : search. Keyword n Event handler : anonymous function ╳

Main Idea p Key Insight n User-defined event handlers act as same as standard

Main Idea p Key Insight n User-defined event handlers act as same as standard event handlers p Dynamic Analysis n Identify user-defined event handlers out of all executed functions. Executed functions dispatch(e); fix(e); filter(e); search. Keyword(); submit(); …… User-defined event handlers search. Keyword();

Standard Event Model p Event registration phase child. add. Event. Listener(‘click’, handler); Passed as

Standard Event Model p Event registration phase child. add. Event. Listener(‘click’, handler); Passed as a parameter Never invoked during registration trigger p Event handling phase event child handler click child Invoked by Browsers mouse. Event handler(mouse. Event); DOMEvent Type

DOM Event Delegation Model p Event registration phase Passed as a parameter Never invoked

DOM Event Delegation Model p Event registration phase Passed as a parameter Never invoked during registration trigger $(parent). on(‘click’, ‘child’, handler); // j. Query dispatcher parent invoke p Event handling phase event click child Invoked by fixed expressions defined in libraries Differences handler mouse. Event handler(mouse. Event); j. Query. Event Type

Overview <html> <head> <title>Web. </head> <body> …… </body> </html> Instrumented Web Page Registration Analysis

Overview <html> <head> <title>Web. </head> <body> …… </body> </html> Instrumented Web Page Registration Analysis Parameter Analysis Invocation Analysis Redundancy Reduction Event 1: click div. keyword search. Keyword Report

Registration Analysis p Functions passed as parameters to another function calls, and never invoked

Registration Analysis p Functions passed as parameters to another function calls, and never invoked during those function calls Java. Script code $(document). on(‘click’, ‘. keyword’, search. Keyword); on : function(type, selector, handler) { …… handlers. push( {selector: selector, handler: handler }); …… }

Registration Analysis p Functions passed as a parameter to another function call, and never

Registration Analysis p Functions passed as a parameter to another function call, and never invoked during that function call Java. Script code $(document). on(‘click’, ‘. keyword’, search. Keyword); on : function(type, selector, handler) { …… handlers. push( {selector: selector, handler: handler }); …… } search. Keyword n Passed as a parameter n Never invoked √

Registration Analysis p Functions passed as a parameter to another function call, and never

Registration Analysis p Functions passed as a parameter to another function call, and never invoked during that function call Java. Script code $(document). on(‘click’, ‘. keyword’, search. Keyword); on : function(type, selector, handler) { …… handlers. push( {selector: selector, handler: handler }); …… } search. Keyword n Passed as a parameter n Never invoked Ca a d i nd √ te √

Parameter Analysis p Functions receiving an event-type parameter Click Event trigger handler(e) n Standard

Parameter Analysis p Functions receiving an event-type parameter Click Event trigger handler(e) n Standard DOM API e : Mouse. Event n j. Query API e : j. Query. Event Check only type info doesn’t work

Parameter Analysis p Functions receiving an event-type parameter Click Event trigger handler(e) n Standard

Parameter Analysis p Functions receiving an event-type parameter Click Event trigger handler(e) n Standard DOM API e : Mouse. Event { alt. Key, bubbles, button, cancel. Bubble, cancelable, char. Code, client. X, client. Y, ctrl. Key, … } n j. Query API e : j. Query. Event { alt. Key, bubbles, button, cancelable, client. X, client. Y, ctrl. Key, data, …… }

Parameter Analysis p Functions receiving an event-type parameter Click Event trigger handler(e) e t

Parameter Analysis p Functions receiving an event-type parameter Click Event trigger handler(e) e t a did Can n Standard DOM API e : Mouse. Event { alt. Key, bubbles, button, cancel. Bubble, cancelable, char. Code, client. X, client. Y, ctrl. Key, data, … } n j. Query API e : j. Query. Event { alt. Key, bubbles, button, cancel. Bubble, cancelable, char. Code, client. X, client. Y, ctrl. Key, data, … }

Invocation Analysis p Multiple functions invoked by the same callsite expression Call. Sites handler.

Invocation Analysis p Multiple functions invoked by the same callsite expression Call. Sites handler. apply() Functions function click() { } ate d i d function Cansearch() { } add(i); function add(v) { } √ ╳

Redundancy Reduction p A user-defined event handler can be identified as being registered on

Redundancy Reduction p A user-defined event handler can be identified as being registered on the child elements View HTML <div id=“parent”> <div id=“child”></div> Java. Script $(document). on(‘click’, ‘parent’, click. DIV); click. DIV child parent click. DIV parent click child click. DIV child

Redundancy Reduction p A user-defined event handler can be identified as being registered on

Redundancy Reduction p A user-defined event handler can be identified as being registered on the child elements View HTML <div id=“parent”> <div id=“child”></div> Java. Script $(document). on(‘click’, ‘parent’, click. DIV); click. DIV child parent click. DIV parent click child click. DIV child c n a d n Redu y

Redundancy Reduction p A user-defined event handler can be identified as being registered on

Redundancy Reduction p A user-defined event handler can be identified as being registered on the child elements View HTML <div id=“parent”> <div id=“child”></div> Java. Script $(document). on(‘click’, ‘parent’, click. DIV); click. DIV child parent Discard the same event handlers identified on child elements

Evaluation p RQ 1: Is our approach accurate in detecting user-defined event handlers? (accuracy)

Evaluation p RQ 1: Is our approach accurate in detecting user-defined event handlers? (accuracy) p RQ 2: How quickly can our approach perform the user-defined event handler detection analysis? (efficiency) p RQ 3: What is the effect of our approach on detecting user-defined event handlers? (effect)

Evaluation p Subjects n 7 real-world web applications from Alexa Library No. DOM Elements

Evaluation p Subjects n 7 real-world web applications from Alexa Library No. DOM Elements Lines of Java. Script Code www. ask. com j. Query 261 8, 278 www. about. com j. Query 4, 473 36, 291 www. chess. com j. Query 549 27, 733 Prototype 640 18, 248 YUI 261 3, 056 www. mid-day. com j. Query 1, 973 39, 636 www. zoominfo. com j. Query 645 19, 355 Benchmark www. fool. com www. wordreference. com

RQ 1: Accuracy p Total : precision 100%, recall 99. 8% No. Actual User-

RQ 1: Accuracy p Total : precision 100%, recall 99. 8% No. Actual User- No. Found User. No. Correct Defined Event User-Defined Precision Handlers Event Handlers Benchmark www. ask. com Recall 9 9 9 100% www. about. com 199 199 100% www. chess. com 2 2 2 100% www. fool. com 6 6 6 100% www. wordreference. com 6 6 6 100% www. mid-day. com 235 235 100% ww. zoominfo. com 1 0 0 - 0% 458 457 100% 99. 8% Total

RQ 2: Efficiency p Time : 1. 1 s ~ 566. 4 s Library

RQ 2: Efficiency p Time : 1. 1 s ~ 566. 4 s Library No. DOM Elements Lines of Java. Script Code Time(s) www. ask. com j. Query 261 8, 278 4. 8 www. about. com j. Query 4, 473 36, 291 154. 9 www. chess. com j. Query 549 27, 733 22. 2 Prototype 640 18, 248 14. 1 YUI 261 3, 056 1. 1 www. mid-day. com j. Query 1, 973 39, 636 566. 4 www. zoominfo. com j. Query 645 19, 355 38. 6 Benchmark www. fool. com www. wordreference. com

RQ 3: Effect p User-defined event handlers: 133 / 5, 299, total 2. 5%

RQ 3: Effect p User-defined event handlers: 133 / 5, 299, total 2. 5% No. User-Defined Event Handlers (NH) No. User-Defined Functions (NU) NH/NU www. ask. com 9 166 7. 8% www. about. com 28 1, 480 1. 9% www. chess. com 2 1, 065 0. 2% www. fool. com 6 363 1. 7% www. wordreference. com 6 42 14. 3% www. mid-day. com 82 2, 233 2. 7% www. zoominfo. com - - - 133 5, 299 2. 5% Benchmark Total

Conclusion 100 % $(document). on('click', '. keyword', search. Keyword); ╳ 99. 8 % anonymous

Conclusion 100 % $(document). on('click', '. keyword', search. Keyword); ╳ 99. 8 % anonymous function trigger parent dispatcher invoke event child handler

Questions? Thank you!

Questions? Thank you!

How Food Handlers Can Contaminate Food handlers canHow Food Handlers Can Contaminate Food handlers can
Material Handlers MMPM300 Material Handlers MMPMFacilities300 1 IntroductionMaterial Handlers MMPM300 Material Handlers MMPMFacilities300 1 Introduction
Exposed Food Handlers Diagnosed Food Handlers Notification ResponsibilitiesExposed Food Handlers Diagnosed Food Handlers Notification Responsibilities
How Food Handlers Can Contaminate Food handlers canHow Food Handlers Can Contaminate Food handlers can
How Food Handlers Can Contaminate Food handlers canHow Food Handlers Can Contaminate Food handlers can
Understanding UserDefined Depreciation Concept Understanding UserDefined Depreciation UnderstandingUnderstanding UserDefined Depreciation Concept Understanding UserDefined Depreciation Understanding
Chapter 5 METHODS USERDEFINED METHODS userdefined 2 WeChapter 5 METHODS USERDEFINED METHODS userdefined 2 We
USERDEFINED METHODS void CS 1301 Outline 1 UserdefinedUSERDEFINED METHODS void CS 1301 Outline 1 Userdefined
Virtual Environments Week 9 Seminar Presence Presence PresenceVirtual Environments Week 9 Seminar Presence Presence Presence
Cognitive Presence Social Presence Teaching Presence Garrison AndersonCognitive Presence Social Presence Teaching Presence Garrison Anderson
Lesson 2 Event Handling Object Event Handlers MostLesson 2 Event Handling Object Event Handlers Most
Event Handlers IList Event Sink NET assemblies WebEvent Handlers IList Event Sink NET assemblies Web
Java Script Processing HTML Forms Event Handlers BeginsJava Script Processing HTML Forms Event Handlers Begins
Java Script Events Oldstyle Event Handlers body onloadwelcomeJava Script Events Oldstyle Event Handlers body onloadwelcome
Java Script Part IV Event Handlers Images WindowJava Script Part IV Event Handlers Images Window
SPORT EVENT SPORT EVENT Single event Multi EventSPORT EVENT SPORT EVENT Single event Multi Event
AWT Event Model Java Event Model 1 EventAWT Event Model Java Event Model 1 Event
Global asa v Event handlers ApplicationOn Start vGlobal asa v Event handlers ApplicationOn Start v
Async void is only for toplevel event handlersAsync void is only for toplevel event handlers
WEBPROG MIDTERM Lecture 3 EVENT HANDLERS AND LISTENERSWEBPROG MIDTERM Lecture 3 EVENT HANDLERS AND LISTENERS
Async void is only for toplevel event handlersAsync void is only for toplevel event handlers
Procedures Event Handlers Murach Chapter 6 Murachs VisualProcedures Event Handlers Murach Chapter 6 Murachs Visual
CSC 160 Chapter 7 Events and Event HandlersCSC 160 Chapter 7 Events and Event Handlers
java util java lang java io java langjava util java lang java io java lang