Fondamenti del Web

Ingegneria del Software e Fondamenti Web

Corso di Laurea in Ingegneria

Informatica e dell’Automazione
Anno Accademico 2023/2024

Prof. Antonio Ferrara

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
 5 Web Server
e Web Browser
Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Introduzione
ai web server
Il termine web server può riferirsi sia a un componente software che a un componente hardware

Definizione “hardware”

Un web server è un computer che esegue un software di web server e conserva i file che compongono un sito/applicazione Web
Il web server è connesso ad Internet e supporta lo scambio di dati con altri dispositivi connessi

Definizione “software”

Un web server è un software che permette l’accesso (almeno) HTTP HTTP Request
Files
mediante protocollo HTTP alle risorse di uno o più siti/ server
HTTP Response

applicazioni web
Un server HTTP deve comprendere gli indirizzi web (URL),
Web server Browser
comprendere le richieste dei client, processarle e rispondere

Raggiungere un web server è possibile, in generale, conoscendo l’indirizzo (o il nome di dominio) dei siti/applicazioni web che
esso ospita/serve

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Introduzione
ai web server
Berners-Lee sviluppò il primo server web fra il 1990 e il 1991 (CERN httpd)
Nel 1994, fu rilasciato NCSA httpd e poco dopo Apache HTTP Server
Solo dopo la standardizzazione del protocollo HTTP (1996-1997), c’è stata l’esplosione dei server web, fra cui Netscape
Enterprise Server e Microsoft IIS
Dopo gli anni 2000, i browser hanno aumentato il numero di connessioni parallele verso un host, e i server hanno dovuto
gestire un numero enormemente più grande di richieste, favorendo la diffusione di reverse proxy e di nuovi web server (es.
Nginx) capaci di gestire numerose richieste con buone performance
A partire dal 2015, i web server hanno dovuto implementare cambi significativi per introdurre il supporto ad HTTP 2

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Introduzione
ai web server
1 Il modulo di networking del web server riceve una
richiesta per una risorsa

2 La richiesta viene passata a un modulo di

risoluzione dell’indirizzo:
• Se il web server serve più domini, determina il
dominio target della richiesta (virtual hosting) e
la configurazione corrispondente
• L’indirizzo viene risolto in una locazione reale del
file system o mappato secondo direttive
• Se la risorsa richiesta è protetta, vengono
esaminate le credenziali dell’utente
La richiesta viene processata in maniera statica o loop forever doing:
3
accept TCP connection from browser
dinamica
read HTTP request from TCP connection
La risposta generata passa al modulo di process HTTP request
4
write HTTP response to TCP connection
networking che si occupa dell’invio al client che
shutdown TCP connection or keep it alive
ne ha fatto richiesta
Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Gestione
di richieste HTTP
Gestione dei processi
Un server HTTP è un insieme di processi e thread, alcuni dei quali sono in ascolto su particolari porte e altri sono dedicati
alla gestione delle richieste in ingresso
In base al carico, si potrebbe decidere di generare i processi di gestione all’arrivo di nuove richieste oppure di avere un
numero fisso di processi/thread in esecuzione in maniera che essi non siano inizializzati per ogni richiesta
È possibile, in genere, stabilire il numero massimo di richieste che un processo può gestire nell’ambito della stessa
connessione HTTP, il numero massimo di richieste a cui deve sopravvivere prima di essere riavviato e il timeout di
elaborazione per ogni richiesta

Code di richieste

