1. Web Programming and Security Lecture 1 Tamara Rezk

2. Web Applications Web Browsers Servers Network Distributed applications that run in a browser and distant servers

3. Web Applications = Multi-tiers applications Server code Database Client code BROWSER DB MANAGEMENT SYSTEM WEB SERVER

4. Web Evolution 1990 Static web 1995 Dynamic web 2000 Web 2.0

6. Complexity in Web 2.0 Apps Server codeClient codeData query code Generate DOM API XHR API Different programming languages; Multi-tier nature; Dynamic code generation How would my application behave? Thanks Zhengqin Luo for this slide

7. Importance of Protecting Web Apps Web applications everywhere in your life!!! Important Information –Identity –Financial situation –Social lives Security Requirements –Confidentiality –Integrity –Availability Bank Social Network E-mail Service Photo Editing

8. Security problems Confidentiality violation Integrity violation Availability violation

9. Availability security problems A service or resource is made unvailable

10. Integrity security problems Unauthorized modification of data (authenticity of data), and unauthorized execution of programs

11. Confidentiality problems Unauthorized disclosure of data

13. Tim Berners Lee

14. Web 1.0 Applications 14 Info.cern.ch 1990: The static Web, Web 1.0 First Browser called WorldWideWeb

15. Web 1.0 Applications Apache HTTP Server 1990: The static Web, Web 1.0 http://www.a.com http://www.b.com http://www.c.com

16. Web 1.0 Applications Apache HTTP Server http://www.a.com 1990: The static Web, Web 1.0 http://www.a.com http://www.b.com http://www.c.com

17. Web 1.0 Applications Apache HTTP Server http://www.a.com 1990: The static Web, Web 1.0 http://www.a.com http://www.b.com http://www.c.com

18. Web 1.0 Applications Apache HTTP Server http://www.a.com 1990: The static Web, Web 1.0 http://www.a.com http://www.b.com http://www.c.com

19. Web 1.0 Applications Apache HTTP Server http://www.a.com 1990: The static Web, Web 1.0 http://www.a.com http://www.b.com http://www.c.com Technologies: Web Server (first: CERN httpd) Web Browser (first: WorldWideWeb browser) Protocol : HTTP Language:

20. HTTP: HyperText Transfer Protocol Methods: GET, POST, PUT, DELETE … –GET: length limited, usually for requests, no side effects(not in practice) –POST: allows multiple requests, state-change, no cache –PUT: multiple idem requests as one request –DELETE: multiple idem requests as one request HTTP No State: request/response - each request is independent http_URL = "http:" "//" host [ ":" port ] [ abs_path [ "?" query ]] You can see headers with Firebug

21. HTTP: PRIVATE BROWSING? Method: GET, you can see the parameters in the URL. A possible solution:

22. Phishing attacks www.paypal.com www.payoak.szm.sk Be aware of URLs that are shown in the browser or links that are clicked!

23. Phishing attacks

24. Phishing attacks: also emails with false senders

25. And even this!

26. A phishing attack to MySpace In 2006, a worm altered links to direct MySpace users to evil websites

27. Phishing Solutions Use https (created in 1994 by Netscape) Verify carefully the URL Browsers may have “black”lists

29. Web 1.0 Applications http://www.a.com/foo?var=v 1993: The Web becomes less static http://www.a.com a.cgi http://www.b.com b.cgi http://www.c.com c.cgi

30. Web 1.0 Applications http://www.a.com/foo?var=v 1993: The Web becomes less static http://www.a.com a.cgi http://www.b.com b.cgi http://www.c.com c.cgi parameters

31. Web 1.0 Applications http://www.a.com/foo?var=v 1993: The Web becomes less static http://www.a.com a.cgi http://www.b.com b.cgi http://www.c.com c.cgi Technologies: Web Browser, Web Server, HTTP, HTML CGI: Common Gateway Interface 1994: World Wide Web Consortium (W3C)World Wide Web Consortium http://validator.w3.org/

32. HTTP: Session Example http://www.buy.com http://www.buy.com/shopping.cfm?pID=269 see catalog http://www.buy.com/shopping.cfm?pID=269&item=40002 select item http://www.buy.com/checkout.cfm?pID=269&item=40002 buy item Since HTTP is stateless all session information is saved in the URL BAD PRACTICE!! It is better to use cookies Thanks Ricardo Corin for this slide

