COMP 3825 Networking and Information Assurancekanyang/COMP3825/Lecture 5 Network Appli… ·...

2/5/20

1

COMP 3825 Networking and Information Assurance

Network Applications: Principles, Web and Http

1COMP 3825 - Kan Yang

1

Some network apps


2

Learning Objectives

Principles of Network Applications1. Application Architecture2. Transport Service Requirements3. Process Communicating and Addressing

Network Application: Web and Http1. Web and Http2. How browser renders a page3. Cookies


3

Creating a network appwrite programs that:• run on (different) end systems• communicate over network• e.g., web server software communicates with

browser software

no need to write software for network-core devices• network-core devices do not run user

applications • applications on end systems allows for rapid app

development, propagation

applicationtransportnetworkdata linkphysical




4

2/5/20

2

Application architectures

client-server structure peer-to-peer (P2P) structure


5

Client-server architectureserver: • always-on host• permanent IP address• data centers for scaling

clients:• communicate with server• may be intermittently connected• may have dynamic IP addresses• do not communicate directly with each otherclient/server

Examples: – Web and Http– Email – DNS

This Lecture

Lecture 6

2-6COMP 3825 - Kan Yang

6

P2P architecture• no always-on server• arbitrary end systems directly

communicate• peers request service from other peers,

provide service in return to other peers– self scalability – new peers bring new

service capacity, as well as new service demands

• peers are intermittently connected and change IP addresses– complex management

• Example: BitTorrent

peer-peer


7

tracker: tracks peers participating in torrent

torrent: group of peers exchanging chunks of a file

Alice arrives …

§ file divided into 256Kb chunks§ peers in torrent send/receive file chunks

… obtains listof peers from tracker… and begins exchanging file chunks with peers in torrent

P2P file distribution: BitTorrent


8

2/5/20

3

§ peer joining torrent: – has no chunks, but will accumulate them over time from other peers– registers with tracker to get list of peers, connects to subset of peers

(“neighbors”)

§ while downloading, peer uploads chunks to other peers§ peer may change peers with whom it exchanges chunks§ churn: peers may come and go§ once peer has entire file, it may (selfishly) leave or

(altruistically) remain in torrent

P2P file distribution: BitTorrent


9

BitTorrent: requesting, sending file chunks

requesting chunks:§ at any given time, different peers have different subsets of file chunks§ periodically, Alice asks each peer for list of chunks that they have§ Alice requests missing chunks from peers, rarest first

sending chunks: tit-for-tat§ Alice sends chunks to those four peers currently sending her chunks at highest rate

• other peers are choked by Alice (do not receive chunks from her)• re-evaluate top 4 every10 secs

§ every 30 secs: randomly select another peer, starts sending chunks• “optimistically unchoke” this peer• newly chosen peer may join top 4


10

BitTorrent: tit-for-tat(1) Alice “optimistically unchokes” Bob(2) Alice becomes one of Bob’s top-four providers; Bob reciprocates(3) Bob becomes one of Alice’s top-four providers

higher upload rate: find better trading partners, get file faster !


11

Learning ObjectivesPrinciples of Network Applications

1. Application Architecture2. Transport Service Requirements3. Process Communicating and Addressing



12

2/5/20

4

App-layer protocol

• types of messages exchanged,

– e.g., request, response • message syntax:

– what fields in messages & how fields are delineated

• message semantics

– meaning of information in fields• rules for when and how processes send &

respond to messages

open protocols:• defined in RFCs• allows for interoperability• e.g., HTTP, SMTP

proprietary protocols:• e.g., Skype

The application layer protocol defines:


13

Requirements on Transport Servicesdata integrity§ some apps (e.g., file transfer, web

transactions) require 100% reliable data transfer

§ other apps (e.g., audio) can tolerate some loss

timing§ some apps (e.g., Internet telephony,

interactive games) require low delay to be “effective”

throughput§ some apps (e.g., multimedia) require

minimum amount of throughput to be “effective”

§ other apps (“elastic apps”) make use of whatever throughput they get

security§ encryption, data integrity, …


14

Transport service requirements: common apps

application

file transfere-mail

Web documentsreal-time audio/video

stored audio/videointeractive games

text messaging

data loss

no lossno lossno lossloss-tolerant

loss-tolerantloss-tolerantno loss

throughput

elasticelasticelasticaudio: 5kbps-1Mbpsvideo:10kbps-5Mbpssame as above few kbps upelastic

time sensitive

nononoyes, 100’s msec