Nell’ambito di connessioni persistenti, il protocollo HTTP/1.1 specifica che, nel contesto di una singola connessione, le
risposte a diverse richieste debbano essere inviate in ordine di arrivo delle richieste (FIFO)
• Mantenere una coda di richieste in input e una coda di richieste in output
• Quando una richiesta deve entrare in elaborazione, viene rimossa dalla coda di input e inserita nella coda di output
• Una volta che l’elaborazione è stata completata, la richiesta è marcata per il rilascio ma rimane nella coda finché tutti i
suoi predecessori non siano usciti dalla coda di output
Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Lettura del
messaggio di richiesta
Un web server deve:
<VirtualHost [Link]>
• Leggere e interpretare un messaggio di richiesta HTTP ServerAdmin webmaster@[Link]
Alias /images /static/images
• Verificare la sua sintassi DocumentRoot /www/docs/neurozen
• Identificare header HTTP conosciuti ServerName [Link]
</VirtualHost>
Vengono inoltre effettuate una serie di operazioni sull’URL della richiesta [Link]
• Normalizzazione: il percorso della risorsa viene pulito e “standardizzato” (es. [Link]
sostituzione di simboli ., rimozione di trailing slash / inutili, ordinamento dei /images ➔ /static/images
/www/docs/neurozen/static/images/[Link]
parametri della query, rimozione di query di default, …)
• Mapping: l’URL viene analizzato per capire a cosa si riferisce e come
debba essere trattato in base alle configurazioni del server (es. sulla base dell’estensione del file o del percorso):
• Riscrittura dell’URL? Virtual hosting? Alias?
• Richiesta di un file statico
• Richiesta dinamica (quale programma o processore deve essere eseguito, quali parametri bisogna passare)
• Traduzione del percorso dell’URL in un percorso del file system
• File statico? Es. [Link] ➔ /home/www/[Link]/path/[Link]
• Directory senza file index? Es. [Link] ➔ generazione dinamica del listing
• Richiesta dinamica? Es. [Link] ➔
/home/www/[Link]/cgi-bin/[Link] ed esecuzione del programma appropriato passando input e query string
Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Delivery di
contenuti statici
Se il server può servire contenuti statici, esso deve poter mappare l’URL di un messaggio di richiesta (dopo URL mapping,
translation e redirection) alla posizione di un file all’interno del file system del server web

Il server può essere configurato per servire solo alcuni tipi di file statici Su un server, prova a
cambiare il
mapping dell’estens
ione .html da
text/html a text
Il server ritrova il file, costruisce la risposta HTTP e la trasmette al client /plain e
vedere come questa
Il server controlla il rendering browser-side del contenuto della risposta mediante pagina viene
visualizzata nel brow
ser
l’header HTTP Content-Type, che viene impostato a un tipo MIME

In base alla configurazione del server, se l’URL della richiesta corrisponde ad una cartella, il server può cercare il primo index
file in quella cartella e servirlo al client (es. [Link])

Esempio di comportamento per una richiesta GET [Link]

int fd = open("[Link]");
int len = read(fd, fileContents, sizeOfFile(fd));
write(tcpConnection, httpResponseHeader, headerSize);
write(tcpConnection, fileContents, len);

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
 Approccio programm
atico allo

Delivery di sviluppo di web app

Questo approccio è
code-centric e

contenuti dinamici richiede che i progra

pagine, senza alcuna
mmi generino le
separazione

Common Gateway Interface

CGI era il meccanismo originario per il delivery di contenuti dinamici, risalente ai primi tempi del Web
CGI assume che, all’arrivo di una richiesta di esecuzione di uno script CGI, venga creato un nuovo processo figlio per
eseguire un particolare programma (scritto in qualunque linguaggio)
Il processo viene terminato quando l’elaborazione della richiesta è completata
Il meccanismo CGI era definito come un insieme di regole, così che qualunque programma che seguisse tali regole poteva
essere eseguito su qualunque server HTTP

Variabili d’ambiente Esempio 1. Determina che [Link] è un programma CGI

impostate in seguito 2. Traduce il path in un file del file system
a una richiesta POST [Link] HTTP/1.1 3. Verifica che il CGI può essere eseguito e l’utente ha i
SERVER_PROTOCOL Host [Link] permessi
User-Agent: …
SERVER_PORT 4. Imposta le variabili d’ambiente
Content-Length: 26
REQUEST_METHOD Content-Type: application/www-form-urlencoded 5. Crea un processo figlio per l’esecuzione del programma
PATH_INFO e passa il corpo della richiesta come standard input
PATH_TRANSLATED zip=08540&name=Mario+Rossi 6. Lo standard output del programma è inviato al modulo
SCRIPT_NAME
QUERY_STRING per l’elaborazione della risposta
HTTP_<HEADER_NAME> 7. La risposta viene elaborata e inviata

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Delivery di Approccio a templa

