1. Cutting Edge Research in Engineering of Web Applications Part 2 What is Different about Engineering Web Apps? Jeff Offutt Professor of Software Engineering George Mason University http://www.cs.gmu.edu/~offutt/ offutt@gmu.edu

2. A. Who am I ? B. Who are you ? Outline July 2013© J Offutt2 Part1 (13:00-15:00) 1. Web Apps Overview 2. How the Interweb Works 3. Web Software (Servlets) Part 2 (19:00-21:00) 4. Control Flow & State Handling is Different 5. State Handling in JSP Part 3 (Friday13:00-15:00) 6. Web Software Security 7. Modeling Web Apps 8. Testing Web Apps 9. Engineering Process

3. July 2013© J Offutt3 Tracking State Information D1 D1+D2+D3 Form1Form2Form3 Server Form4 Server D1+D2 D1+D2+D3+D4D1 Server D1+D2D1+D2+D3 The initial versions of the web suffered from a lack of state: HTML Form Server HTML Page DataInfo If you wanted multiple screens, there was no way for data to be accumulated or stored

4. July 2013© J Offutt4 Session Tracking Web applications must maintain user statesWeb applications must maintain user states This is called session trackingThis is called session tracking

5. Session Tracking (2) Session tracking refers to keeping data between multiple HTTP requestsSession tracking refers to keeping data between multiple HTTP requests This problem is essential to maintaining state, which we understand quite well in the context of traditional procedural programming and object-oriented programmingThis problem is essential to maintaining state, which we understand quite well in the context of traditional procedural programming and object-oriented programming The Web brings in unique constraintsThe Web brings in unique constraints July 2013© J Offutt5 Session: A series of related interactions between a client and a web server (similar to a use case) HTTP is connectionless Distributed

6. New Control Flow and State Handling July 2013© J Offutt6 To support session handling (and other issues) J2EE introduced new language mechanisms 1.New control flow mechanisms 2.New state management. 3.New variable scopes.

7. Traditional Control Flow Procedural languagesProcedural languages –Method / function calls –Decisions – if, while, for, repeat-until, switch, … –Static includes – other code pulled in before compiling OO languagesOO languages –Dynamic binding via polymorphism Client / ServerClient / Server –Message passing July 2013© J Offutt7

8. Web App Control Flow (1) Traditional Control Flow Mechanisms 1.Same as traditional – Software on server and client 2.Synchronous message passing – Client to server, HTTP –Also server to other servers 3.Event handling – On the client July 2013© J Offutt8

9. Web App Control Flow (2) New Control Flow Mechanisms 4.Asynchronous message passing – Client to server, Ajax 5.Forward – Transfers control from one server component to another, no return 6.Redirect – Ask client to send request elsewhere 7.URL rewriting by users 8.Dynamic include – Control passes to another component, then returns, no parameters 9.Dynamic binding – Reflection allows new components to be added and used dynamically July 2013© J Offutt9

10. Ramifications of New Control Flow The traditional control flow graph does not model essential parts of web app execution !The traditional control flow graph does not model essential parts of web app execution ! UML diagrams do not model many of theseUML diagrams do not model many of these Most developers learn the syntax, but not the concepts behind these new control connectionsMost developers learn the syntax, but not the concepts behind these new control connections July 2013© J Offutt10 Lots of poorly designed software … and lots and lots of poorly understood software faults !

11. New Control Flow and State Handling July 2013© J Offutt11 To support session handling (and other issues) J2EE introduced new language mechanisms 1.New control flow mechanisms 2.New state management. 3.New variable scopes.

