Tehnologii Webandrei.panu/lectures/EN_web...here, from HTTP to WebSocket (RFC 6455) HTTP: status Success (2xx) 200 Ok, 201 Created, 202 Accepted, 204 No Content, 206 Partial Content,…

Tehnologii Web

Web programming (I): HTTP, cookies, sessions

i.red

d.it

/1p

d8s

12l4

md

01.jp

g

Dr. Sabin Corneliu Buraga – profs.info.uaic.ro/~busaco/

“There are 2 ways to write error-free programs; only the third one works.”

Alan Perlis

What is the Web?

World Wide Web

an information space containing elements (things) of interest, called resources,

denoted by global identifiers – URI/IRI

details at www.w3.org/TR/webarch/W3C Recommendation (2004)

Web resources

Aspects of interest

identification

interaction

representation by using data formats

Web resources

Aspects of interest

identification

interaction

representation by using data formats

URI/IRIprotocol:

HTTP

markup language(s)

How about the interaction between client(s) and Web server(s)?

HTTP

HyperText Transfer Protocol

based on TCP/IP stack

HTTP

situated on the application layer

access control to the data transmission medium (MAC – Medium Access Control)

network interconnection + data routing(IP – Internet Protocol)

reliable transport via sockets(TCP – Transmission Control Protocol)

hypertext/hypermedia transfer(HTTP – HyperText Transfer Protocol)

HTTP

HyperText Transfer Protocol

a reliable request/response protocol

standard access port: 80

HTTP

HTTP/1.1

Internet standard: RFC 2616 (1999)

from 2014, defined by RFC 7230—7235

www.w3.org/Protocols/

devdocs.io/http/

tutorial: www.code-maze.com/http-series/

HTTP

HTTP/2.0

RFC 7540 (2015)

focused on performance

http2.github.io

HTTP

HTTP/2.0

binary messages

TCP connection reuse (a single connection per host)

multiplexing (many parallel streams)

header compression – HPACK

sending messages to the client (server push)

implementations: github.com/http2/http2-spec/wiki/Implementations

HTTP/2

HTTP/1.1

resources of interest:http2-explained.haxx.se

www.tunetheweb.com/blog/http-versus-https-versus-http2/

HTTP

HTTP/3.0

next generation Web protocolHTTP over QUIC – quicwg.org

uses QUIC (Quick UDP Internet Connections)proposed by Google, currently under standardization by

IETF (Internet Engineering Task Force)

other details: http3-explained.haxx.se

advanced

HTTP: architecture

Web Server

daemon – “protective spirit”

Web Client

browser, Web bot (crawler), player,…

HTTP: architecture

Web ServerApache, Internet Information Services, Lighttpd, NGINX,…

Web ClientMosaicNetscapeMozillaFirefox,

Internet Explorer, Chromium, wget, iTunes, Echofon, etc.

details in “Web browser’s architecture” presentation:profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html#week5

HTTP

Request and responseaccessing – possibly, changing – a resource

representation by using its URI

Web Server

Web Client

request

response

HTTP: concepts

Message

base unit of the HTTP communication(request or response)

HTTP: concepts

Intermediary

proxygatewaytunnel

HTTP: concepts

Proxylocated in the client/server proximity

having the role of both server and client

Web Server

Web Client p

rox

y

HTTP: concepts

Proxy

forward proxyintermediary for a group of clients

acts on behalf of clients

reverse proxyintermediary for a group of servers

advanced

HTTP: concepts

Gatewayintermediary hiding the target (origin) server

the client has no knowledge about this

Web Gate-way

Web Client

Web Server

Web Server

HTTP: concepts

Gateway

can assure: traffic distribution across servers – load balancing

short-term data storage – cachingmessage or request translation (e.g., HTTPSHTTP)

other negotiation operations – role of mediator/broker

advanced

HTTP: concepts

Gateway

open source software: Apache Traffic Server – trafficserver.apache.org

HAProxy – www.haproxy.org

Squid – www.squid-cache.org

Varnish – varnish-cache.org