contenuti dinamici
te allo sviluppo di w
eb app
Questo approccio è
page-centric e più “d
friendly ” esigner

Genera un interleavin
g brutale di logica e
dati con struttura e p accesso ai
Server Side Includes resentazione della p
agina

Il meccanismo SSI risale all’epoca della specifica CGI

Permette di includere file ausiliari o i risultati dell’esecuzione di script CGI all’interno di una pagina HTML
Con CGI, cambiare la pagina HTML di risposta richiede di cambiare lo script
L’idea alla base di SSI è, invece, quella di creare pagine HTML parzialmente popolate (o template) e riempirle con l’output di
programmi CGI o altre operazioni eseguite server-side

<html>
<body>
<!--#exec cgi [Link] -->
</body>
</html>

Per far sì che il server “scopra” ed esegua le macro CGI è quindi necessario associare alle pagine SSI un’estensione
differente (come .shtml) cui sia associata una particolare elaborazione server-side

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Delivery di
contenuti dinamici
Elaborazione di template

I template sono file HTML con “tag” addizionali che indicano metodi per inserire contenuto generato dinamicamente

Fra gli approcci più popolari troviamo Cold Fusion (Adobe) e gli approcci “ibridi” PHP (open source) e Active Server Pages
(Microsoft) che inseriscono in HTML dei container per l’inclusione di script
SSI può essere considerato un approccio a template primitivo (task semplici come l’embedding di file esterni e di output di
programmi CGI)
I processori di template forniscono, in generale, funzionalità più sofisticate come interazione con database e uso di costrutti
iterativi e condizionali (es. cicli for e statement if)
<CFIF [Link] GT 0> Il vantaggio di questo approccio è la sua
<TABLE> <b>
<CFOUTPUT QUERY=“myquery”> <?php if ($xyz >= 3) { “semplicità” nella realizzazione diretta di
<TR> print $myHeading; applicazioni web all’interno di pagine HTML
<TD>#name#</TD> } else {
<TD>#surname#</TD> ?> D’altra parte questo approccio rende sfocata
</TR> HEADER DI DEFAULT
</CFOUTPUT> <?php } ?>
la linea fra scripting e realizzazione di
</TABLE> </b> template
</CFIF>

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Delivery di
contenuti dinamici
Servlet

Le servlet sono classi in Java che hanno accesso alle informazioni presenti
all’interno delle richieste HTTP e che possono generare risposte HTTP

La realizzazione di servlet è possibile mediante le Java Servlet API

all’interno di [Link], che permettono di implementare
applicazioni portabili su diversi web server e con diverse caratteristiche
hardware e sistemi operativi

Le servlet vengono eseguite all’interno di container (ad esempio Apache

Tomcat), eseguiti all’interno di una Java Virtual Machine
I container si occupano del ciclo di vita delle servlet e di gestire le
richieste ad esse destinate

L’interfacciamento fra i container e HTTP avviene mediante Java Native

Interface o mediante connettori HTTP, come nel caso di Tomcat, oppure
può avvenire mediante un webserver come Apache Architettura e funzionamento di Apache Tomcat

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Delivery di
contenuti dinamici Approccio programm
allo sviluppo di web
atico
app
Servlet import [Link].*;
import [Link].*;
import [Link].*;
1 Il web container inizializza l’istanza
servlet chiamando il metodo public class AccessCounter extends HttpServlet {
private Integer sharedCounter;
init(), generando un thread Java
@Override
public void init(final ServletConfig config) throws ServletException {
sharedCounter = 0;
2 Dopo l’inizializzazione, la servlet }
può servire le richieste dei client
@Override
In particolare, quando il container protected void service(HttpServletRequest req, HttpServletResponse res)
riceve una richiesta per una certa throws ServletException, IOException {
int localCounter;
servlet, invoca il metodo synchronized (sharedCounter) {
sharedCounter++;
service() della servlet che si localCounter = sharedCounter;
occupa di processare la richiesta e }
[Link]("text/html");
formulare una risposta [Link]().write("<body>Pagina visitata " + localCounter +
3 Il container può rimuovere la " volte</body>");
}
servlet dall’esecuzione con il }
metodo destroy()
Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Delivery di
contenuti dinamici
Java Server Pages