12. Handling State in Procedural Languages The C programming language has simple ways to handle stateThe C programming language has simple ways to handle state July 2013© J Offutt12 char name [25]; main () { int x, y, z;. : Global variable Local variables We added several layers of scope in OO languages

13. State in Object-Oriented Languages In addition to local and global variables, OO languages have other scopesIn addition to local and global variables, OO languages have other scopes –Nonlocals : package, protected, default, … Data sharing in OO languagesData sharing in OO languages –Two components can share data if they are in the same scope –Two components can share data by passing parameters OO languages also are based on the concept of objects, which are instances of classesOO languages also are based on the concept of objects, which are instances of classes –Classes define types, which are global –Objects can be defined at multiple scopes July 2013© J Offutt13

14. © J Offutt14 Class 4 Handling State in Java Class 1 inheritance Class 3Class 2 Package Class 5 private membersdefaultprotected memberspublic members July 2013

15. State on the Web These schemes have two simple, subtle, assumptions :These schemes have two simple, subtle, assumptions : July 2013© J Offutt15 1. The software components share physical memory 2. The program runs to completion with active memory But these assumptions are violated in web applications ! 1.Distributed software components 2.Connectionless nature of HTTP To keep state in web applications, we need different ways to store and access variables and objects Public access and parameter passing are not enough in Web applications!

16. State and Session Tracking Session tracking refers to passing data from one HTTP request to anotherSession tracking refers to passing data from one HTTP request to another A web application is comprised of several software componentsA web application is comprised of several software components The characteristics of a Web app means that the components do not communicate directlyThe characteristics of a Web app means that the components do not communicate directly –Independent processes (threads) –Connectionless protocol –Client-server or N-tier architecture –Execution flow always goes through a client July 2013© J Offutt16 How can these independent components share data?

17. Session Tracking Methods 1. Include data as extra parameters (URL rewriting) 2. Hidden form fields 3. Cookies 4. Servlet API session tracking tools July 2013© J Offutt17 Request with a Token Client C Server S Response with a Token All four methods work by exchanging a token between the client and server

18. July 2013© J Offutt18 (1) URL Rewriting Forms usually add parametersForms usually add parameters URL ? P1=v1 & P2=v2 & P3=v3 & … URL ? P1=v1 & P2=v2 & P3=v3 & … You can add values in the URL as a parameter :You can add values in the URL as a parameter : HREF = "./servlet/X ? SneakyParam=42"> HREF = "./servlet/X ? SneakyParam=42"> or : User=george" > or : User=george" > This is used as a key to find the saved information about the user georgeThis is used as a key to find the saved information about the user george –Messy and clumsy –Long URLs –Information on URL is public –All HTML pages must be created dynamically –Often limited in size

19. (2) Hidden Form Fields Flows of control go through the clientFlows of control go through the client Data that must be passed from one software component to another can be stored in hidden form fields in the HTMLData that must be passed from one software component to another can be stored in hidden form fields in the HTML Generate HTML pages with forms that store “hidden” information :Generate HTML pages with forms that store “hidden” information : Several problems :Several problems : – Insecure – users can see the data – Unreliable – users can change the data – Undependable – users can use the back button, direct URL entry, and URL rewriting to skip some hidden form fields Still useful in limited situationsStill useful in limited situations July 2013© J Offutt19

20. July 2013© J Offutt20 (3) Cookies Cookies are small files or text strings stored on the client’s computerCookies are small files or text strings stored on the client’s computer Created by the web browserCreated by the web browser Arbitrary strings, but sometimes var=value pairs or XMLArbitrary strings, but sometimes var=value pairs or XML Java coding : Java coding : Cookie c = new Cookie (“user”, “george”); Cookie c = new Cookie (“user”, “george”); c.setMaxAge (5*24*60*60); // expires in 5 days, in seconds c.setMaxAge (5*24*60*60); // expires in 5 days, in seconds response.addCookie (c); // sends cookie to client response.addCookie (c); // sends cookie to client

21. July 2013© J Offutt21 (3) Cookies – cont. Cookies are very useful and simpleCookies are very useful and simple Not visible as part of the HTML contentNot visible as part of the HTML content Convenient way to solve a real problemConvenient way to solve a real problem But cookies are scary !But cookies are scary ! –It’s as if I stored my files at your house –Cookies go way beyond session tracking –Cookies allow behavior tracking

22. July 2013© J Offutt22 (4) Servlet Sessions Cookies are handled automaticallyCookies are handled automatically HttpSession stores data in the current active objectHttpSession stores data in the current active object Data disappears when the object is destroyedData disappears when the object is destroyed Object is destroyed after the session ends, usually 30 minutes after the last requestObject is destroyed after the session ends, usually 30 minutes after the last request The servlet API uses cookies to provide a simple, safe, flexible method for session tracking

23. Sessions—Big Picture July 2013© J Offutt23 Web Server Client 1 Time HTTP Request HTTP Response Session ID = 0347 HTTP Request HTTP Response HTTP Request HTTP Response Session ID = 0347 Time Client 2 HTTP Request HTTP Response Session ID = 4403 HTTP Request HTTP Response HTTP Request HTTP Response Session ID = 4403 Session ID = 0347 Session ID = 4403 Server returns a new unique session ID when the request has none

24. Session ID = 4403 Sessions—Big Picture July 2013© J Offutt24 Web Server Client 1 Time HTTP Request HTTP Response Session ID = 0347 HTTP Request HTTP Response HTTP Request HTTP Response Session ID = 0347 Time Client 2 HTTP Request HTTP Response Session ID = 4403 HTTP Request HTTP Response HTTP Request HTTP Response Session ID = 4403 Client stores the ID and sends it to the server in subsequent requests Session ID = 0347 Server recognizes all the requests as being from the same client. session This defines a session. Server recognizes these requests as being from a different client.

25. July 2013© J Offutt25 Servlet API Session Methods The servlet API methods are not synchronizedThe servlet API methods are not synchronized Multiple servlets can access the same session object at the same timeMultiple servlets can access the same session object at the same time If this can happen, the program must synchronize the code that modifies the shared session attributesIf this can happen, the program must synchronize the code that modifies the shared session attributes

26. July 2013© J Offutt26 Session Definition The web serverThe web server –Servlet container –Servlet context The clientThe client –IP address –Browser Session objects are kept on the serverSession objects are kept on the server Each session object uses different parts of memory (instances of data values) on the serverEach session object uses different parts of memory (instances of data values) on the server A session is defined by

27. July 2013© J Offutt27 Example Client Servlet S1 JSP 3JSP 2JSP 1 Consider a small Web app with 2 servlets and 3 JSPs Servlet S2 How can the servlets and JSPs share data?

28. New Control Flow and State Handling July 2013© J Offutt28 To support session handling (and other issues) J2EE introduced new language mechanisms 1.New control flow mechanisms 2.New state management. 3.New variable scopes.

29. July 2013© J Offutt29 Sharing Data : Session Object One program component can store a value in the session objectOne program component can store a value in the session object Another component can retrieve, use, and modify the valueAnother component can retrieve, use, and modify the value Depends on the servlet container :Depends on the servlet container : –Software components are threads, not processes –Servlet container stays resident and can keep shared memory

30. July 2013© J Offutt30 Session objectServletContainer Session Data Example Client Servlet S1 JSP 3JSP 2JSP 1 Software components share “container” access data Servlet S2

31. July 2013© J Offutt31 Login Example LoginForm Entry View Data isLoggedIn: T/F userID: string 2. Check isLoggedIn 4. Set isLoggedIn true and set userID 6. Check isLoggedIn 7. if isLoggedIn false 3. if isLoggedIn false 1. User request 5. User request

32. Session and Context Scopes The session object is available to software components in the same request and sessionThe session object is available to software components in the same request and session –They have access to the session ID –This is called session scope Sometimes we need a wider scopeSometimes we need a wider scope –Chat rooms : Allow multiple users to interact –Group collaboration : Online meeting –Online bidding –Reservation systems J2EE also defines a context scopeJ2EE also defines a context scope July 2013© J Offutt32 This allows us to share data among multiple users

33. Context Scope July 2013© J Offutt33 session object 1 Container Engine Servlet S1 JSP 3JSP 2JSP 1 Servlet S2 context object Session 1 Context (application) session object 2 Session 2

34. July 2013© J Offutt34 Session and Context Scope Examples Compare attributeServlet and servletContext examples http://cs.gmu.edu:8080/offutt/servlet/attributeServlet http://cs.gmu.edu:8080/offutt/servlet/servletContext Try them in different browsers Compare the differences

35. Control Flow & State Summary Managing state is fundamental to any program Managing state is fundamental to any program Managing state is the most unique aspect of designing and programming web applications Managing state is the most unique aspect of designing and programming web applications Software vendors are creating new frameworks all the time Software vendors are creating new frameworks all the time – Most of them introduce additional state handling techniques Many professional developers make fundamental mistakes with managing state Many professional developers make fundamental mistakes with managing state July 2013© J Offutt35 State management is the most common source of software faults in web applications

36. A. Who am I ? B. Who are you ? Outline July 2013© J Offutt36 Part1 (13:00-15:00) 1. Web Apps Overview 2. How the Interweb Works 3. Web Software (Servlets) Part 2 (19:00-21:00) 4. Control Flow & State Handling is Different 5. State Handling in JSP Part 3 (Friday13:00-15:00) 6. Web Software Security 7. Modeling Web Apps 8. Testing Web Apps 9. Engineering Process

37. Java Server Pages A JSP is a scripted page that mixes programming statements into HTMLA JSP is a scripted page that mixes programming statements into HTML JSP scriptlets:JSP scriptlets: –Have a Java-like syntax –Can use external objects and call methods –Can process form data JSPs are translated to Java servlets, then compiledJSPs are translated to Java servlets, then compiled The help separate presentation from dataThe help separate presentation from data July 2013© J Offutt37

38. JSP Scope & State M anagement JSPs formalize this with four separate scopesJSPs formalize this with four separate scopes 1. Page : Within the same program component (web page) 2. Request : Within the same request 3. Session : Within all requests from the same session 4. Application : Within all sessions for one servlet context Each can be accessed by different sets of program componentsEach can be accessed by different sets of program components Some exist for different periods of timeSome exist for different periods of time July 2013© J Offutt38 http://cs.gmu.edu:8080/offutt/jsp/642/counterScope.jsp

39. July 2013© J Offutt39 application page session Sharing Data with Scope request forward request Client 1Client 2 page request

40. Web Apps State Summary Programmers often get state management wrongProgrammers often get state management wrong –They learned “how” without learning “why” (the theory) –They don’t understand the differences in the various scopes –They forget to consider which scope to use as part of design State management is very different from traditional programmingState management is very different from traditional programming These scopes are quite powerfulThese scopes are quite powerful New frameworks beyond J2EE often add different scopes or different semantics on the same scopesNew frameworks beyond J2EE often add different scopes or different semantics on the same scopes July 2013© J Offutt40 http://cs.gmu.edu/~offutt/classes/642/examples/jsp/