33. Integrity violation: Dansie Shopping Cart (2006) <FORM METHOD=POST ACTION="http://www.dansie.net/cgi-bin/scripts/cart.pl"> Black Leather purse with leather straps Price: $20.00 <INPUT TYPE=HIDDEN NAME=custom1 VALUE="Black leather purse with leather straps"> Why not to store sensitive information on the client side? Let’s see the form in action

34. Integrity violation: Dansie Shopping Cart (2006) <FORM METHOD=POST ACTION="http://www.dansie.net/cgi-bin/scripts/cart.pl"> Black Leather purse with leather straps Price: $20.00 <INPUT TYPE=HIDDEN NAME=custom1 VALUE="Black leather purse with leather straps"> Why not to store sensitive information on the client side? it can be modified by the client at will! Security by obscurity is bad in general. HIDDEN FIELDS IS A BAD PRACTICE!! It is better to use cookies

35. HTTP : COOKIES A cookie resides in the disk and is created by the web browser

36. HTTP : COOKIES A cookie resides in the disk and is created by the web browser POST login.cgi (usr+pwd) HTTP Header: Set-cookie: NAME=VALUE ; domain = (who can read the cookie) ; expires = (when) ; … GET securepage.html Cookie: NAME=VALUE

37. HTPP does not have state, cookies add state Cookies are useful for: –Authenticacion to know if a user has authenticate in the past – Personalization recognize the user since last visit – Tracking analyze the behaviour of the user HTTP : COOKIES

38. Only the site that creates the cookie can read it

39. HTTP : COOKIES set-cookie(“amount”,$amount); Content-type:text/html Cookie: Amount = 20$ To make it secure it is necessary to add a “MAC” (message-authenticatedcode) to the amount: Cookie: Amount = 20$; HMAC(ServerKey, 20)

40. Cross site request forgery (CSRF or XSRF) Transmits unauthorized commands from a user who has rightfully logged in to a website to the website.

41. Some Attack Methods HTML Methods IMG SRC SCRIPT SRC IFRAME SRC JavaScript Methods 'Image' Object var foo = new Image(); foo.src = "http://host/?command";

42. Attack to GMail : January 2007 Google Docs didn’t check what page requests your contact list. If you are logged in on window 1, window 2 (an evil site) can make the function call and get the contact list as an object. Since you are logged in somewhere, your cookie is valid and the request goes through.

43. Prevention Server side: – add a secret that the attacker cannot guess – re-authenticate for critical operations User side: –logging off one site before using others

45. Web 1.0 Applications 45 http://www.a.com/foo?var=v 1995: Php, and Javascript is born http://www.a.com a.php http://www.b.com b.cgi http://www.c.com c.cgi Technologies: Web Browser, Web Server, HTTP, HTML CGI: Common Gateway Interface Javascript Contains Javascript programs

46. Web 1.0 Applications Php example <?php $name = “Hello World!"; ?> A simple PHP document First PHP program, ! let’s see how the generated page looks like

47. Javascript Execute code on the client side Intepreted language, dymamically typed ECMAScript standard

48. Syntax of Javascript is not weird, but its semantics sometimes is function fac(x) { if (x <= 1) { return 1; } return x*fac(x-1); } Let’s see it in Chrome

49. Embedding Javascript... //<![CDATA[ alert("Page is loading"); //]]> Please do not click on this text.... External Javascript File Inline Code Event Handler All scripts will share the memory (see Example.js)

50. Method Example var o = new Object(); o.count = 0; o.increment=function(inc) { if (inc == undefined) { inc = 1; } this.count += inc; return this.count; } Let’s inspect the object in Google Chrome

51. Prototypes function Rectangle(width, height) { this.width = width; this.height = height; } Rectangle.prototype.area = function() { return this.width*this.height; } r = new Rectangle(26, 14); a = r.area();

52. Scope function Foo() { var x; y = x; x =3 ; } function Bar() { y = x; x = x +1; } var y ; var x = 0; Foo(); Bar();

53. XMLHTTPRequest if (window.XMLHttpRequest) // Standard object { xhr = new XMLHttpRequest(); // Firefox, Safari,... } else if (window.ActiveXObject) // Internet Explorer { xhr = new ActiveXObject("Microsoft.XMLHTTP"); }