Le Java Server Pages permettono di evitare la scrittura di codice HTML all’interno delle classi servlet e di inserire, invece,
istruzioni Java all’interno di pagine HTML
Non è necessario, comunque, includere tutta la logica dell’applicazione nella pagina, ma è possibile referenziare componenti
esterni, aiutando a separare la logica dalla presentazione e favorendo il riuso dei componenti

I compilatori JSP si occupano di tradurre le JSP e <html>

trasformarle in servlet eseguibili, che vengono quindi <body>
<%@ page import ="[Link].*" %>
compilati in bytecode Java <% Enumeration e = [Link]();
while ([Link]()) {
String name = (String)[Link]();
Questo meccanismo permette, quindi, di avere moduli String value = [Link](name);
%>
compilati che, nel momento in cui devono processare una
<h3><%=name%>:<%=value%></h3>
richiesta, risultano essere più veloci rispetto ai processori di <% } %>
</body>
template o al parsing necessario con SSI
</html>

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Delivery di
contenuti dinamici
Web framework
Mescolare blocchi di script con formattazione della pagina
rappresenta un’importante violazione del principio di
separazione della logica dalla presentazione
Tale violazione genera numerosi problemi nella manutenzione del
codice, nel riuso, nella responsabilità e nella produttività degli
sviluppatori
L’idea è quella di “distinguere la mappa dal territorio”, cioè separare un
territorio reale dalla sua rappresentazione (che può essere una mappa
stampata, online, o delle indicazioni vocali)

Il pattern model-view-controller permette di separare concetti e responsabilità:

• Model rappresenta i diversi concetti del dominio (clienti, articoli, …) e i metodi per
trovare e gestire i relativi dati
• View presenta i contenuti del Model agli utenti e ne permette l’interazione
• Controller riceve le richieste degli utenti, accede e modifica il Model e seleziona una
View per presentare i risultati
Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Delivery di
contenuti dinamici
Web framework

Una tale complessa interazione fra componenti è stata resa possibile dalla diffusione di web framework che supportano lo
sviluppo di applicazioni web permettendo ai progetti di prendere tale forma in maniera “naturale”, senza forzare la compresenza
di funzionalità diverse nello stesso componente

La maggior parte dei web framework seguono il pattern

MVC, ma alcuni possono seguire altri pattern o lasciare la

}
}
}
libertà di utilizzare qualunque pattern
Il framework controlla il flusso del programma e permette PHP-based Ruby-based Java-based
agli sviluppatori di agganciarsi in tale flusso esponendo
diversi eventi
Un framework offre, solitamente, funzionalità di URL mapping, accesso al

}
}
}
database, caching, autenticazione, sicurezza, etc.
Alcuni microframework, come Flask e Express, offrono un set più limitato di funzionalità, Python-based Microframework JS-based
generalmente legate alla facilitazione della gestione di richieste HTTP
Express, in particolare, offre la possibilità di agganciare dei middleware prima e dopo ogni
richiesta HTTP per realizzare qualunque tipo di funzionalità
Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Altre
funzionalità
Caching

I web browser/proxy tendono a fare caching delle risorse ricevute per evitare di ripetere richieste
Tale meccanismo deve essere supportato dal server che deve implementare la gestione delle politiche di caching sulle
risorse inviate e la validazione delle risorse memorizzate dai client/proxy
Per ridurre l’overload, inoltre, i server possono implementare meccanismi server-side di accesso più veloce a file richiesti
frequentemente
I file generati dinamicamente possono anche essere oggetto di caching (se non aggiornati frequentemente) per essere
serviti a più utenti senza essere ogni volta rigenerati
Quasi sempre, il caching server-side viene effettuato per mezzo di server esterni (ad esempio, reverse proxy) per non
competere con le risorse del server