yes, few secsyes, 100’s msecyes and no


15

Internet transport protocols servicesTCP service:• reliable transport between sending and receiving process• flow control: sender won’t overwhelm receiver • congestion control: throttle sender when network overloaded• does not provide: timing, minimum throughput guarantee, security• connection-oriented: setup required between client and server processes

UDP service:• unreliable data transfer between sending and receiving process• does not provide: reliability, flow control, congestion control, timing, throughput

guarantee, security, or connection setup


16

2/5/20

5

Internet apps: application, transport protocols

application

e-mailremote terminal access

Web file transfer

streaming multimedia

Internet telephony

applicationlayer protocol

SMTP [RFC 2821]Telnet [RFC 854]HTTP [RFC 2616]FTP [RFC 959]HTTP (e.g., YouTube), RTP [RFC 1889]SIP, RTP, proprietary(e.g., Skype)

underlyingtransport protocol

TCPTCPTCPTCPTCP or UDP

TCP or UDP


17





18

Processes communicatingprocess: program running within a host• within same host, two processes communicate using inter-process communication

(defined by OS)

• processes in different hosts communicate by exchanging messages

client process: process that initiates communication

server process: process that waits to be contacted

Have both client processes & server processes

client–server architecture

P2P architectures


19

Sockets• process sends/receives messages to/from its socket• socket analogous to door

– sending process shoves message out door– sending process relies on transport infrastructure on other side of door to

deliver message to socket at receiving process

Internet

Controlled by OS

controlled byapp developer

transport

application

physicallinknetwork

process

transport

application

physicallinknetwork

processsocket


20

2/5/20

6

Securing TCP

TCP & UDP § no encryption§ cleartext passwds sent into socket

traverse Internet in cleartext

SSL§ provides encrypted TCP connection§ data integrity§ end-point authentication

SSL is at app layer• apps use SSL libraries, that “talk” to

TCP

SSL socket API§ cleartext passwords sent into socket

traverse Internet encrypted § see Chapter 8


21





22

Web and HTTPFirst, a review…• web page consists of objects• object can be HTML file, JPEG image, Java applet, audio file,…• web page consists of base HTML-file which includes several

referenced objects

COMP 3825 - Kan Yang 23

23

HTML (HyperText Makeup Language)• A language to create structured documents• One can embed images, objects, or create interactive forms

index.html<html>

<body><div>

foo<a href="http://google.com">Go to Google!</a>

</div><form>

<input type="text" /><input type="radio" /><input type="checkbox" />

</form></body>

</html>


24

http://google.com/

2/5/20

7

CSS (Cascading Style Sheets)• Language used for describing the presentation of a document

index.css

p.serif {font-family: "Times New Roman", Times, serif;

}p.sansserif {

font-family: Arial, Helvetica, sans-serif;}


25

• Programming language used to manipulate web pages. It is a high-level, untyped and interpreted language with support for objects.

• Supported by all web browsers

<script>function myFunction(){

document.getElementById("demo").innerHTML = ”Text”

}</script>

Javascript


26

Web & http

SERVERCLIENT

HTTP REQUEST:

GET /account.html HTTP/1.1

Host: www.safebank.com

HTTP RESPONSE: HTTP/1.0 200 OK<HTML> . . . </HTML>

(browser)

login password

banking contentAccounts Bill Pay Mail Transfers


27

Uniform Resource Locator (URL)• Global identifiers of network-retrievable documents

• Example

http://safebank.com:81/account?id=10#statement

• Special characters are encoded as hex:– %0A = newline– %20 or + = space

HostnameProtocol

PortPath Query

Fragment


28

http://www.safebank.com/

2/5/20

8

HyperText Transfer Protocol (HTTP)

• Browsers use HTTP to fetch Web content– Request/response based protocol– Stateless

• HTTP requests:– For a webpage, script, image, file, etc.– Usually expose info about client, browser

• HTTP response:– A file (HTML, image, etc.)– Can redirect to another webpage


29

HTTP Request and Response

1. Browser RequestGET /index.html HTTP/1.1

2. Web Server Finds File/var/www/…/index.html

3. Server ResponseHTTP/1.x 200 OK

<html> …</html>

4. Browser Displays Page

Read File


30

Example: HTTP Request and ResponseMethod

File

HTTP version

Status Code 200 OK

– request succeeded, requested object later in this msg

301 Moved Permanently– requested object moved, new

location specified later in this msg (Location:)

400 Bad Request– request msg not understood by