54. XMLHTTPRequest if (window.XMLHttpRequest) // Standard object { xhr = new XMLHttpRequest(); // Firefox, Safari,... } else if (window.ActiveXObject) // Internet Explorer { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } xhr.onreadystatechange = function() { // instructions to process the response }; xhr.open(“GET", url, true); xhr.send(null); setting a callback to send parameters: var params = "lorem=ipsum&name=binny";

55. Javascript An important object: the GLOBAL object An important property: window A Prototype chain (the root is Global) A Scope chain (the root is Global)

56. Javascript An important object: the GLOBAL object An important property: window A Prototype chain (the root is Global) A Scope chain (the root is Global) Let’s inspect the global object

57. Javascript https://www.destroyallsoftware.com/talks/wat See also: http://brownplt.github.com/2012/01/31/s5-wat.html

58. x = new window.XMLHttpRequest() Important JavaScript detail: o.f is treated as o["f"] window.XHR is window["XHR"] x = new window["XHR"]() x.open("POST", "/setPrivacy") x.send("sharing = PUBLIC") XHR Javascript Thanks Shriram Krishnamurthi for this slide

59. DOM: Document Object Model and the DOM API

60. Document Tree Structure document document.body document. documentElement

61. Change color function changeColor(newcolor) { elem = document.getElementById("para1"); elem.style.color = newcolor; }

62. child, sibling, parent

66. Walk the DOM Using recursion, follow the firstChild node, and then the nextSibling nodes. function walkTheDOM(node, func) { func(node); node = node.firstChild; while (node) { walkTheDOM(node, func); node = node.nextSibling; }

67. Manipulating Elements Old School if (my_image.complete) { my_image.src = superurl; } New School if (my_image.getAttribute('complete')) { my_image.setAttribute('src', superurl); }

68. Making Elements document.createElement(tagName) document.createTextNode(text) node.cloneNode() –Clone an individual element. node.cloneNode(true) –Clone an element and all of its descendents. The new nodes are not connected to the document.

69. Linking Elements node.appendChild(new) node.insertBefore(new, sibling) node.replaceChild(new, old) old.parentNode.replaceChild(new, old)

70. innerHTML All A browsers implement Microsoft's innerHTML property.

71. Events The browser has an event-driven, single- threaded, asynchronous programming model. Events are targeted to particular nodes. Events cause the invocation of event handler functions.

72. Event Handlers Classic –node["on" + type] = f; Microsoft –node.attachEvent("on" + type, f); W3C –node.addEventListener(type, f, false);

73. Same origin Policy Access? JAVASCRIPT DOM DEFENSE OBJECT

74. The same origin policy (SOP) The SOP prevents docs from one origin from using resources from a different origin. Same origin= protocol+port+host Resources: – cookies –DOM (HTML document tree) –remote calls

75. Frame isolation Other frames “cannot” access resources from other origins

76. Frame isolation Other frames cannot access resources from other origins Example: alert(frames[0].contentDocument.body); //works fine alert(frames[0].contentDocument.body); //throws error What happends with the global object?

77. Frame isolation Other frames cannot access resources from other origins Browsers implement a navigation policy that is allowed (changing.location attribute of frame) –permissive policy: Guninski attack on CitiBank –window policy: gadget hijacking attacks (igoogle+hotmail)

78. Guninski attack (permissive policy, 1999) Other browser window/tab location = attacker user: pass: SOP applies but attacker can navigate the login frame and replace it with its own code ! citibankWindow.frames[0]. location = “https://attacker.com/login”

79. Frame isolation Other frames cannot access resources from other origins Browsers implement a navigation policy that is allowed (changing.location attribute of frame) –permissive policy: Guninski attack on CitiBank –window policy: gadget hijacking attacks (igoogle+hotmail)

80. Gadget Hijacking top.frames[1].location = "http:/www.attacker.com/...“; top.frames[2].location = "http:/www.attacker.com/...“;...

81. Gadget Hijacking

82. Frame isolation Other frames cannot access resources from other origins Browsers implement a navigation policy that is allowed (changing.location attribute of frame) –permissive policy: Guninski attack on CitiBank –window policy: gadget hijacking attacks (igoogle+hotmail) –descendant policy –child policy

83. Navigation policies

84. BrowserPolicy IE 6 (default)Permissive IE 6 (option)Child IE7 (no Flash)Descendant IE7 (with Flash)Permissive Firefox 2Window Safari 2Permissive IE7Descendant Firefox 3Child Safari 3Child HTML 5Child Navigation policies