in cloud: Amazon ELB (Elastic Load Balancing)aws.amazon.com/elasticloadbalancing/

advanced

HTTP: concepts

Tunnel

retransmits – usually, encrypted – HTTP messages

HTTP: concepts

Tunnel

retransmits – usually, encrypted – HTTP messages

context: HTTPS protocol – to assure a “secure” HTTP communication via TLS (Transport Layer Security)

authentication based on digital certificates+ bidirectional data encryption

a visual tutorial at howhttps.works

HTTP: concepts

Details about a HTTPS

connection offered by the

browser

advanced

used encryption

information about

the digital

certificate

HTTP: concepts

Cache

local storage area – in memory, on a disc –for the messages (data)

server- and/or client-side

HTTP: concepts

Cache

local storage area – in memory, on a disc –for the messages (data)

future requests for that data can be served faster

context: ensuring Web applications’ performance

HTTP: messages

HTTP message = header + body

HTTP: messages

Header

includes a set of fields

field-name ":" [ field-value ] CRLF

CR = Carriage Return \r – code 13

LF = Line Feed \n – code 10

HTTP: messages

HTTP request

Method Request-URI ProtocolVersion CRLF

[ Message-header ] [ CRLF MIME-data ]

GET /~busaco/teach/courses/web/ HTTP/1.1 CRLF

Host: profs.info.uaic.ro

HTTP: messages

HTTP response

HTTP-version Digit Digit Digit Reason

CRLF Content

HTTP/1.1 200 OK CRLF …

HTTP: methods

GET

request – performed by a client – to access a resource representation

HTTP: methods

GET

request – performed by a client – to access a resource representation

HTML document, CSS stylesheet, image in PNG or JPEG format, vector illustration as SVG,

JavaScript program, data in JSON (JavaScript Object Notation) format, RSS (XML) news feed,PDF presentation, ZIP archive, video, …

HTTP: methods

HEAD

similar to GETusually, offers only meta-data

HTTP: methods

HEAD

similar to GETusually, offers only meta-data

e.g., MIME type of a resource, last update,…

HTTP: methods

PUT

updates a resource representation or, possibly, creates a resource on the Web server

details in the lecture regarding Web services

HTTP: methods

POST

creates a resource, usually sending entities (data, actions) to the server

HTTP: methods

POST

creates a resource, usually sending entities (data, actions) to the server

e.g., data entered into a Web form’ fields

HTTP: methods

DELETE

erases a resource – its representation –from the server

HTTP: methods

Remark

traditionally, the Web browser only permits the use of GET and POST methods

HTTP: methods

A method is considered safeif it does not modify the server state

i.e. no side-effect actions are performed on the server

GET and HEAD are safe

POST, PUT and DELETE are not safe

advanced

HTTP: methods

A method is considered idempotent when it can be called many times without different outcomes,returning the same response (representation)

GET, HEAD, PUT and DELETE are idempotent

POST is not idempotent

advanced

HTTP: resource representations

Character set encodings

ISO-8859-1ISO-8859-2

KOI8-RISO-2022-JP

UTF-8UTF-16 Little Endian

…


Message (content) encodings

compression, identity and/or integrity

traditional approach: gzip – www.gzip.org

modern approach: Brotli – tools.ietf.org/html/rfc7932


Representation formats

textHTML, CSS, plain text, JavaScript code, XML document

or

binaryimage, PDF document, multimedia resource, archive


Resource’s content type

media types

HTTP: header fields (attributes)

Content-Type

permits the transfer of any kind of data

Content-Type: type/subtype


Content-Type

specified by Media Types – MIME(Multipurpose Internet Mail Extensions)

denotes a set of primary content types+ additional sub-types

initially, used in the e-mail context


Primary types

text indicates textual formats

text/plain – unformatted texttext/html – HTML document

text/css – CSS (Cascading Style Sheets) resource


Primary types

image specifies graphical formats

image/gif – GIF (Graphics Interchange Format) imagesimage/jpeg – JPEG (Joint Picture Experts Group) photosimage/png – PNG (Portable Network Graphics) pictures

