web programming and security lecture 1 tamara rezk

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


Apache HTTP Server



Apache HTTP Server

http://www.a.com



Apache HTTP Server

http://www.a.com


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!

http://www.payoak.szm.sk/

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


http://www.a.com/foo?var=v

1993: The Web becomes less static




parameters




Technologies: Web Browser, Web Server,HTTP , HTMLCGI: Common Gateway Interface

1994: World Wide Web Consortium (W3C)http://validator.w3.org/

http://en.wikipedia.org/wiki/World_Wide_Web_Consortium

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


45


1995: Php, and Javascript is born

Technologies: Web Browser, Web Server,HTTP , HTMLCGI: Common Gateway InterfaceJavascript

Contains Javascript programs


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


#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


#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


previousSibling previousSibling previousSibling

pare

ntN

ode

pare

ntN

ode

pare

ntN

ode

pare

ntN

ode

pare

ntN

ode

H2P P

BODY


#text

H1 H2P

BODY

#text

P

#text#text

first

Chi

ld

first

Chi

ld

first

Chi

ld

first

Chi

ld

first

Chi

ld


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:

<iframe src="sameDomainPage.html"> </iframe>

alert(frames[0].contentDocument.body); //works fine



<iframe src="http://google.com"> </iframe>

alert(frames[0].contentDocument.body); //throws errorWhat happends with the global object?

Frame isolation


• 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




Gadget Hijacking

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

...

Gadget Hijacking

Frame isolation




– 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

web programming and security lecture 1 tamara rezk

Documents

static web

web programming

web appsweb applications

http language

itemsince http

session example http

multiple requests

multiple idem requests