Transcript Programmation du Web Diffus
Web Programming and Security
Lecture 1 Tamara Rezk
Web Applications
Network Servers Web Browsers
Distributed applications that run in a browser and distant servers
BROWSER
Web Applications = Multi-tiers applications
WEB SERVER Server code Client code Database DB MANAGEMENT SYSTEM
Web Evolution
2000 Web 2.0
1995 Dynamic web 1990 Static web
Complexity in Web 2.0 Apps
Generate Generate Data query code Server code
XHR API
Client code
DOM 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 Photo Editing Bank E-mail Service Social Network
Security problems
Availability violation Confidentiality violation Integrity 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
1990:
The static Web, Web 1.0
Info.cern.ch
First Browser called WorldWideWeb 14
Web 1.0 Applications
1990:
The static Web, Web 1.0
http://www.a.com
Apache HTTP Server
http://www.b.com
http://www.c.com
Web 1.0 Applications
1990:
The static Web, Web 1.0
http://www.a.com
http://www.a.com
Apache HTTP Server
http://www.b.com
http://www.c.com
Web 1.0 Applications
1990:
The static Web, Web 1.0
http://www.a.com
http://www.a.com
Apache HTTP Server
http://www.b.com
http://www.c.com
Web 1.0 Applications
1990:
The static Web, Web 1.0
http://www.a.com
http://www.a.com
Apache HTTP Server
http://www.b.com
http://www.c.com
Web 1.0 Applications
1990:
The static Web, Web 1.0
http://www.a.com
http://www.a.com
Apache HTTP Server
http://www.b.com
http://www.c.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!
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
1993:
The Web becomes less static
http://www.a.com
a.cgi
http://www.a.com/foo?var=v
http://www.b.com
b.cgi
http://www.c.com
c.cgi
Web 1.0 Applications
1993:
The Web becomes less static
http://www.a.com
a.cgi
http://www.a.com/foo?var=v
http://www.b.com
b.cgi
http://www.c.com
c.cgi
parameters
Web 1.0 Applications
1993:
The Web becomes less static
http://www.a.com
a.cgi
http://www.a.com/foo?var=v
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 http://validator.w3.org/ (W3C)
HTTP: Session Example http://www.buy.com
see catalog
http://www.buy.com
/shopping.cfm?pID=269 select item
http://www.buy.com
/shopping.cfm?pID=269&item=40002 buy item
http://www.buy.com
/checkout.cfm?pID=269&item=40002 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
Integrity violation: Dansie Shopping Cart (2006)
Why not to store sensitive information on the client side?
Let’s see the form in actionIntegrity violation: Dansie Shopping Cart (2006)
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.html
Cookie: NAME=VALUE
HTTP : COOKIES
• 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 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
SCRIPT SRC
Attack to GMail : January 2007
Google Docs list.
didn’t check what page requests your contact 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
1995:
Php, and Javascript is born
http://www.a.com
a.php
http://www.a.com/foo?var=v
http://www.b.com
b.cgi
Contains Javascript programs
http://www.c.com
c.cgi
Technologies: Web Browser, Web Server, HTTP , HTML CGI: Common Gateway Interface Javascript 45
Web 1.0 Applications
Php example
$name = “Hello World!"; ?>
First PHP program, !
let’s see how the generated page looks likeJavascript
• 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
External Javascript File
...
Inline Code
Please do not click on this text.
...
Event Handler All scripts will share the memory (see Example .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) xhr = new XMLHttpRequest(); // Standard object { // Firefox, Safari, ...
} else if (window.ActiveXObject) // Internet Explorer { xhr = new ActiveXObject("Microsoft.XMLHTTP"); }
XMLHTTPRequest
if (window.XMLHttpRequest) xhr = new XMLHttpRequest(); // Standard object { // 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
Javascript
x = new window.XMLHttpRequest() XHR 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") Thanks Shriram Krishnamurthi for this slide
DOM: Document Object Model
• and the DOM API
Document Tree Structure
document
#document
document.
documentElement
HTML HEAD
document.body
BODY H1 P H2 P Heading 1
Paragraph.
Heading 2
Paragraph.
#text #text #text #textChange color
child , sibling, parent
BODY
lastChild
H1 P #text #text H2 #text P #text
child , sibling , parent
BODY
lastChild nextSibling
H1
previousSibling
P
nextSibling previousSibling
H2
nextSibling previousSibling
P #text #text #text #text
child , sibling , parent
BODY
lastChild nextSibling
H1
previousSibling
P
nextSibling nextSibling previousSibling
H2
previousSibling
P #text #text #text #text
child , sibling , parent
BODY H1
nextSibling
P
nextSibling
H2
nextSibling
P #text #text #text #text
Walk the DOM
• Using recursion, follow the
firstChild
then the
nextSibling
nodes.
node, and
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
Event
• 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 Handlers
• Classic –
node
["on" +
type
] =
f
; • Microsoft –
node
.attachEvent("on" +
type
,
f
); •
W3C
–
node
.addEventListener(
type
,
f
, false);
Same origin Policy
JAVASCRIPT Access?
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"> alert(frames[0].contentDocument.body); //works fine < iframe src ="http://google.com"> alert(frames[0].contentDocument.body); //throws error What 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)
user: pass:
Guninski attack (permissive policy, 1999)
Other browser window/tab location = attacker citibankWindow.frames[0].
location = “https://attacker.com/login” SOP applies but attacker can navigate the login frame and replace it with its own code !
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
Navigation policies
Browser
IE 6 (default) IE 6 (option) IE7 (no Flash) IE7 (with Flash) Firefox 2 Safari 2 IE7 Firefox 3 Safari 3 HTML 5
Policy
Permissive Child Descendant Permissive Window Permissive Descendant Child Child Child