image/webp – WebP (Web Picture Format) imagesimage/svg+xml – SVG (Scalable Vector Graphics) illustrations


Primary types

audio denotes audio content

audio/mpeg – resource encoded in MP3 formatspecification for audio data according to the MPEG (MotionPicture Experts Group) standard – tools.ietf.org/html/rfc3003

audio/ac3 – compressed audio resourceconforming to AC-3 standard – www.atsc.org/standards/


Primary types

video defines video content: animations, films

video/h264 – resource in H.264 formatwww.itu.int/rec/T-REC-H.264

video/ogg – content encoded in OGG open formatwww.xiph.org/ogg/


Primary types

application signifies formats that can be processed by applications on the client-side

application/javascript – JavaScript programapplication/json – JSON data

application/octet-stream – stream of arbitrary bytes


Primary types

multipart used to transfer composed data

multipart/mixed – mixed contentmultipart/alternative – alternative contents

e.g., different qualities of multimedia streams

N. Freed et al., Media Types (13 February 2020)

www.iana.org/assignments/media-types/media-types.xhtml

calendar+json application/calendar+json Calendar in JSON format

csv text/csv CSV data

opus audio/opus Opus audio resource

msword application/msword Word (MS Office) document

tiff image/tiff Image in TIFF format

vnd.rar application/vnd.rar Proprietary format

VP8 video/VP8 Video format VP8: RFC 7741

zip application/zip ZIP archive


Location

Location ":" "http(s)://" authority [ ":" port ] [ abs_path ]

redirects the client to another resource representation(HTTP redirect)

Location: http://somewhere.info:8080/moved.html


Referer

denotes the URI of a Web resource that refers to the current resource

used to know the source of the requests to a given document (back-links) for analytics, logging, caching,…


Host

specifies the target address – IP or symbolic domain – of the machine supposed to provide

a requested resource


Other existing fields concern the following:

accepted content (content negociation) – e.g., Accept

authentication & authorization – WWW-Authenticate Authorization

conditional access to resources – If-Match, If-Modified-Since,…caching policies – Cache-Control, Expires, ETag, etc.proxy – Proxy-Authenticate, Proxy-Authorization, Via

HTTP push – Topic, TTL, Urgency

…and otherswww.iana.org/assignments/message-headers/message-headers.xhtml

advanced

HTTP: status

Informational (1xx)

100 Continue, 101 Switching Protocols, 102 Processing

switching protocolhere, from HTTP to WebSocket (RFC 6455)

HTTP: status

Success (2xx)

200 Ok, 201 Created, 202 Accepted,204 No Content, 206 Partial Content,…

OPTIONS – method to determine server capabilities or requirements for a resource

HTTP: status

Redirection (3xx)

300 Multiple Choices, 301 Moved Permanently, 302 Found,303 See Other, 304 Not Modified, 305 Use Proxy etc.

HTTP: status

Client Error (4xx)

400 Bad Request, 401 Unauthorized, 403 Forbidden,

405 Method Not Allowed, 408 Request Timeout, 410 Gone,

414 Request-URI Too Long, 415 Unsupported Media Type,

423 Locked, 429 Too Many Requests,…

HTTP: status

Server Error (5xx)

500 Internal Server Error, 502 Bad Gateway,

503 Service Unavailable, 504 Gateway Timeout,

505 HTTP Version Not Supported, 508 Loop Detected,…

HTTP: starea

Cloudflare offers content distribution services, ensuring performance and security of Web applications and has a role of reverse proxy, being located between the user’s

Web browser and the site hosted on the target Web server

advanced

HTTP: logging

Requests sent to a Web server are logged

Common Log Format

standardized text file format

for Apache HTTP Server: mod_log_config module

httpd.apache.org/docs/current/logs.html

w10.uaic.ro - msi2018 [13/Feb/2019:14:53:14 +0200] "GET /~vidrascu/MasterSI2/note/Restanta.pdf HTTP/1.1" 206 25227 "http://profs.info.uaic.ro/~vidrascu/MasterSI2/index.html" "...Chrome/72.0.3626.109"