server404 Not Found

– requested document not found on this server

505 HTTP Version Not Supported

HTTP response status codes


31

How browser renders a page?


32

2/5/20

9

Renderer UI

Suppose you are visiting http://safebank.com in a modern web browser.

ChromeBar UI Browser Engine

Network Stack

Renderer Engine

display(URL) retrieveData(URL)isCached(URL) = false

pageData /*HTML, CSS, etc*/

renderBitmap(pageData)

(Renderer Process)enters http://safebank.comand presses go.

(Browser Process)

How browser renders a page


33

Document Object Model (DOM)• Object-oriented interface used to read and

write rendered pages– web page in HTML is structured data– DOM provides representation of this

hierarchy

• Examples– Properties: document.alinkColor,

document.URL, document.forms[ ], document.links[ ], document.anchors[ ]

– Methods: document.write(document.referrer)

• Also: CSS Object Model (CSSOM)– describes a map of all CSS selectors & relevant properties for each selector.

DOM Tree

|-> Document|-> Element (<html>)|-> Element (<body>)

|-> Element (<div>)|-> text node

|-> Anchor|-> text node

|-> Form|-> Text-box|-> Radio Button|-> Check Box Button

HTML<html>

<body><div>

foo<a>foo2</a>

</div><form>

<input type="text” /><input type=”radio” /><input type=”checkbox” />

</form></body>

</html>


34



35

Rendering Tree Example


36

http://safebank.com/


2/5/20

10

pageData /*HTML*/

RENDERING ENGINE

pageData /*CSS*/

CSS Parser

Style Rules

HTML Parser

DOM Tree BuilderRender Tree

Painter

pageBitmap

<HTML>…<HTML>

element.style { height: 303px;…

}0x42 4d 45 00 00 00 0036 00 00 00 28 00 004f 45 d0 00 00 00 9236 00 60 0b 28 4f 45d0 00 d0 00 00 00 924f 4d 45 00 00 00 004f 45 d0 00 00 00 92. . .

HtmlElement

BodyElement

Text

DivElement

ImageElement

ParagraphElement

*

JavaScript Engine

pageData /*JavaScript*/

function onload(){…}

Original DOMDOM

Modifications



37

Suppose you are visiting http://safebank.com in a modern web browser.isCached(URL) = false

ChromeBar UI Browser Engine

Network Stack

Renderer Engine

display(URL) retrieveData(URL)

pageData /*HTML, CSS, etc*/

renderBitmap(pageData)

(Renderer Process)enters http://safebank.c omand presses go.

(Browser Process) (displays pageBitmap)

Renderer UI pageBitmaplogin password

banking contentAccounts Bill Pay Mail Transfers

(cookies for www.safebank.com) (javascript for www.safebank.com) (other resources for www.safebank.com)



38

HTTP is stateless

Cookies: client state


39

Cookies• Used to store state on user’s machine

POST …

HTTP Header:Set-cookie: NAME=VALUE ;

domain = (who can read) ;expires = (when expires) ;secure = (only over SSL)

POST …Cookie: NAME = VALUE

HTTP is stateless protocol; cookies add state

If expires=NULL:this session only

Browser Server

Browser ServerCOMP 3825 - Kan Yang 40

40




2/5/20

11

Cookie authenticationBrowser Web Server Auth server

POST login.cgiUsername & pwd Validate user

auth=valStore val

Set-cookie: auth=val

GET restricted.htmlCookie: auth=val restricted.html

auth=val

YES/NOIf YES, restricted.html

Check val


41

Web caches (proxy server)

• user sets browser: Web accesses via cache

• browser sends all HTTP requests to cache

– object in cache: cache returns object

– else cache requests object from origin server, then returns object to client

goal: satisfy client request without involving origin server

client

proxyserver

client

HTTP request

HTTP response

HTTP request HTTP request

origin server

origin server

HTTP response HTTP response


42

More about Web caching• cache acts as both client and server

– server for original requesting client– client to origin server

• typically cache is installed by ISP (university, company, residential ISP)

Why Web caching?• reduce response time for client request

• reduce traffic on an institution’s access link• Internet dense with caches: enables “poor” content providers to effectively deliver

content (so too does P2P file sharing)


43

COMP 3825 Networking and Information Assurancekanyang/COMP3825/Lecture 5 Network Appli… ·...

Documents

Transcript of COMP 3825 Networking and Information Assurancekanyang/COMP3825/Lecture 5 Network Appli… ·...