Gestione del traffico di rete

Alcune situazioni possono sovraccaricare un server: eccesso di traffico legittimo, attacchi DoS, bot, ritardi nella risposta
da parte di altri computer di back-end nella generazione di risposte dinamiche (creazione di code)
Le soluzioni più utilizzate, oltre il caching, sono firewall, meccanismi di gestione della banda e traffic shaping, uso di
diversi web server raggruppati dietro un load balancer, riduzione delle connessioni TCP mediante HTTP/2
Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Introduzione
ai web browser
Il browser rappresenta l’esempio più comune di client web (ma non
è l’unico)

Funzionalità di un web browser

• Generare e inviare richieste ai web server (es. dopo click su link,

digitazione di indirizzo, invio di un form, o parsing di pagine che
contengono risorse addizionali)
• Accettare e interpretare le risposte provenienti dai web server
• Renderizzare il risultato nel browser (o mediante un tool di terze
parti, in base al contenuto)

Le altre funzionalità includono caching, autenticazione, mantenimento

dello stato (cookie), azioni in risposta a header, codici di stato, errori

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Funzioni principali
di un web browser
Trasmissione di una richiesta Ricezione di una risposta

Info da includere negli he

ader di una
richiesta:
Host, User-Agent, Ref
erer,
Date, Accept (con quali
tà),
Accept-Charset, Acce
pt-
Language, Accept-Enc
oding,
Content-Type, Conten
t-
Length, Cookie, Autho
rization
Ricorda i messaggi multip
art!
Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Funzioni principali
di un web browser
Caching

Il browser dovrà avere diversi componenti per la gestione del caching:

• Un componente per includere gli header appropriati nelle richieste (es. per la validazione di entry esistenti)
• Un componente per esaminare le direttive di caching presenti negli header delle risposte
• Un componente per il salvataggio delle risorse e delle diverse informazioni correlate, nonché per la gestione della cache
eviction (per liberare spazio in memoria)

Persistenza dei dati

Il caching, così come i meccanismi di autenticazione e i

meccanismi per il mantenimento dei dati, richiedono
una certa persistenza delle informazioni
Vi sono, comunque, altri tipi di dati come impostazioni,
cronologia, segnalibri, e quelli dei più recenti
meccanismi di Web Storage (HTML5) e di
memorizzazione su cloud di password, cronologia, …
Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Funzioni principali
di un web browser
Rendering engine JavaScript engine

Browser Open Source Browser Open Source

Blink Chrome 28+, Opera 15+ Sì Carakan Opera Sì
Gecko Firefox Sì Chakra Internet Explorer 9+ Sì
KHTML Konqueror Sì Nitro Safari Sì
Presto Opera 14- No SpiderMonkey Firefox No
Trident Internet Explorer No V8 Chrome Sì
WebKit Safari, Chrome 27- Sì

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Caso di studio:
Google Chrome
Rendering engine di Chrome e Safari (WebKit)

L’HTML Parser costruisce il DOM dall’HTML,

mentre il CSS Parser costruisce un CSSOM dal CSS
(un albero di CSS)

DOM e CSSOM vengono uniti nel Render Tree che

registra tutto il contenuto del DOM insieme alle
informazioni di stile di ciascun nodo

Il Render Tree passa in un processo di layout che

stabilisce le coordinate di ogni elemento e viene
poi “disegnato” sullo schermo

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Caso di studio:
Google Chrome
Rendering engine di Chrome e Safari (WebKit)

<html>
<head>
1
<meta …>
<link …>
</head>
<body>
<p>Hello, <span>web performance</span> students</p>
<div><img src=“…”></div>
</body>
</html>
3
body { font-size: 16px; }
p { font-weight: bold; }
span { color: red; }
p span { display: none; }
img { float: right; } 2

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Caso di studio:
Google Chrome
Architettura multiprocessing

Benefici dell’architettura multiprocessing

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)