82-137-8-231.rdsnet.ro - - [13/Feb/2019:15:38:23 +0200] "POST /~computernetworks/login.php HTTP/1.1" 302 1115 "http://profs.info.uaic.ro/~computernetworks/login.php" "...X11; Ubuntu; Linux x86_64 ... Firefox/65.0"

ec2-23-21-0-202.compute-1.amazonaws.com - - [13/Feb/2018:15:48:29 +0200] "GET /~busaco/teach/courses/web/presentations/web01ArhitecturaWeb.pdf HTTP/1.1" 200 2081804 "-" "HTTP_Request2/2.3.0 (http://pear.php.net/package/http_request2)..."

199.16.156.126 - - [13/Feb/2018:15:58:58 +0200] "GET /robots.txt HTTP/1.1" 404 182 "-" "Twitterbot/1.0"

psihologie-c-113.psih.uaic.ro - - [13/Feb/2019:16:03:04 +0200] "GET /~busaco/ HTTP/1.1" 200 1942 "-" "... Firefox/64.0..."

psihologie-c-113.psih.uaic.ro - - [13/Feb/2019:16:03:04 +0200] "GET /~busaco/csb.css HTTP/1.1" 200 852 "http://profs.info.uaic.ro/~busaco/" "... Firefox/64.0..."

proxy-220-255-2-224.singnet.com.sg - - [13/Feb/2019:16:23:23 +0200] "GET /favicon.ico HTTP/1.1" 200 1406 "-" "...UCBrowser/11.3.8.976..."

c2.uaic.ro - - [13/Feb/2018:16:33:43 +0200]"GET /~busaco/teach/courses/web/ HTTP/1.1" 304 - "-" "...Chrome/72.0.3626.109..."

220.181.51.219 - - [13/Feb/2019:19:20:20 +0200] "HEAD /%7Ebusaco/music/09.Sabin%20Buraga%20-...mp3 HTTP/1.0" 200 - "-" "NSPlayer/10.0.0.4072 WMFSDK/10.0"

HTTP: example of a request

GET /~busaco/teach/courses/web/web-film.html HTTP/1.1

Host: profs.info.uaic.ro

User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 12_1

like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko)

Version/12.0 Mobile/15E148 Safari/604.1

Accept: text/html,application/xhtml+xml;q=0.9,*/*;q=0.8

Accept-Language: en-us, en;q=0.5

Accept-Encoding: gzip, deflate

Connection: keep-alive

Referer: https://profs.info.uaic.ro/~busaco/teach/courses/web/

con

ten

t

header fields(meta-data)

HTTP: example of a response

HTTP/1.1 200 OK

Date: Tue, 18 Feb 2020 12:28:01 GMT

Server: Apache

Last-Modified: Tue, 18 Feb 2020 07:46:02 GMT

Content-Encoding: gzip

Content-Length: 11064

Keep-Alive: timeout=15, max=100

Connection: Keep-Alive

Content-Type: text/html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"

lang="ro" xml:lang="ro">

…

</html>

avansat

eventually, data regarding

client authentication may be

provided

online inspection of HTTP messages

through the httpbin.org Web application

X fields are not

standardized

GET /services/feeds/photos_public.gne?tags=FII,Iasi

Host: www.flickr.com

…

HTTP/2 200 OK

Content-Type: application/atom+xml; charset=utf-8

Date: Mon, 17 Feb 2020 06:48:49 GMT

Server: Apache/2.4.41 (Ubuntu)

Expires: Mon, 26 Jul 1997 05:00:00 GMT

Last-modified: Sun, 02 Nov 2014 06:58:25 GMT

Cache-control: private, no-store, no-cache, must-revalidate

Pragma: no-cache

X-Frame-Options: SAMEORIGIN

X-Cache: Miss from cloudfront

Via: 1.1 46d5c1a4d1e3a5c8a14bdb9b6676ba11.cloudfront.net (CloudFront)

X-Firefox-Spdy: h2

expires in the past

(won’t be kept in cache)

data in Atom format

(processed by the

client)

obtaining information about public pictures offered by Flickr

advanced

HTTP: logging – HAR format

The interaction between the browser and the Web server (requests + responses) can be stored in HAR files (HTTP

ARchive)

JSON based formatwww.softwareishard.com/blog/har-12-spec/

example: gist.github.com/igrigorik/3495174

advanced

HTTP: logging – HAR format

The interaction between the browser and the Web server (requests + responses) can be stored in HAR files (HTTP

ARchive)

main purpose: analyzing Web traffic

important aspect: performance

consult httparchive.org

advanced

HTTP: APIs (libraries)

advanced

cURL + libcurl(C, Java, Haskell, .NET, PHP, Ruby,…) – curl.haxx.se

Apache HttpComponents (Java) – hc.apache.org

http.client (Python 3)

Hyper (Rust library): github.com/hyperium/hyper

LibHTTP (C library): www.libhttp.org

WinHTTP(specific for Windows: C/C++) – tinyurl.com/6eemqqc

HTTP: client-side tools

advanced

Google Chrome Developer Toolsdevelopers.google.com/web/tools/chrome-devtools/

Firefox Developer Toolsdeveloper.mozilla.org/docs/Tools

Fiddler – free Web debugging proxywww.telerik.com/fiddler

advanced

inspecting HTTP requests made by the browser

(instead of) break

cookie stealinggeekshumor.com/cookie-stealing/

How about the Web server’s architecture?

HTTP: Web server

Fulfills multiple requests from the clients using the HTTP protocol

HTTP: Web server

Fulfills multiple requests from the clients using the HTTP protocol

each request is considered independent from others, even though it comes from the same Web client

connection state is not kept – stateless

HTTP: Web server

Traditionally, the Web server implementation

is either pre-forked or pre-threaded

on initialization, a number of child processes or threads are created, each process/thread interacting to

a distinct client

see the supplement (in

Romanian) regarding Apache

HTTP Server

How can we develop the back-end of Web applications?

necessity

Dynamic generation – on the server –of representations of resources

requested by clients

solutions

CGI – Common Gateway Interface

Web application servers

Web frameworks

solution: cgi

Language-independent programming interfacefacilitating the interaction between clients and

programs invoked on the Web server

de facto standard

RFC 3875 – tools.ietf.org/html/rfc3875

www.w3.org/CGI/

cgi

A CGI program (script) is invoked on server

directly

i.e., retrieving data from a Web form after the submit button is pressed

cgi

A CGI program (script) is invoked on server

indirectly

example: at each visit a new ad (e.g., banner) is generated

cgi

CGI scripts can be written in any language available on the server

interpreted languagesbash, Perl – e.g., Perl::CGI module –, Python, Ruby,...

compiled languagesC, C++, Rust, etc.

cgi: programming

Any CGI program will write data – the representation of a Web resource –

at standard output (stdout)

cgi: programming

To denote the type of the generated representation, HTTP headers are used – MIME (Media Types)

example: Content-type: text/html

cgi: programming

Interaction between the client and Web server

Web Server

Web Client

request

response

script

invo-cation

cgi: variables

A CGI script has access to environment variables

associated to the request sent to the CGI program:

REQUEST_METHOD – HTTP method (GET, POST,…)QUERY_STRING – data transmitted to the clientREMOTE_HOST, REMOTE_ADDR – client address

CONTENT_TYPE – content type as MIME (Media Type)CONTENT_LENGTH – content length in bytes

cgi: variables

Additional variablesusually, generated by the Web server:

HTTP_ACCEPT – MIME types accepted by client (browser)HTTP_COOKIE – data about cookiesHTTP_HOST – information regarding the host (client)HTTP_USER_AGENT – information about the client

…and others

a result received by Web client after the invocation via GET on Web server

of variabile.cgi script(having read & execution rights)

#!/bin/bash# Setting the content typeecho "Content-type: text/plain"; echo

# Executing 'set' command in Linux# to show environment variablesset

/* hello.c

(compile with gcc hello.c –o hello.cgi) */

#include <stdio.h>

int main() {

int msgs; /* number of messages */

printf ("Content-type: text/html\n\n");

for (msgs = 0; msgs < 10; msgs++) {

printf ("<p>Hello, world!</p>");

}

return 0;

}

#!/usr/bin/python

# hello.py.cgi

print "Content-type: text/html\n"

for messages in range (0, 10):

print "<p>Hello, world!</p>"

#!/bin/bash

# hello.sh.cgi

echo "Content-type: text/html"

echo

MESSAGES=0

while [ $MESSAGES -lt 10 ]

do

echo "<p>Hello, world!</p>"

let MESSAGES=MESSAGES+1

done

CGI programs written in C, bash, Python generating the same HTML content

advanced

cgi: invocare

the client – i.e. browser – receives as response the representation – here, HTML page –

generated by the CGI program invoked by the Web server

this representation is processed and, eventually, displayed in a (zone of a) browser window

cgi: invocare

by experimenting other MIME types, the browser displays the following:

Content-type: text/plain Content-type: text/xml

cgi: invocation

<form action="http://profs.info.uaic.ro/~.../get-max.cgi"method="GET">

<p>Enter two numbers :<input type="text" name="no1" /> <input type="text" name="no2" /> </p><input type="submit" value="Compute maximum" />

</form>

invocation from an interactive Web formin this case, using the GET method

cgi: invocation

special URL in GET case

cgi: invocation

For each form field, a field_name=value pair – delimited by & – is generated and added to the URL

of the CGI script to be invoked on server

http://profs.info.uaic.ro/~busaco/cgi/get-max.cgi?no1=7&no2=4

cgi: invocation

Real-life examples:

http://usabilitygeek.com/?s=web+design

https://www.youtube.com/watch?v=elfSzMATcB4#t=45

https://twitter.com/search?q=web%20development&src=typd

https://developer.mozilla.org/search?q=ajax&topic=apps

this URL is encoded – URL encoding

see first lecture

cgi: invocation

The server will invoke a CGI script passing the data at standard input (stdin)

orvia environment variables

cgi: invocation

Data processing when GET method is used

data available in QUERY_STRING variable

cgi: invocation

Data processing when POST method is used

data read from stdin, the length in bytes being specified by CONTENT_LENGTH variable

cgi: invocation

Data processing – GET and/or POST

in case of application servers or frameworks, data is encapsulated into specific structures/types

ASP.NET (C# et. al) – HttpRequest classNode.js (JavaScript) – http.ClientRequest

PHP – associative arrays: $_GET[] $_POST[] $_REQUEST[]

Play (Java, Scala) – play.api.mvc.Request

Python – clasa cgi.FieldStorage

advanced

GET vs. POST

GET method is used to generate the representations of the requested resources

e.g., HTML documents, JPEG or PNG images, Atom/RSS news feeds, ZIP archives, etc.

the server state should not be modified

GET vs. POST

GET method is used to generate the representations of the requested resources

obtaining data with GET, the user can set a bookmark for further accesses to the Web resource

(by using the URL of the generated representation)

e.g., https://duckduckgo.com/?q=web+programming&ia=videos

GET vs. POST

POST method is used when the data transmitted to the server is large (e.g., upload of file content)

or sensitive – typically, passwords

GET vs. POST

POST method is used when the data transmitted to the server is large (e.g., upload of file content)

or sensitive – typically, passwords

plus, when the script invocation can produce a state change on the server:

adding a record, altering a file,...

cgi: support

Web server should support CGI script invocation

example: Apache HTTP Server provides the mod_cgi module

advanced

cgi: ssi

CGI scripts could be directly invoked from a HTML document via SSI (Server Side Includes)

www.ssi-developer.net/ssi/

Apache: httpd.apache.org/docs/trunk/howto/ssi.html

NGINX: nginx.org/en/docs/http/ngx_http_ssi_module.html

advanced

cgi: fastcgi

FastCGIan alternative to CGI focused on performance

implementations:Apache HTTP Server – httpd.apache.org/mod_fcgid/

NGINX – nginx.org/en/docs/http/ngx_http_fastcgi_module.html

advanced

How about a manner to – temporarily – store on front-end (browser) the data transmitted by the

back-end of Web application?

cookies

A script running on a Web server can put data on the client-computer via the user’s Web browser

subsequently, the navigator will return that data to the same script available on the same server

also consult Cookiepedia: cookiepedia.co.uk

cookies

A (quasi-)persistent way to store data on the machine of a Web client in order to be

further accessed by a program running on a server

developer.mozilla.org/docs/Web/HTTP/Cookies

cookies: usages

Storing user preferences

typical examples: options regarding interaction – visual theme

(e.g., chromatics), lingual preferences,geographical location, interests on shopping

…

cookies: usages

Automatic form completion

using previously entered values for certain fields

cookies: usages

Monitoring the access to a Web resource

aspect of interest:Web analytics

collecting information about clients(hardware platform, browser, screen resolution, etc.)

cookies: usages

Monitoring the access to a Web resource

aspect of interest:user tracking

monitoring the user’s behaviorDo Not Track initiative

www.eff.org/issues/do-not-track

cookies: usages

Storing authentication info

e.g., keeping data about the user account in the e-commerce context

cookies: usages

Transaction status

e.g., current state of the virtual shopping cart provided by an e-shop application

cookies: usages

Web session management

cookies: types

Persistent cookies

not destroyed when Web browser closes

kept into a file – client-side

time-to-live set by the cookie creator

cookies: types

Non-persistent (volatile) cookies

disappear when the browser is closed

cookies

a cookie can be considered as a variable

its value is transferred via HTTP between the Web server (back-end application)

and the client (browser)

the size of a cookie cannot exceed 4KB

cookies

A cookie can be considered as a variable

name=value

the value is an URL encoded string

cookies

Data about a cookie is received by the browser

a list of cookies for each server (domain)

cookies

A cookie is sent to a client by using the Set-Cookie

header field of a HTTP response message

cookies

Set-Cookie: name=value; expires=date; path=path;

domain=Internet-domain; secure

cookies



expires – indicates date and time when cookie will expire (the Web client should destroy expired cookies)

cookies



domain – signifies the symbolic name of the Web server that generated the cookie

cookies



path – specifies a subset of URLs from the cookie’s domain

distinguishes multiple applications existing on the same server

cookies



secure – indicates that cookie will be sent back to the server only if the communication channel is “secure”

(via HTTPS)

cookie-uriinspect cookies stored by the

Web browser for each domain

httpOnly: true

indicates that the value of a cookie can be obtained only from a data transfer through

HTTP

the cookie cannot be accessed by a program executed on

client side (browser)www.owasp.org/index.php/HttpOnly

advanced

cookies

A cookie is transmitted back from the client to the Web server only if it satisfies

all validity conditions

domain, path, expire date & time, and communication channel security are matching

cookies

the server will receive, in the headerof a HTTP request message, the following:

Cookie: name1=value1; name2=value2...

the list of cookies which satisfy the validity conditions

cookies

A script invocation consists of returning a representation + placing various cookies

Web Server

Web Client

HTTP requestscript invocation

HTTP responseSet-Cookie: color=green

Script

cookies

Cookies – persistent or not –are processed and stored by the browser

Web Server

Web Client

Script

color=

green

persistent cookies are stored in files or databases (SQLite)

cookies

Next access to the script is made by transmitting the cookies to the server

according to the validity conditions

Web Server

Web Client

Script

color=

green HTTP requestCookie: color=green

HTTP response

cookies: consulting

Cookies reside in the header field of a HTTP message

HTTP_COOKIE

cookies: expiration

To remove a cookie, the value and time are canceled

eventually, the other attributes of the cookie

cookies

Other information of interest is available in RFC 6265

HTTP State Management Mechanism

tools.ietf.org/html/rfc6265

How can we identify successive requests expressed by the same client instance?

👽👽👽👽👽

HTTP is stateless protocol

cannot tell if specific successive requests are received from the same client

(from the same instance of a Web browser)

necessity

Preserving certain data for a sequence of relatedHTTP messages (requests/responses)

examples: shopping cart status

multi-step Web formscontent pagination

user authentication stateetc.

sessions

Each visitor of a Website will have associated an unique identifier – session ID (SID)

stored by a cookie(e.g., ASP.NET_SessionId, PHPSESSID, session-id, _wp_session)

orpropagated via an URL

sessions

Each visitor of a Website will have associated an unique identifier – session ID (SID)

in this way, consecutive visits (requests) made by the same user can be identified

sesiuniWeb client (browser)Web server

(daemon)

HTTP request

data taken from the formname=Tuxy

HTTP response setting a cookie

Set-Cookie: sid=7343

HTTP request + session cookie

GET /profile HTTP/1.1

Cookie: sid=7343

HTTP response (profile page)

HTTP/1.1 200 OK

…

<p>Hi, Tuxy! Welcome back!</p>

establishing a Web session using a cookie

⓵

⓶

⓷

⓸

sessions

Various variables could be attached to a session

their values will be kept (stored) between consecutive – e.g., related – requests from the same instance

of a Web client (browser)

sessions

A session could be implicitly (automatically) or explicitly (manually, by programmer) registered,

depending on the Web application server or the default configuration

sessions

A session could be implicitly (automatically) or explicitly (manually, by programmer) registered,

depending on the Web application server or the default configuration

Web session info is persistently stored on the server by using non-relational database systems – e.g., DynamoDB,

Memcached, Redis,… – or, in most cases, files

advanced

POST / HTTP/1.1

Accept: text/html,application/xhtml+xml,

application/xml;q=0.9,*/*;q=0.8

Accept-Encoding: gzip, deflate

Accept-Language: en,en-GB;q=0.5

Connection: keep-alive

Cookie: language=en_US

Host: mail.info.uaic.ro

Referer: http://mail.info.uaic.ro/?_task=login

Upgrade-Insecure-Requests: 1

User-Agent: Mozilla/5.0 … Gecko/20100101 Firefox/51.0

user authentication by using POST method(already existing cookies are transmitted)

sesiuni: exemplificare

HTTP/1.1 302 Found

Cache-Control: private, no-cache, no-store, must-revalidate…

Connection: Keep-Alive

Content-Length: 0

Content-Type: text/html; charset=UTF-8

Date: Thu, 23 Feb 2017 10:25:44 GMT

Keep-Alive: timeout=5, max=100

Last-Modified: Thu, 23 Feb 2017 10:25:44 GMT

Location: ./?_task=mail&_token=cb1924…c9c97819

Server: Apache/2.4.6 (CentOS) mod_fcgid/2.3.9 PHP/5.4.16

Set-Cookie: roundcube_sessid=vnqrt4…2uv2; path=/; HttpOnly

roundcube_sessauth=S92ee64…2c71; path=/; HttpOnly

<!DOCTYPE html>

…

HTTP response a Web session-related cookie is set

redirection after

authentication

sessions: programming

In the case of CGI, session management must be entirely implemented by the programmer

there is no standard way for Web session processing

advanced

alternatives

Web Storage

browser-level storage for lists of key—value pairs via sessionStorage and localStorage attributes

see HTML Living Standard (14 feb. 2020) specificationhtml.spec.whatwg.org/multipage/webstorage.html

for details, studyprofs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html#week10

advanced

“conclusion”

⥁from HTTP to cookies and Web sessions

many thanks to Ciprian Amariei, MSc.

next episode: Web programmingWeb application servers, Web application architecture

brow-ser

presen-tation

pro-cessing

data access

<Web/> pages

HTML, CSS,…

fat serverdumb client

frontend backend

Documents

Tehnologii Webandrei.panu/lectures/EN_web...here, from HTTP to WebSocket (RFC 6455) HTTP: status Success (2xx) 200 Ok, 201 Created, 202 Accepted, 204 No Content, 206 Partial Content,…