ISAPI e ASP (ASP - apr'09)

ISAPI
„ Internet Server API
ISAPI
ISAPI ee ASP
ASP „ meccanismo proprietario di MS per creazione di
pagine dinamiche tramite IIS:
„ ogni applicazione ISAPI è una DLL
„ … caricata in memoria alla prima richiesta
Antonio Lioy
„ … lasciata in memoria per soddisfare altre richieste
< lioy @ polito.it >
„ nello stesso spazio di memoria di IIS
(comunicazione bidirezionale tramite specifici
Politecnico di Torino oggetti condivisi tra IIS ed applicazione ISAPI)
Dip. Automatica e Informatica „ può essere tolta dalla memoria solo dal sistemista
„ l'applicazione ISAPI deve essere thread-safe

ISAPI Applicazioni ISAPI: filtri ed estensioni

„ Internet Server API (ISAPI) è l’alternativa MS a CGI
„ CGI crea un processo per ogni richiesta web
„ consuma molte risorse (CPU e RAM) ed i processi
hanno difficoltà a comunicare sia tra loro sia col
server web
„ robusto (crash di un processo, non di tutto il server)
„ ISAPI ha prestazioni migliori perché:
„ usa thread e meccanismi di sincronizzazione per
sfruttare al meglio le risorse
„ lavora nello stesso spazio di memoria di IIS
„ rischio di blocco di tutto il server IIS
„ un filtro ISAPI agisce sul canale HTTP:
„ può effettuare pre-processing della richiesta
„ può effettuare post-processing della risposta
„ es. compfilt.dll (compressione HTTP), md5filt.dll
(HTTP digest authentication), sspifilt.dll (SSL)
„ un'estensione ISAPI è associata ad una pagina con
una specifica estensione:
„ elabora la pagina restituendo al motore HTTP il
codice HTML risultante
„ es. asp.dll (pagine ASP), ssinc.dll (SSI)

Filtro ISAPI Potenzialità dei filtri ISAPI

„ possono per esempio:
server
„ reindirizzare la domanda per bilanciare il carico tra
IIS
diversi server
filtro ISAPI „ aggiungere funzionalità di sicurezza / log
HTTP request „ adattare la risposta alle capacità del client (versione
pre-processing
di HTML e script supportata)
page
client
engine
post-processing
HTTP response

© A.Lioy - Politecnico di Torino (2003-2009) 1

ISAPI e ASP (ASP - apr'09)

Configurazione di estensioni ISAPI ASP

„ in base all’estensione della URL
„ usare MMC per gestire una virtual directory di IIS
„ in Properties / Home Directory / Application
Settings / Configuration / Mappings è possibile
associare:
„ estensioni (es. “.asp”)
„ applicazioni (es. asp.dll)
„ comandi HTTP accettati (es. GET, HEAD, POST)
„ possibile anche associare pagine web specifiche
per vari errori applicativi
„ Active Server Pages
„ è un'estensione ISAPI (asp.dll, circa 300 KB)
associato di default ai file con estensione ".asp"
„ permette di inserire in una pagina HTML:
„ degli script server-side in vari linguaggi interpretati
(default: VBscript; possibile anche JS)
„ delle variabili di IIS
„ interazione con oggetti ASP built-in

ASP (Active Server Pages) ASP

„ ASP è una tecnologia:
„ messa a disposizione dal server Microsoft Internet
ASP Information Server (IIS)
ASP èè una
una tecnologia
tecnologia
(non „ di scripting lato server (server-side) per sviluppare
(non un
un linguaggio
linguaggio di di scripting)
scripting) applicazioni web dinamiche
proprietaria
proprietaria Microsoft
Microsoft „ una pagina ASP contiene degli script che vengono
che
che permette
permette l’interpretazione
l’interpretazione elaborati da un estensione ISAPI del server web
degli
degli script
script dal
dal lato
lato server
server „ il risultato dell’elaborazione viene inviato al client
„ ASP è indipendente dal linguaggio di scripting

ASP: architettura ASP: architettura

„ motore ASP: file
HD x.asp
„ ASP.DLL 2. lettura
1. GET x.asp
pagina ASP
„ estensione ISAPI del web server che interpreta i file
.asp server 5. pagina (D)HTML
browser canale HTTP web ASP.DLL
„ servizio multithread (estensione ISAPI) (IIS)
3. interpretazione
„ file ASP: codice ASP
6. pagina (D)HTML
„ file di testo con estensione .asp interprete
(VBScript, JS)
„ consiste in HTML standard e linguaggio di script
racchiuso tra i caratteri speciali “<%” e “%>” 4. accesso a
dati e oggetti

DB HD

© A.Lioy - Politecnico di Torino (2003-2009) 2

ISAPI e ASP (ASP - apr'09)

ASP: accesso ai dati Linguaggi di script

„ IIS interpreta nativamente due linguaggi:
Sybase DB2
„ JScript / JavaScript
Oracle „ VBScript (linguaggio di default)
ActiveX Data Objects „ possibile aggiungere PerlScript, Python, REXX ed
(ADO)
scripting: user data altri
- VBscript oggetti interni server data
- JS (built-in) file system
„ per specificare l’interprete da usare:
-... OS data
oggetti
proprietari <%@ LANGUAGE="JavaScript" %>

DCOM C++ <%@ LANGUAGE="VBScript" %>

CORBA Java

Esempio di file ASP (con JS) Risultato dell’elaborazione

<html> <html>
<head> <head>
<title>Saluti</title> <title>Saluti</title>
</head> </head>
<body> <body>
<%@ LANGUAGE="JavaScript" %> <h1>Ciao!</h1>
<% <h2>Ciao!</h2>
parte generata
for (var i=1; i<=5; i++) { <h3>Ciao!</h3>
dinamicamente
Response.write ("<h"+i+">Ciao!</h"+i+">"); <h4>Ciao!</h4>
} <h5>Ciao!</h5>
%> </body>
</body> </html>
</html>

JS: oggetto Enumerator JS: oggetto Enumerator, metodi

„ se si vuole ciclare su una Collection (=array „ atEnd( )
associativo) non si può usare il for-in „ ritorna un valore Booleano che indica se si è alla
„ necessario un oggetto Enumerator fine della collection
„ moveFirst( )
e = new Enumerator(collection) „ aggiorna l’elemento corrente al primo elemento
e.moveFirst(); „ moveNext( )
while (!e.atEnd())
„ sposta l’elemento corrente al successivo all’interno
{
Response.write(e.item()); della collection
e.moveNext(); „ item( )
}
„ ritorna l’elemento corrente

© A.Lioy - Politecnico di Torino (2003-2009) 3

ISAPI e ASP (ASP - apr'09)

JS: esempio di Enumerator Oggetti interni ASP

var e = new Enumerator(Request.ServerVariables); „ sono oggetti che non devono essere istanziati
e.moveFirst(); „ oggetti interni:
while (!e.atEnd())
„ Request
{
Response.Write(e.item()+"<BR>"); „ Response
e.moveNext(); „ Application
}
„ Session
„ Server
„ sono oggetti ASP, disponibili in entrambi i
linguaggi di script (Javascript e VBscript) ma
purtroppo la documentazione di MS è quasi
esclusivamente per Vbscript …

Request Request
proprietà metodi
„ gestisce le informazioni ricevute da un client:
„ contenuto di un form inviato con la GET/POST
„ intestazione del protocollo HTTP TotalBytes Request BinaryRead
„ cookie (valori inviati dal browser)

ClientCertificate ServerVariables

QueryString Cookies

Form
collection

Request collection Request.QueryString: esempio

„ ClientCertificate <form action="http://a.b.com/x.asp" method="get">
„ estrae i valori delle estensioni di un certificato <input type="text" name="nome">
digitale X.509 inviato dal client <input type="Submit">
„ QueryString </form>

„ estrae i valori dei parametri inviati mediante GET

GET /x.asp?nome=MARA HTTP/1.1
„ Form
Host: a.b.com
„ estrae i valori dei parametri inviati mediante POST
„ Cookies (x.asp)
„ estrae i valori dei cookie applicativi
. . .
<% user = Request.Cookies("username") %> n = Request.QueryString("nome") MARA

© A.Lioy - Politecnico di Torino (2003-2009) 4

ISAPI e ASP (ASP - apr'09)

Request collection Server Variables: esempio

„ ServerVariables <table border=1>
<tr>
„ estrae i valori delle variabili dell’intestazione del
<td><b>Server variable</b></td>
protocollo HTTP <td><b>Value</b></td>
„ i seguenti esempi restituiscono il modello del </tr>
browser ed il nome DNS del server (come scritto <%
nella URL) e = new Enumerator(Request.ServerVariables)
for ( ; !e.atEnd(); e.moveNext()) {
%>
<% b = Request.ServerVariables("HTTP_USER_AGENT")%> <tr>
<td><%= e.item() %></td>
<% serv = Request.ServerVariables("HTTP_HOST“)%> <td><%= Request.ServerVariables(e.item()) %></td>
</tr>
<% } %> JS
</table>

Request: proprietà Request: metodi

„ TotalBytes „ BinaryRead
„ solo lettura „ riceve i dati inviati dal client in una POST
„ specifica il numero di byte che il client ha mandato
nel body della richiesta

<% bytecount = Request.TotalBytes %>

Importante: parametri dei form in ASP Parametri dei form in ASP: esempio
„ i campi dei form estratti lato server tramite <form action="http://a.b.com/x.asp" method="get">
Request.QueryString o Request.Form ... <input type="text" name="nome">
„ ... non sono stringhe (come invece capita <input type="text" name="anni">
leggendoli in uno script lato client) <input type="Submit">
„ ... ma sono "oggetti ASP" </form>

„ dovrebbero essere convertiti automaticamente al

tipo necessario per una certa operazione ma
talvolta il meccanismo automatico fallisce ed il
risultato non è quello desiderato
. . .
var n = String( Request.QueryString("nome") )
(suggerimento) convertire sempre esplicitamente var a = Number( Request.QueryString("anni") )
i campi dei form al tipo di oggetto desiderato . . .

© A.Lioy - Politecnico di Torino (2003-2009) 5

ISAPI e ASP (ASP - apr'09)

Response Response
„ invia informazioni al client Status AddHeader
„ configura i cookie mediante la collection Cookies Buffer AppendToLog

ContentType BinaryWrite
Response
Charset Clear

Expires Flush

ExpiresAbsolute Write
proprietà
End

collection Cookies Redirect

metodi

Response: proprietà Response: proprietà

„ Boolean Buffer
„ se impostata a TRUE il server non invia output al
client finché non viene terminata completamente
l’elaborazione dello script
„ String ContentType
„ configura il MIME tipe client (es. “text/html”)
„ String Charset
„ configura il charset della risposta (es. “iso-8859-1”)
„ Int Expires
„ configura il tempo in minuti di validità della pagina
nella cache del client (default = 10)
„ Date ExpiresAbsolute
„ configura in termini di tempo assoluti (ossia data e
ora di scadenza) la validità della pagina nella cache
del client
„ String Status
„ configura lo status HTTP inviato dal server al client
„ deve contenere sia il codice numerico sia il
commento (es. “401 Unauthorized”)

Response: metodi Response: metodi

„ AddHeader ( „ End
String HeaderName, String HeaderValue) „ termina lo script
„ aggiunge un’intestazione HTTP „ Flush
„ AppendToLog (String logText) „ invia al client il contenuto del buffer output
„ aggiunge una riga al file di log del web server „ Redirect (String URI)
„ BinaryWrite (Array Data) „ redirige il client verso un URL
„ invia al client dati binari, utile ad esempio per inviare „ Write (data)
un immagine o un file Word
„ scrive i dati nello stream HTML inviato al client
„ Clear
„ i dati non devono contenere “%>” da sostituirsi con
„ pulisce l’output buffer “%\>”

© A.Lioy - Politecnico di Torino (2003-2009) 6

ISAPI e ASP (ASP - apr'09)

Response: metodi Response: Cookies collection

„ i seguenti due costrutti sono equivalenti
<% Response.write("Ciao"); %>
„ per creare un cookie con un certo nome e valore:
„ Response.Cookies("cookiename") = "cookievalue"
„ invece di creare cookie distinti, si possono inserire
valori multipli in uno stesso cookie specificando
delle "chiavi" (key) alla sua creazione:
„ Response.Cookies("cookiename")("key") = "keyval"

<% ="Ciao" %> „ le coppie chiavi:valore verranno inserite nel cookie

usando la codifica urlencoded
„ le chiavi sono a loro volta una Collection
„ per sapere se esistono chiavi usare la proprietà:
„ HasKeys
„ (sola lettura) restituisce il numero di chiavi

Proprietà di un cookie in ASP Response: esempio impostazione cookie

„ Expires = vardate
„ data e ora di scadenza del cookie
„ se non è impostata, è un cookie "volatile"
„ attenzione! impostare con setVarDate(date)
„ Secure = true | false
„ tramesso solo su canali sicuri (SSL, TLS)
„ Path = pathprefix
var Nome = Request.Form("yourname");
var Cognome = Request.Form("yourfamilyname");
Response.Cookies("myapp")("nome") = Nome;
Response.Cookies("myapp")("cognome") = Cognome;
var expire = new Date();
expire.setMonth(expire.getMonth()+2);

„ trasmesso solo a pagine col prefisso indicato Response.Cookies("myapp").Expires =

„ Domain = domain expire.setVarDate();
„ trasmesso solo a pagine nel dominio indicato
Response.Cookies("myapp").Domain = "polito.it";
„ N.B. proprietà di un cookie, non delle singole chiavi

Server Server: Proprietà

„ fornisce metodi e proprietà per accedere alle „ Int ScriptTimeout
risorse del server „ definisce un timeout (in secondi) per l’esecuzione
„ usato per istanziare componenti dello script
„ i componenti sono pacchetti di oggetti

CreateObject

Execute
ScriptTimeout Server
HTMLEncode

proprietà MapPath
metodi

© A.Lioy - Politecnico di Torino (2003-2009) 7

ISAPI e ASP (ASP - apr'09)

Server: metodi Server: metodi

„ Execute (String)
„ esegue il file .asp che si trova in string (path relativo
o assoluto; se assoluto lo script deve appartenere
alla medesima application)
„ Component CreateObject (String)
„ istanzia un componente (può essere un qualsiasi
componente installato sul server, es. ActiveX)
<% MyAd =
new Server.CreateObject("MSWC.AdRotator"); %>
„ String HTMLEncode (String)
„ codifica una stringa in HTML usando gli opportuni
caratteri di escape (es. &egrave; )
„ String MapPath (String)
„ mappa una virtual directory sulla directory fisica del
server (importante per agganciare un file o un DB)
„ String URLEncode (String)
„ codifica una stringa in modo appropriato per essere
usata come una URL (es. %20)

JS

Oggetti sul server - esempio Application

„ calcolo automatico data ultima modifica di un file: „ un’applicazione è un insieme configurabile
dall’amministratore di risorse del server IIS
<% „ per default c’è una sola applicazione che
var fso = comprende tutte le pagine ASP
Server.CreateObject("Scripting.FileSystemObject")
var file = fso.GetFile( „ oggetto condiviso da tutti gli utenti (=browser che
Server.MapPath("avvisi.txt")) si collegano ad una qualunque pagina ASP
var date = new Date( dell’applicazione)
Date.parse(file.DateLastModified)) „ le informazioni perdurano fintanto che il server IIS
rimane attivo
Response.write (
"Document: " + file.name + „ usato per condividere informazioni tra diversi client
" / Last update: " + date.toGMTString()) che richiedono risorse appartenenti alla stessa
%> applicazione

Application Application: collection

„ Contents
Lock „ collezione delle variabili di applicazione

Unlock
Application
Contents.Remove <% Application("visitors") = 0 %>

Contents.RemoveAll
Contents
Collection metodi

© A.Lioy - Politecnico di Torino (2003-2009) 8

ISAPI e ASP (ASP - apr'09)

Application: metodi Session

„ Lock
„ blocca la scrittura della collection (sincronizzazione)
„ Unlock
„ sblocca la scrittura della collection
„ Contents.Remove (nome_variabile)
„ cancella la variabile dalla collezione
„ Contents.RemoveAll
„ cancella tutte le variabili della collezione
„ mantiene informazioni sulla sessione attiva di un
singolo specifico client
„ ogni client che si collega genera automaticamente
un’istanza di un oggetto Session
„ gestito tramite il cookie volatile ASPSESSIONID (un
indice ai dati di sessione in RAM sul server IIS)

Session Session: collection

proprietà
„ Contents
metodi
„ collezione delle variabili di sessione
CodePage
Abandon
LCID
Session Contents.Remove
SessionID
<% Session("nome") = "Antonio" %>
Contents.RemoveAll
Timeout

Collection Contents

Session: proprietà Session: metodi

„ SessionID „ Abandon
„ contiene l’identificativo della sessione (uint32) „ abbatte la sessione (e quindi cancella tutti i
„ Int Timeout Contents relativi)
„ specifica un valore di timeout in minuti per la „ Contents.Remove (nome_variabile)
sessione (default: 10’) „ cancella la variabile dalla collezione della sessione
„ un valore troppo piccolo (es. minore di 4’) fa
perdere lo stato „ Contents.RemoveAll
„ un valore troppo grande (es. maggiore di 20’) „ cancella tutte le variabili della collezione della
sovraccarica il server perché lo obbliga a tenere sessione
tante sessioni attive in memoria
„ impostarlo al tempo massimo che l’utente impiega
per passare da una pagina all’altra

© A.Lioy - Politecnico di Torino (2003-2009) 9

ISAPI e ASP (ASP - apr'09)

File Global.asa File Global.asa

<script language="JScript" runat="server">
„ il file Global.asa contiene eventi legati alle
applicazioni ed alle sessioni function Application_OnStart(){
Application("visitors")=0;
„ all’avvio di una nuova sessione il server lancia la }
procedura Session_OnStart function Application_OnEnd(){
}
„ alla chiusura di una sessione lancia la procedura function Session_OnStart(){
Session_OnEnd Application.Lock();
Application("visitors")=Application("visitors")+1;
„ all’avvio di un’applicazione (dopo il restart del Application.UnLock();
server IIS) lancia la procedura Application_OnStart }
„ alla chiusura di un’applicazione lancia la procedura function Session_OnEnd(){
Application.Lock();
Application_OnEnd Application("visitors")=Application("visitors")-1;
Application.UnLock();
}
</script> JS

Direttive ASP @ #include

„ @LANGUAGE „ in pagine ASP è possibile usare una sola direttiva
„ imposta il linguaggio di scripting SSI: #include
„ @ENABLESESSIONSTATE „ il file esterno viene incluso prima di passare la
pagina all’interprete ASP
„ impostare a False per disabilitare le sessioni ASP
(per risparmiare tempo di esecuzione e memoria) „ con tag “virtual” si usa pathname assoluto, con /
equivalente alla radice del server web
„ @CODEPAGE
„ con tag “file” si usa pathname relativo a partire
„ imposta la codepage di default dalla cartella ove è presente il file con #include
„ @LCID „ sintassi:
„ imposta il formato per visualizzare data e ora
<!--#include virtual="pathname_assoluto" -->
„ @TRANSACTION
<!--#include file="pathname_relativo" -->

Esempio ASP (in JS) Riferimenti per ASP

<form method="post" action="e1.asp" name="F1">
Nome: <input type="text" name="nome"><br>
l
htm
Email: <input type="text" name="email"><br>
m.
http://msdn.microsoft.com/library/default.asp?
<input type="submit" name="Submit" value="Invia">
for url=/library/en-us/iissdk/iis/iis_web_pages.asp
</form>

http://aspjavascript.com
<%@ LANGUAGE="JavaScript"%>
<%
if (Request.Form("nome")=="" || Request.Form("email")=="") { http://www.w3schools.com/asp/
Response.Redirect("form.html"); (attenzione: è in Vbscript)
}
else { http://www.comptechdoc.org/
Response.Write ("Nome: " + Request.Form("nome“)
+ "<br> E-mail: " + Request.Form("email"));
independent/web/cgi/javamanual/
p
} .as
%> e1

© A.Lioy - Politecnico di Torino (2003-2009) 10

CSS (mar'09)

HTML (Hyper Text Markup Language)

CSS
CSS „ linguaggio di descrizione della pagina
(Cascading
(Cascading Style
Style Sheets)
Sheets) „ descrizione testuale (file di testo)
„ specifica tramite comandi (tag) interpretati dai
browser
„ i file HTML contengono tre tipi di informazioni:
Antonio Lioy „ il testo vero e proprio del documento da visualizzare
< lioy@polito.it > „ una suddivisione logica del documento in parti (titolo,
paragrafi, ...)
Politecnico di Torino „ indicazioni sulla presentazione grafica del

Dip. Automatica e Informatica documento (formattazione, ovvero lo stile di

visualizzazione)

HTML: stili HTML: problema sugli stili

„ i tag furono originariamente pensati per definire il
contenuto logico del documento e non la
formattazione (che veniva lasciata al browser)
„ <h1> vuol dire “questo è un titolo di primo livello”
„ <p> vuol dire “qui inizia un paragrafo”
„ e così via
„ sono stati aggiunti nuovi tag per la gestione della
formattazione (ad es. <font>) indipendenti dai
componenti logici (titolo, paragrafo, tabella, … )
„ è diventato sempre più difficile creare siti Web dove
il contenuto dei documenti HTML è chiaramente
separato dalle regole per la loro formattazione
„ i siti sono diventati insiemi molto complessi in cui
si vuole mantenere un aspetto grafico omogeneo
„ le regole di formattazione applicate in maniera
“selvaggia” rendono difficile la manutenzione del
sito

La soluzione: CSS CSS: definizione

„ Cascading Style Sheets
„ introdotti dal World Wide Web Consortium (W3C)
nella specifica HTML 4.0 ed ora usati anche per
XHTML e XML
„ i fogli di stile descrivono come visualizzare i
componenti logici di un documento:
„ CSS1 (dicembre 1996)
„ http://www.w3.org/TR/REC-CSS1
„ 50 proprietà
„ CSS2 (maggio 1998) e CSS2.1 (luglio 2007)
„ http://www.w3.org/TR/CSS2/ (vari errori)

„ il titolo di primo livello „ http://www.w3.org/TR/CSS21/

„ lo sfondo della pagina „ aggiunge altre 70 proprietà a CSS1 (media-specific

style-sheet – es. per stampanti e dispositivi audio –
„… font scaricabili, tabelle, posizionamento di elementi)
„ in questo modo si separano nettamente il contenuto „ CSS3 in corso di sviluppo
ed il formato di presentazione

© A.Lioy - Politecnico di Torino (2003-09) F.1

CSS (mar'09)

CSS: risorse CSS

„ CSS home page at W3C „ descrizione normalmente salvata in file di testo
„ http://www.w3.org/Style/CSS/ esterni al documento HTML
„ tutorial ed altre risorse „ file con estensione “.css”

„ http://www.w3.org/Style/CSS/learning „ file referenziato all’inizio del documento HTML

„ servizio automatico di validazione „ lo stesso file CSS può essere incluso da molte
pagine HTML
„ http://jigsaw.w3.org/css-validator/
„ è possibile cambiare l’aspetto di un intero sito
modificando un solo file!
„ possibile – ma sconsigliato – definire lo stile in-line:
„ per un singolo file
„ per singoli tag

Sintassi CSS Sintassi CSS - esempi

„ la sintassi CSS è costituita da 3 parti /* tag */
„ un selettore, una proprietà ed un valore
body { background-color: gray }
p { font-family: "sans serif" }
„ selector { property : value ; ... }
/* tag.classe */
„ il selettore è il nome di un tag, di una classe o un p.centrato { text-align: center; color: green }
identificatore unico
/* classe */
„ tag_name .warning { color: red }
„ [ tag_name ].class /* lista di tag */
„ [ tag_name ]:pseudo-class h1, h2, h3 {color: green }
„ #unique_id /* tag:pseudo-classe */
a:hover { background: aqua }
„ il nome del tag può essere omesso (o si può usare *)
per indicare qualunque tag /* #id */
#footer { font-style: italic }

Visione gerarchica di HTML Ereditarietà gerarchica

... „ le proprietà assegnate ad un elemento sono
<body> automaticamente ereditate da tutti i suoi
<h1>I Re di Roma</h1> discendenti
<p>I primi tre Re di Roma:</p>
<ul> gerarchia „ possibile però fornire stile per un discendente
<li>Romolo</li> degli „ si applica sempre la regola più specifica
<li>Numa Pompilio</li> oggetti
„ esempio: per impostare il tipo di font di una pagina
<li>Tullo Ostilio</li>
</ul>
HTML è meglio specificare lo stile del BODY invece
body che di tutti gli elementi specifici
</body>
h1 p ul
„ eccezione: lo sfondo (background)
fratelli
primo figlio li li li

© A.Lioy - Politecnico di Torino (2003-09) F.2

CSS (mar'09)

Selettori gerarchici Selettori condizionali

„ possibile specificare selettori in modo gerarchico „ E[A]
per condizionare l’applicazione delle proprietà solo „ elemento E con un valore assegnato all'attributo A
a casi specifici
„ E [ A="Val"]
„ E1 E2
„ elemento E con valore Val assegnato all'attributo A
„ elemento E2 quando discende da E1
„ E : lang(L)
„ E1 > E2
„ elemento E nella lingua L
„ elemento E2 quando è figlio di E1
„ E : focus
„ E1 + E2
„ elemento E quando ha il "focus" (es. è attivo un
„ elemento E2 quando immediatamente preceduto da campo per inserire testo)
un fratello E1
„ E:first-child
„ elemento E quando è il primo figlio del suo genitore

Sintassi dei commenti in CSS Richiamare un foglio di stile (link)

„ stessa sintassi del linguaggio C, ossia /* … */ „ ciascuna pagina HTML che si basa su un certo file
di stile deve includerne il nome nella sezione
/* questo e' un commento */ <head> mediante il tag <link rel="stylesheet" …>
p „ il browser leggerà le definizioni nel file (dopo averlo
{ scaricato) e formatterà opportunamente la pagina
text-align: center; da visualizzare
/* questo e' un altro commento */
„ esempio:
color: red
}
<head>
<link rel="stylesheet"
type="text/css"
href="polito.css">
<title> . . .
</head>

Foglio di stile interno Per i vecchi browser ...

„ si può definire uno stile direttamente nella sezione „ i browser ignorano i tag sconosciuti ma
<head> mediante il tag <style> visualizzano ciò che è contenuto tra i tag a meno
„ opzione sconsigliata perché si perdono i vantaggi che non sia commentato
della condivisione dello stile tra più pagine „ i nuovi browser ignoreranno i segni di commento
„ utile solo per fare prove rapide (migrare poi lo stile (perché nei fogli di stile i commenti sono diversi)
ad un CSS esterno)
<head>
<head> <style type="text/css">
<style type="text/css"> <!--
body { background-color : gray } body {background-color: gray }
</style> -->
. . . </style>
</head> . . .
</head> 19

© A.Lioy - Politecnico di Torino (2003-09) F.3

CSS (mar'09)

Stile per singoli tag (in-line style) Definizioni multiple

„ quando usare un CSS sarebbe troppo complesso si „ nel caso di definizione multipla dello stile di un
consiglia comunque di usare la sintassi del CSS elemento, il browser decide lo stile di tale elemento
tramite l’attributo STYLE nei singoli tag considerando “in cascata” tutte le definizioni con la
„ esempio: seguente priorità:
„ impostazioni sul tag (alta priorità)
<!-- vecchio HTML -->
„ foglio di stile interno
Prof. Antonio „ foglio di stile esterno (bassa priorità)
<b>Lioy</b>

<!-- CSS-like -->

Prof. Antonio
<span style="font-weight:bold">Lioy</span>

Definizioni multiple: esempio Media-type

„ un foglio di stile esterno collegato alla pagina
contiene la seguente definizione
„ h1 {color: red; text-align: left}
„ mentre un foglio di stile interno alla pagina
contiene:
„ h1 {text-align: right}
„ la definizione risultante di <h1> per il browser sarà
„ possibile specificare che un foglio di stile si applica
solo se la pagina è visualizzata su uno specifico
supporto multimediale (o "media-type"):
„ parametro "media=…" del tag LINK
„ possibile elencare più media-type, separati da
virgola
„ esempio:

<head>
color: red <link rel="stylesheet" type="text/css"
text-align: right href="polito_stampa_A4.css" media="print">
. . .
</head>

Media-type noti Media-type e media-group

„ definiti in CSS-2.1 media-type media group
„ all paged, visual, audio, grid, static,
continuous speech, tactile bitmap interactive
„ braille (dispositivo tattile Braille)
braille continuous tactile grid both
„ embossed (stampante Braille a pagina)
embossed paged tactile grid static
„ handheld (= piccolo schermo, banda limitata) handheld both visual, audio, grid, both
„ print (stampante a pagina, pre-print view) speech bitmap
print paged visual bitmap static
„ projection
projection paged visual bitmap interactive
„ screen screen continuous visual, audio bitmap both
„ speech (in CSS2 era "aural") speech continuous speech N/A both
„ tty (stampante a spaziatura fissa; vietato usare "px") tty continuous visual grid both
tv both visual, audio bitmap both
„ tv (=bassa risoluzione + audio)

© A.Lioy - Politecnico di Torino (2003-09) F.4

CSS
Includere un foglio di stile (@import)
„ un CSS può importare le regole di altri CSS in modo
assoluto o condizionato al media-type
„ sintassi
@import: url ("URI_CSS") [ media1 , media2 , ... ] ;
„ da inserirsi prima di qualunque regola di
formattazione
„ esempio (all'interno di un file/sezione CSS):
@import url("poli_general.css");
@import url("poli_stampa.css") print;
body { color: blue }
. . .
HTML: uso dell’attributo class
<p class="normale">
Il poeta ha scritto:
</p>
<p class="citazione">
Nel mezzo del cammin di nostra vita ...
</p>
Il poeta ha scritto:
Nel mezzo del cammin di nostra vita ...
CSS: colori
„ alcuni colori predefiniti ed accessibili per nome:
Black, White, Gray, Silver,
Yellow, Red, Purple, Fuchsia, Maroon,
Green, Lime, Olive, Aqua, Teal, Blue, Navy
„ altri colori specificabili mediante il loro codice RGB
esadecimale, decimale o percentuale
„ esempi (equivalenti a "red"):
„ rgb (255, 0, 0)
„ rgb (100%, 0%, 0%)
„ #ff0000
„ #f00 /* abbreviazione per due cifre hex uguali */
„ N.B. stessi nomi di HTML ma formato RGB diverso
© A.Lioy - Politecnico di Torino (2003-09)
(mar'09)
CSS: definizione dell’attributo class
„ è possibile definire stili differenti per uno stesso
elemento di HTML usando l’attributo “class”
„ esempi:
„ un paragrafo “normale” allineato a sinistra
„ un paragrafo “citazione” centrato e corsivo
„ una classe “centrato” da usarsi al posto di <center>
p.normale { text-align: left }
p.citazione {
text-align: center; font-style: italic }
/* sconsigliato: non e' una classe "logica" */
.centrato { text-align: center }
CSS: unità di lunghezza
„ relative:
„ "em" = altezza della lettera "M" nel font corrente
„ "ex" = altezza della lettera "x" nel font corrente
„ "px" = dimensione di un pixel
„ assolute:
„ "in" = inch (25.4 mm)
„ "cm" o "mm"
„ "pt" = punto tipografico (1/72 di ich)
„ "pc" = pica (12 pt)
„ N.B. "em" ed "ex" sono riferite al font del genitore
se usate per definire la dimensione di un font
CSS: background (I)
„background-color: colore | inherit | transparent
„ "transparent" è il default
„ background-image: url("image_URI")
„ URL dell’immagine
„ si suggerisce di specificare anche un colore da
usarsi:
„ se non si riesce a caricare l'immagine
„ per contornare l'immagine
„ visibile nelle trasparenze dell'immagine
F.5
CSS
CSS: background (II)
„ background-repeat: repeat | repeat-x | repeat-y |
no-repeat | inherit
„ copie multiple dell'immagine per coprire tutto lo
sfondo oppure solo in orizzontale o verticale
„ background-position: posizione_h posizione_v
„ ogni posizione può essere una keyword, una
lunghezza (distanza da angolo in alto a sinistra) o
una percentuale (della dimensione del contenitore)
„ keyword (orizzontale): left, center, right
„ keyword (verticale): top, center, bottom
„ se c'è una sola keyword la seconda si assume
essere "center"
CSS: text properties (I)
„ color: colore
„ text-align: left | right | center | justify
„ text-transform: none | capitalize | uppercase |
lowercase
„ text-decoration: none | underline | overline | line-
through | blink
„ text-indent: lunghezza | percentuale
„ possibili valori negativi (testo sporge a sinistra)
CSS: font properties (I)
„ font-style: normal | italic | oblique
„ N.B. oblique sottilmente diverso da italic
„ font-weight: normal | bold | 1…1000
„ il valore numerico indica la saturazione del nero
„ font-variant: normal | small-caps
„ font-stretch: ultra-condesed | extra-condensed |
condensed | semi-condensed | normal |
semi-expanded | expanded | extra-expanded |
ultra-expanded
„ raramente disponibile su UA
© A.Lioy - Politecnico di Torino (2003-09)
(mar'09)
CSS: background (III)
„ background-attachment: fixed | scroll | inherit
„ immagine in posizione fissa o segue l'eventuale
scorrimento del contenuto
„ background: color image_URI repeat attachment
position | inherit
„ formato sintetico per tutte le varie specifiche
„ non importa l'ordine perché ogni elemento ha una
sintassi diversa (possibile anche omettere elementi)
„ esempio (sfondo grigio, immagine centrata, segue il
contenuto)
background: gray url("polito_logo.jpg")
scroll center center no-repeat
CSS: text properties (II)
„ line-height: normal | fattore | lunghezza |
percentuale
„ il valore del fattore moltiplicativo viene ereditato tale
e quale mentre per la percentuale si eredita il valore
numerico risultante
„ esempi:
„ { line-height: 1.2; font-size: 10pt } = i figli
ereditano per l'altezza delle loro righe un fattore
1.2 da applicarsi alla dimensione loro font
„ { line-height: 120%; font-size: 10pt } = i figli
ereditano per l'altezza delle loro righe un valore
fisso di 12pt
CSS: font properties (II)
„ font-size: dimensione_del_font
„ valore assoluto (pt, mm, …)
„ valore relativo (em, ex, …)
„ percentuale
„ scala assoluta (1…7, normale=3) o relativa (+/– N)
„ xx-small x-small small medium large x-large xx-large
(notare che manca “normal” e la scala non è definita)
„ note:
„ i valori relativi e le percentuali sono riferite al font
dell'elemento genitore (può essere il default dell'UA)
„ preferire valori relativi o percentuali, evitare valori
assoluti
F.6
CSS (mar'09)

CSS: font properties (III) CSS: modello di formattazione

„ font-family: lista_di_nomi_di_font „ ogni blocco è visto come un contenitore (box)
„ lista ordinata (Courier, “Courier New”, …)
„ UA sceglie first match coi font disponibili localmente margin (trasparente)

„ utile specificare un font “generico” in ultima posizione border

„ occhio alla compatibilità tra i font alternativi elencati padding
„ font generici (e compatibilità):
contenuto
„ serif (times, “times new roman”, palatino, ...)
„ sans-serif (arial, helvetica, verdana, ...)
„ monospace (courier, “courier new”, fixed, …)
„ cursive (“comic sans MS”, florence, ...) larg. elemento
„ fantasy (impact, oldtown, ...) larghezza contenitore

CSS: dimensioni dei contenitori CSS: dimensioni margini e padding

„ width: lunghezza | percentuale | auto | inherit „ margin-left, margin-right, margin-top, margin-
„ min-width: lunghezza | percentuale | inherit bottom: auto | lunghezza | percentuale
„ max-width: lunghezza | percentuale | none | inherit „ la percentuale è riferita alla larghezza del genitore

„ larghezza (fissa, minima, massima) del contenuto „ margin: m_top_bottom_left_right

margin: m_top_bottom m_left_right
„ height: lunghezza | percentuale | auto | inherit margin: m_top m_right_left m_bottom
„ min-height: lunghezza | percentuale | inherit margin: m_top m_right m_bottom m_left
„ max-height: lunghezza | percentuale | none | inherit „ formato sintetico (in quattro versioni) per le
„ altezza (fissa, minima, massima) del contenuto: dimensioni dei margini
„ corrispondenza tra numero parametri e margini
seguita anche per i bordi
„ padding-left, padding-right, padding-top, padding-
bottom, padding: auto | lunghezza | percentuale

CSS: bordi dei contenitori CSS: formati sintetici per i bordi

„ border-top-style, border-right-style, „ border-top, border-right, border-bottom, border-left,
border-bottom-style, border-left-style, border: [ width ] [ style ] [ color ]
border-style: none | hidden | dotted | dashed | solid | „ nella forma sintetica "border" si può specificare un
double | groove | ridge | inset | outset unico valore uguale per tutti i bordi
„ stile di uno specifico bordo o forma sintetica „ esempio:
„ border-top-width, border-right-width,
border-bottom-width, border-left-width, border: medium red ridge
border-width: thin | medium | thick | lunghezza
„ dimensione di uno specifico bordo o forma sintetica
„ border-top-color, border-right-color,
border-bottom-color, border-left-color,
border-color: colore | transparent | inherit
„ colore di uno specifico bordo o forma sintetica

© A.Lioy - Politecnico di Torino (2003-09) F.7

CSS (mar'09)

CSS: link properties CSS: layout grafico

„ per definire lo stile dei link nei vari stati si usano
pseudo-classi:
„ :link (link non visitato)
„ :visited (link visitato)
„ :active (link su cui viene fatto click)
„ :hover (link puntato dal mouse)
„ oppure si possono associare classi / stili al tag A
(indipendenti dallo stato)
„ esempi:
a:link { color: blue }
a:hover { background: aqua }
a.semplice { text-decoration: none }
„ posizionamento dei vari contenitori (box)
„ float: left | right | none
„ contenitore mobile
„ posizionamento orizzontale rispetto al padre
„ clear: left | right | both | none
„ quali lati di un contenitore NON possono essere
adiacenti a contenitori floating precedenti
„ N.B. molte altre istruzioni, modello molto
complesso, leggere lo standard

Un template standard Template: parte HTML (I)

„ per pagine con header, footer, menù e contenuto <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
„ moderno e standard: <html lang="it">
„ usa CSS per la formattazione <head>
<meta http-equiv="Content-Type"
„ usa DIV per il layout
content="text/html; charset=ISO-8859-1">
„ ispirato da http://friendlybit.com <meta name="Author" content="A.Lioy">
<title>Titolo della pagina</title>
header <meta name="Keywords" content="web tutorial">
menù contenuto <link rel="stylesheet"
href="polito.css" type="text/css">
</head>
<body>
<div id="header">
footer <h1>Titolo della pagina</h1>
</div>

Template: parte HTML (II) Template: CSS

<div id="navigation"> <h2>Men&ugrave;</h2> body { ... }
<ul>
<li><a href="p1.html">First</a></li> div { border: 1px solid Black; padding: 1ex; }
<li><a href="p2.html">Second</a></li>
</ul> h1, h2, h3, h4, h5, h6 { margin: 0; }
</div>
<div id="content"> <h2>Contenuto</h2> #navigation { float: left; width: 10ex; }
<p>Contenuto della pagina.</p> #navigation ul { list-style: none;
</div> margin: 0 0 0 0; padding: 0 0 0 0; }
<div id="footer"> <h2>Autore</h2>
<p>Nome dell’autore e info per contattarlo.</p> #content { margin-left: 12ex; }
</div>
</body> #footer { clear: both; }
</html>

© A.Lioy - Politecnico di Torino (2003-09) F.8

Programmazione in ambiente web (feb'09)

Uso di form HTML per inviare dati

nel web dinamico
II form
form HTML
HTML ed
ed ilil web
web dinamico
dinamico orario.html
partenza

arrivo from=Torino&to=Roma&day=31/03/07

data
Antonio Lioy
INVIA CANCELLA orario.asp
< lioy@polito.it >
orario.asp
Politecnico di Torino Torino Roma
<html> . . . </html>
Dip. Automatica e Informatica 6:50 8:00
7:45 8:55

browser server (dinamico)

Struttura di base dei form HTML Form: controlli di input

„ NAME (o ID): nome simbolico per far riferimento al „ tag INPUT
form „ TYPE: text, password, checkbox, radio, image, file,
„ ACTION: URL relativa a script CGI, PHP, ASP o a hidden, submit, reset, button
qualsiasi tipo di elaborazione sul server „ NAME: nome simbolico (usare ID se è unico)
„ METHOD: GET oppure POST „ per passare i dati al server (interfaccia CGI)
„ gli elementi di un form sono detti “controlli” „ per accedere all’elemento da codice JavaScript o
<form
<form name="f1"
name="f1" method="get"
method="get" action="http://...">
action="http://...">
VBScript
<input
<input ...>
...> „ VALUE: contenuto iniziale del campo o valore da
<select ...>
<select ...> inviare
...
...
<input
<input type="submit"
type="submit" ...>
...>
<input
<input type="reset"
type="reset" ...>
...> <input type=... name=... value=...>
</form>
</form>

Form: pulsanti Form: controlli orientati al testo

„ SUBMIT „ <input type=text size=N maxlength=M name=…>
„ creato tramite tag INPUT „ zona di testo lunga N caratteri, al massimo M
„ invia i dati del form al server web „ <input type=password …>
„ RESET „ come type=text ma visualizza i caratteri come *
„ creato tramite tag INPUT „ NON è un metodo sicuro per celare un password
„ imposta tutti controlli del form al valore di default „ <input type=hidden name=… value=…>
„ BUTTON „ valore fisso da trasmettere al server di nascosto
„ creato tramite tag BUTTON „ NON è un metodo sicuro per celare un dato
„ type=submit | reset | button „ <textarea rows=NR cols=NC name=…>
„ più “ricco” (es. testo + immagine) rispetto a INPUT . . . testo iniziale . . .
SUBMIT/RESET ed usabile anche fuori da un form </textarea>
„ zona di testo di NR righe, ciascuna di NC caratteri

© A.Lioy - Politecnico di Torino (2003-09) D-1

Programmazione in ambiente web (feb'09)

Esempio di form (text, password) Form: controllo a scelta singola (menù)

„ tag SELECT per racchiudere le varie opzioni
<form action="/cgi-bin/query" method="get"> „ tag OPTION per le singole opzioni, eventualmente
con una scelta di default (SELECTED)
your name: <input type="text" name="nome"> <br>
„ tag OPTGROUP per raggruppare opzioni (menù a
your home page:
cascata; un solo livello di raggruppamento)
<input type="text" name="home" value="http://"> „ preferire attributo LABEL
password: <input type="password" name="pswd"> <br>
<input type="submit" value="ok"> <select name=...>
<input type="reset" value="annulla"> <option label=... >
<option> ... </option>
</form> <option selected> ... </option>
</select>

Form: controlli a scelta multipla Esempio di form (checkbox)

„ CHECKBOX
„ un elemento di tipo on/off
<form action="/cgi-bin/query" method="get">
„ indipendente da altri controlli dello stesso tipo
Compose your own fruit salad:
„ inviati al server tutti quelli selezionati (CHECKED)
<input type="checkbox" name="banana"> Banana
„ potrebbe anche non inviare niente al server
„ RADIO
<input type="checkbox" name="apple" checked> Apple

„ un insieme di elementi di tipo on/off identificati dallo <input type="checkbox" name="orange"> Orange
stesso NAME (in questo caso NON si può usare ID) <input type="submit">
„ mutuamente esclusivi (selezionabili uno solo) <input type="reset">
„ inviato al server il valore dell’unico elemento </form>
selezionato (CHECKED)

Esempio di form (radio) Controlli disabilitati o a sola lettura

„ attributo “readonly”
<form action="/cgi-bin/query" method="get">
„ non permette all’utente di cambiare il valore di un
Select your preferred fruit: controllo (possibile solo tramite script client-side)
<input type="radio" name="frt" „ valido nei controlli INPUT e TEXTAREA
value="banana"> Banana
„ attributo “disabled”
<input type="radio" name="frt" „ disabilita un controllo
value="apple" checked> Apple
„ l’utente non può cambiarne il valore
<input type="radio" name="frt"
value="orange> Orange „ non verrà inviato al server
„ valido nei controlli INPUT, TEXTAREA, BUTTON,
<input type="submit">
SELECT, OPTION, OPTGROUP
<input type="reset">
„ attributi Booleani cambiabili da script client-side
</form>

© A.Lioy - Politecnico di Torino (2003-09) D-2

Programmazione in ambiente web (feb'09)

Form: file upload Esempio di form (file upload)

„ il controllo <input type=“file” …> inserisce un
elemento per la selezione del nome di un file <form
action="/cgi/fileprint"
„ la forma esatta del controllo dipende dal browser
enctype="multipart/form-data"
ma spesso:
method="post">
„ campo di testo per inserire direttamente il nome
File da stampare:
„ pulsante per attivare interfaccia grafica (navigazione <input type="file" name="myfile">
del file system locale e selezione del file)
Numero di copie da stampare:
„ tutti i dati del form sono trasmessi singolarmente <input type="text" name="ncopie" size="2">
come parti di un messaggio MIME
<br><br>
„ usabile solo con POST e tipo MIME specifico:
<input type="submit" value="submit">
<form action=... </form>
enctype="multipart/form-data" method="post">

File upload – trasferimento C > S Uso di script per validare un form

POST http://server.it/cgi/fileprint HTTP/1.0
... <form
Content-Type: multipart/form-data; boundary=AaBb name="sample"
Content-Length: 199 method="post"
action=...
--AaBb onSubmit="return validateForm()">
Content-Disposition: form-data; name="myfile"; Nome:
filename="orario.txt" <input type="text" name="nome" size="30"><br>
Content-Type: text/plain Et&agrave;:
<input type="text" name="eta" size="3"><br>
8:30-12:30 aula 12 Data di nascita:
--AaBb <input type="text" name="nascita" size="10"><br>
Content-Disposition: form-data; name="ncopie" <input type="submit">
<input type="reset">
2
</form>
--AaBb--

Script di validazione Come fare la validazione?

„ controllare che il valore associato ad un controllo:
<script type="text/javascript">
function validateForm() „ non sia vuoto (se è un caso possibile dato il tipo)
{ „ abbia un valore corretto ("looks good") piuttosto che
formObj = document.sample; non abbia un valore sbagliato ("doesn't look bad")
if (formObj.nome.value == "") {
alert("Non hai introdotto il nome!"); „ esempio (validazione del valore di un controllo di
return false; testo usato per introdurre un CAP):
} „ contenga solo caratteri numerici ('0'…'9')
else if (formObj.eta.value == "") {
„ sia composto esattamente da cinque caratteri
alert("Non hai introdotto l'eta!");
return false; „ (opzionale) se è noto l'elenco di tutti i possibili CAP
} else if ... return false; controllare che il valore fornito sia uno di questi
return true;
„ in caso di errore, fornire un avviso all'utente che lo
}
</script> 18 aiuti a correggere l'errore (ossia NON "CAP errato")

© A.Lioy - Politecnico di Torino (2003-09) D-3

Programmazione in ambiente web
Trasmissione parametri di un form (GET)
„ URI = concatenazione del campo “action”, “?” e
quindi i parametri espressi nella codifica
application/x-www-form-urlencoded
„ il body della richiesta rimane vuoto
ES. x-www-form-urlencoded: form
<form
name="sample"
method="get"
action="/cgi-bin/acquisisci">
Nome e cognome:
<input type="text" name="cognome" size="30"><br>
Numero di figli:
<input type="text" name="figli" size="3"><br>
Data di nascita:
<input type="text" name="nascita" size="10"><br>
<input type="submit">
<input type="reset">
</form>
Trasmissione parametri di un form (POST)
„ URI coincide col valore del campo “action”
„ (default, ovvero enctype non specificato)
„ Content-Type: application/x-www-form-urlencoded
„ Content-Length: …
„ body contiene solo la stringa dei parametri nella
forma application/x-www-form-urlencoded
„ con “enctype=multipart/form-data”
„ Content-Type: multipart/form-data
„ Content-Length: …
„ body = messaggio MIME (una sezione per ogni
parametro)
„ nota: obbligatorio per controlli di tipo File
© A.Lioy - Politecnico di Torino (2003-09)
(feb'09)
application/x-www-form-urlencoded
„ usabile sia con GET sia con POST
„ è la codifica di default
„ genera una stringa composta dai nomi dei controlli
del form seguiti da "=" e dai valori inseriti:
nome_ctrl1=val_ctrl1&nome_ctrl2=val_ctrl2&…
„ separatore tra un controllo ed il successivo: &
„ spazi nei nomi o nei valori sostituiti da "+"
„ caratteri speciali, non US-ASCII o con significato
particolare ( / ? …) sostituiti con %xx (ove "xx" è il
numero esadecimale del suo codice ISO-8859-1)
Es. x-www-form-urlencoded: trasmissione
„ se il precedente form venisse riempito dal signor
Marco Noè, nato il 30/10/74, genitore di 3 figli …
„ … allora verrebbe creata la seguente stringa:
cognome=Marco+No%E8&figli=3&nascita=30%2F10%2F74
Esempio invio dati con GET: il form
<form method="get" action="/cgi/insaula">
<table border="0">
<tr>
<td>Numero aula:</td>
<td><input type="text" size="8" name="num"></td>
</tr>
<tr>
<td>Sede:</td>
<td><input type="text" size="15" name="sede"></td>
</tr>
<tr>
<td>
<input type="submit" value="Invia">
<input type="reset" value="Cancella">
</td>
</tr>
</table>
</form>
D-4
Programmazione in ambiente web (feb'09)

Esempio invio dati con GET: URI, HTTP, env Invio dati con POST (caso 1): il form
<form method="post" action="/cgi/insaula">
URI <table border="0">
http://localhost/cgi/insaula?num=12A&sede=Sede+Centrale <tr>
<td>Numero aula:</td>
<td><input type="text" size="8" name="num"></td>
canale HTTP (C > S) </tr>
GET /cgi/insaula?num=12A&sede=Sede+Centrale HTTP/1.1 <tr>
Accept: image/gif, image/x-xbitmap,image/jpeg,*/* <td>Sede:</td>
Referrer: http://localhost/pad/formaula.html <td><input type="text" size="15" name="txtSede"></td>
Accept-Language: it </tr>
Accept-Encoding: gzip, deflate <tr>
User-Agent: Mozilla/4.0 (compatible;MSIE 6.0;Windows NT 5.0) <td>
Host: 192.168.235.10 <input type="submit" value="Invia">
Connection: Keep-Alive <input type="reset" value="Cancella">
</td>
</tr>
QUERY_STRING </table>
num=12A&sede=Sede+Centrale </form>

Invio dati con POST (caso 1): URI, HTTP, env Invio dati con POST (caso 2): il form
<form method="post" action="/cgi/insaula“
URI
enctype="multipart/form-data">
http://localhost/cgi/insaula
<table border="0">
<tr>
canale HTTP (C > S)
<td>Numero aula:</td>
POST /cgi/insaula HTTP/1.1
<td><input type="text" size="8" name="num"></td>
Accept: image/gif, image/x-xbitmap, image/jpeg, */*
</tr>
Referrer: http://localhost/pad/formaula.html
<tr>
Accept-Language: it
<td>Sede:</td>
Accept-Encoding: gzip, deflate
<td><input type="text" size="15" name="txtSede"></td>
User-Agent: Mozilla/4.0 (compatible;MSIE 6.0;Windows NT 5.0)
</tr>
Host: 192.168.235.10
<tr>
Connection: Keep-Alive
<td>
Content-Type: application/x-www-form-urlencoded
<input type="submit" value="Invia">
Content-Length: 26
<input type="reset" value="Cancella">
</td>
num=12A&txtSede=Sede+Centrale
</tr>
</table>
QUERY_STRING </form>

Invio dati con POST (caso 2): URI, HTTP, env Attenzione ai campi vuoti !
URI „ ad eccezione del tag SELECT …
http://localhost/cgi/insaula
„ … tutti gli altri campi di un form possono non
canale HTTP (C > S) trasmettere input
POST /cgi/insaula HTTP/1.1
. . . „ … ed in un caso (TYPE=CHECKBOX) può anche
Content-Type: multipart/form-data; boundary=AaBbCc non essere presente la variabile relativa al campo
Content-Length: 148 (se è OFF)
--AaBbCc „ le applicazioni lato server devono saper trattare
Content-Disposition: form-data; name="num" tutti i casi
12A
--AaBbCc
Content-Disposition: form-data; name="txtSede"

Sede Centrale N.B. valore non codificato

--AaBbCc--

© A.Lioy - Politecnico di Torino (2003-09) D-5

Programmazione in ambiente web (feb'09)

Esempio 1 Esempio 2: il form

<form name="sample" method="get"
action="http://www.negozio.it/pagamento.asp"> <form name="sample" method="get"
Carta di credito: action="http://www.amici.it/persona.asp">
<input type="text" name="cardno" size="16"> cognome: <input type="text" name="cogn" size="30">
<br> <br>
MasterCard hobby:
<input type="radio" name="cc" value="mastercard"> <ul>
<br> <li>pesca <input type="checkbox" name="cb_pesca">
Visa <li>sci <input type="checkbox" name="cb_sci">
<input type="radio" name="cc" value="visacard"> </ul>
<br> <input type="submit"> <input type="reset">
<input type="submit"> <input type="reset"> </form>
</form>

cardno=123456789012345&cc=mastercard

Esempio 2: dati trasmessi al server Form: meglio trasmissione con GET o POST?
L’applicazione lato server deve gestire questi casi (ed „ GET:
altre combinazioni …) „ permette di fare caching della pagina di risposta
„ permette di creare bookmark e link alla pagina
cogn=
„ lascia traccia del valore dei parametri nel log del
cogn=De+Chirico server (problema di privacy e/o sicurezza)
cogn=De+Chirico&cb_pesca=on „ alcuni server limitano la lunghezza della query string
a 256 caratteri se è all’interno della URI
cogn=De+Chirico&cb_pesca=on&cb_sci=on „ POST:
„ non permette caching e bookmarking
„ non lascia traccia nel log
„ non pone limiti alla query string

© A.Lioy - Politecnico di Torino (2003-09) D-6

HTML (feb'09)

Un po’ di storia
HTML
HTML „ HTML 2.0 (nov’95 = RFC-1886)
(HyperText
(HyperText Markup Language)
Markup Language) „ codifica lo standard de facto del 1994
„ HTML 3.2 (1996)
„ compatibile con 2.0
„ aggiunge table, applet, apici, pedici, testo attorno
Antonio Lioy alle immagini, …
< lioy@polito.it > „ HTML 4.01 (dic’ 97 – apr’ 98 – dic’ 99)
„ ultima (?) versione di HTML
Politecnico di Torino „ XHMTL 1.0 (gen’00 – ago’02)
Dip. Automatica e Informatica „ riscrittura di HTML 4.01 con XML
„ strict / transitional / frameset

Un documento HTML I tag

„ è un normale testo US-ASCII
„ non sono quindi ammesse lettere accentate ed altri
caratteri "estesi"
„ ... arricchito con puntatori ipertestuali e ipermediali
„ ... e con moderate capacità di formattazione del
testo
„ tutte queste capacità aggiuntive sono ottenute
mediante annotazioni espresse tramite i tag
„ sono racchiusi tra i simboli "minore" e "maggiore"
„ di solito sono accoppiati (start tag – end tag)
<h1> ... </h1>
ma possono essere anche soli
<br> ( <br /> in XHTML)
„ regola generale: il tag finale è identico a quello
iniziale, preceduto dal simbolo /
„ sono case insensitive in HTML e lowercase in
XHTML
„ meglio quindi scriverli sempre minuscoli

Gli attributi I browser

„ tramite gli attributi è possibile caratterizzare meglio
un tag
„ ogni attributo è costituito da una variabile a cui
viene assegnato un valore, posta all’interno del tag
di apertura (es. <hr width="90%">)
„ per visualizzare documenti HTML (e per navigarli)
occorre un programma apposito: un browser HTML
„ un browser è un interprete:
„ legge codice sorgente (HTML + estensioni)
„ cerca di capirlo (sperando non contenga errori …)
„ fa del suo meglio per visualizzare quanto descritto
dal codice sorgente
„ attenzione! non tutti i browser visualizzano un
documento allo stesso modo
„ browser testuale: Lynx
„ browser grafici: Firefox, SeaMonkey, Netscape,
Opera, Internet Explorer, ...

© A.Lioy - Politecnico di Torino (1994-2009) E-1

HTML (feb'09)

La guerra dei browser Struttura generale

„ non esiste un unico browser più usato degli altri
di un documento HTML
(preferenze personali, piattaforma di uso, …)
<!DOCTYPE HTML PUBLIC ...>
„ bisogna cercare di scrivere pagine HTML adatte a <html>
qualunque browser
<head>
„ alcune statistiche: <title> titolo </title>
„ www.w3schools.com/browsers/browsers_stats.asp ... altre intestazioni ...
</head>
„ (jan-09) IE8=1%, IE7=26%, IE6=19%, FX=46%,
Chrome=4%, Safari=3%, Opera=2% <body>
„ www.upsdell.com/BrowserNews/stat.htm testo del documento
</body>
„ grande variabilità
„ www.pgts.com.au/pgtsj/pgtsj0212d.html
</html>

„ difficile identificare i browser con certezza

Document type declaration (DTD) Esempio

„ necessario per capire il tipo di HTML (da 4.01): <!DOCTYPE HTML PUBLIC
„ strict.dtd = tutti gli elementi non deprecati "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
„ loose.dtd = include elementi deprecati
<html>
„ frameset.dtd = loose + uso di frame <head>
<title>Esempio di pagina HTML</title>
<!DOCTYPE HTML PUBLIC
</head>
"-//W3C//DTD HTML 4.01//EN“
<body>
"http://www.w3.org/TR/html4/strict.dtd">
Qui posso inserire il testo del mio documento
<!DOCTYPE HTML PUBLIC
che, se non uso i tag di formattazione, viene
"-//W3C//DTD HTML 4.01 Transitional//EN"
visualizzato come semplice testo.
"http://www.w3.org/TR/html4/loose.dtd">
</body>
<!DOCTYPE HTML PUBLIC
</html>
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

Osservazioni Meta-dati
„ il browser non segnala gli errori: li ignora! „ nella parte di HEAD
„ spazi e ritorni a capo: „ dati utili per:
„ spazi multipli vengono trattati come uno spazio „ indicizzare la pagina HTML
singolo „ fornire informazioni al server web e/o al browser
„ i fine linea non hanno alcun effetto di formattazione „ sintassi:
„ molto importante il titolo (ed in generale i dati
dell’head) perché è l'elemento più usato dai sistemi <meta name="author" content="Antonio Lioy">
automatici di indicizzazione <meta name="keywords" content="html">
„ HTML è un linguaggio estensibile
<meta http-equiv="Content-Type"
„ spesso si aggiungono nuovi tag content="text/html; charset=ISO-8859-1">
„ il browser ignora i tag (o gli attributi) non riconosciuti
<meta http-equiv="Expires"
content="Sun, 28 Feb 2010 23:59:00 GMT">

© A.Lioy - Politecnico di Torino (1994-2009) E-2

HTML (feb'09)

Link Esempio di LINK

„ nella parte di HEAD
„ collegamenti ad altri documenti <head>
„ possibili più LINK <title>Chapter 2</title>
„ attributi:
<link rel="contents" href="../toc.html">
<link rel="next" href="chapter3.html">
„ href=URL
<link rel="prev" href="chapter1.html">
„ rel=alternate lang=…
<link rel="stylesheet"
„ rel=alternate media=… type="text/css" href="mystyle.css">
„ rel=stylesheet </head>
„ rel=start / contents / prev / next / …
„ type=MIME-type

Strumenti di controllo per HTML Strumenti di controllo per HTML

„ http://validator.w3.org
„ permette di verificare se una pagina è scritta
rispettando completamente la sintassi ufficiale
„ può fornire spiegazioni dettagliate sugli errori e come
correggerli
„ http://tidy.sourceforge.net
„ “ripulisce” il codice HTML e lo trasforma in una
versione più recente
„ installabile localmente o usabile via rete
http://cgi.w3.org/cgi-bin/tidy
„ problemi con HTML generato da un server dinamico
(non validabile una pagina sorgente ASP o PHP)
„ per validare pagine create dinamicamente bisogna
fare l'operazione sul client invece che sul server
„ occorre quindi:
„ un plugin speciale per il browser
„ visitare manualmente tutte le pagine da validare
„ un ottimo plugin per FireFox:
„ http://users.skynet.be/mgueury/mozilla/index.html
„ configurarlo in modalità "SGML parser" per avere gli
stessi risultati di validator.w3.org

Commenti I titoli
„ inseribili in qualunque punto del testo „ esistono sei livelli di titolo o intestazione:
„ possono occupare varie righe „ <h1> . . . </h1>
„ racchiusi tra <!-- e --> „ <h2> . . . </h2>

„ esempi: „ <h3> . . . </h3>

„ <h4> . . . </h4>
<!-- questo è un commento -->
„ <h5> . . . </h5>
<!-- „ <h6> . . . </h6>
questo commento „ usarli per il significato logico, non per ottenere una
occupa quattro righe
certa formattazione
-->
„ in particolare è scorretto usare <hN> se non
preceduto da <hN-1>

© A.Lioy - Politecnico di Torino (1994-2009) E-3

HTML (feb'09)

Blocchi di testo Rette orizzontali (tag <HR>)

„ <p> . . . </p> „ è possibile specificare degli attributi:
„ inizia e termina un paragrafo „ size= n_pixel (spessore)
„ al termine di un paragrafo il browser va a capo (e „ width= n_pixel (larg. assoluta)
può anche lasciare un piccolo spazio verticale) „ width= percentuale (larg. in % del contenitore)
„ <br> (HTML) „ align=left / right / center
<br/> (XHTML)
„ per default la linea è centrata e con larghezza 100%
„ inserisce un ritorno a capo
„ <hr> (HTML)
<hr/> (XHTML)
„ inserisce una retta orizzontale

Elenchi e liste Opzioni per le liste

„ lista non ordinata: „ tipo di simbolo per le liste non ordinate:
„ <ul> ... </ul> „ type=disc / circle / square

„ lista ordinata: „ numerazione delle liste ordinate:

„ <ol> ... </ol> „ start= indice_primo_elemento
„ directory (deprecato): „ type=A / a / I / i / 1
„ <dir> ... </dir> „ ossia:
„ menù (deprecato): „ lista alfabetica (maiuscola o minuscola)
„ <menu> ... </menu> „ numeri Romani (maiuscoli o minuscoli)
„ numeri decimali
„ un elemento di una (qualsiasi) lista: „ specificabile sia sulla lista (ol) sia sul singolo
„ <li> ... </li> elemento (li)

Elenchi e liste Formattazione del testo

„ elenco di definizioni: „ una porzione di testo può essere caratterizzata per
la funzione che assume nel documento (stile
<dl> logico) ...
<dt> termine 1 </dt>
<dd> definizione 1 . . . </dd> „ ... oppure per il modo in cui si desidera fisicamente
<dt> termine 2 </dt> visualizzarla (stile fisico)
<dd> definizione 2 . . . </dd> „ si tende a preferire gli stili logici per lasciare più
..... libertà all’utente finale nel definire come il testo
</dl> deve apparire su video
„ con XHTML sono scomparsi i tag di formattazione
(si deve obbligatoriamente usare CSS)

© A.Lioy - Politecnico di Torino (1994-2009) E-4

HTML (feb'09)

Formattazione: stili fisici Formattazione: stili fisici

„ <b> ... </b> „ ^...
„ testo in grassetto (bold) „ testo sopraelevato (apice)
„ <i> ... </i> „ _...
„ testo in corsivo (italico) „ testo sottoelevato (pedice)
„ <u> ... </u> „ <s> ... </s>
„ testo sottolineato
<strike> ... </strike>
„ <tt> ... </tt> „ testo sbarrato orizzontalmente

„ testo a spaziatura fissa (tipo macchina da scrivere)

„ <blink> ... </blink>
„ testo lampeggiante

Formattazione: stili logici Altri stili logici

„ <cite> citazione </cite > „ <big> testo grande </big>
„ <code> codice (programma) </code> „ <small> testo piccolo </small>
„ <em> enfasi </em> „ si possono usare ripetutamente in modo annidato
per ottenere effetto maggiore:
„ <kbd> tastiera </kbd>
„ <samp> esempio </samp> <big> <big> testo molto grande </big> </big>
„ <strong> rinforzo </strong>
„ <var> variabile </var>
„ <dfn> definizione </dfn>

Formattazione: blocchi di testo Riferimenti a caratteri non US-ASCII

„ HTML è scritto in US-ASCII con MSB=0
„ <address> . . . </address>
„ caratteri ASCI > 127 vanno codificati, come pure
„ indirizzo (tipicamente di e-mail)
caratteri con significato speciale
„ <blockquote> . . . </blockquote>
„ prestare attenzione al ";" finale
„ grosse citazioni
per
per avere
avere ...
... si
si scrive
scrive...
...
„ <center> . . . </center>
<< &lt;
&lt;
„ testo centrato >> &gt;
&gt; importanti perché sono
„ <pre> . . . </pre> && &amp;
&amp; caratteri riservati di HTML
„ testo preformattato (la "" &quot;
&quot;
spaziatura viene rispettata) ÈÈ &Egrave;
&Egrave;
éé &eacute;
&eacute;
©© &copy;
&copy;

© A.Lioy - Politecnico di Torino (1994-2009) E-5

HTML (feb'09)

Riferimenti a caratteri non US-ASCII I collegamenti ( link )

„ sezione 24 (pag. 299) dello standard HTML 4.01
„ comprende:
„ caratteri estesi di ISO-8859-1 – es. &raquo; = »
„ simboli matematici – es. &exist; = ∃
„ lettere greche – es. &alpha; = α
„ simboli internazionali – es. &euro; = €
„ utilizzando un collegamento (detto àncora in HTML)
è possibile spostarsi automaticamente da una
risorsa ad un’altra
„ il tag che identifica la presenza di un collegamento
è l’ancora, indicata con <a>

Come inserire un link Link assoluti e relativi

„ possibile omettere parti della URL
„ aprire il tag di inizio ancora: <a
„ in questo caso si parla di link "relativo"
„ inserire uno spazio
„ le parti mancanti assumono il valore della pagina
„ inserire l’URL della risorsa, preceduto da href= e corrente
racchiuso tra virgolette
„ esempi di link relativi (supposti presenti nella
„ chiudere il tag di apertura con > pagina http://www.lioy.it/01eny/esame.html)
„ inserire il testo da evidenziare (quello associato
all’ancora, detto "hot word")
link relativo link assoluto
„ chiudere l’ancora: </a> biblio.html http://www.lioy.it/01eny/biblio.html
../cv.html http://www.lioy.it/cv.html
<a href="http://www.polito.it">POLITO</a> ris/a1.html http://www.lioy.it/01eny/ris/a1.html

Punti d’accesso a documenti Punti d’accesso a documenti

„ nel documento “bersaglio” definire il punto
Link senza specifica di un d’accesso tramite un’ancora con attributo NAME
punto d’accesso Title
<a name="cuc_ita">
La cucina italiana
Address
</a>
„ nel documento di partenza, includere nell’URL il
Title doc01
nome del punto di accesso
Title doc02 <a href="doc2.html#cuc_ita">
„ il punto d'accesso può anche essere un qualsiasi
Address
elemento identificato tramite il suo "id"
Address
a di <h1 id="cuc_ita">
ecific
o n sp cesso
Link c d ’ac La cucina italiana
nto
un p u
</h1>

© A.Lioy - Politecnico di Torino (1994-2009) E-6

HTML (feb'09)

Immagini Posizionamento reciproco

di testo e immagini
„ <img src="polito.gif">
„ inserisce l'immagine contenuta nel file polito.gif <img align=left ...>
<img align=right ...>
„ <img src="polito.gif" <img align=top ...>
alt="Foto del Politecnico"> <img align=center ...>
„ inserisce l'immagine polito.gif, ma, se il browser non <img align=texttop ...>
prevede l’uso della grafica, viene visualizzato il testo <img align=middle ...>
Foto del Politecnico <img align=absmiddle ...>
<img align=baseline ...>
„ differenza tra inserimento o link ad un'immagine: <img align=bottom ...>
„ <img src="polito.gif"> <img align=absbottom ...>
(inserisce l'immagine nella pagina)
„ <a href="polito.gif"> (seguendo il link si
visita una pagina che contiene solo l'immagine)

Formato delle immagini Font

„ <img width=w height=h ... > „ <font ... > ... </font>
„ dimensione dell'immagine „ scelta del font per il blocco di testo incluso tra i tag
„ permette visualizzazione più rapida della pagina „ uso sconsigliato (usare CSS)
(non occorre aver caricato tutta l’immagine per „ attributi:
sapere quale spazio occupa)
„ size= dimensione
„ <img vspace=v hspace=h ... >
„ color= colore
„ distanze minime tra testo e immagine
„ face= font-family
„ <img border=b ... >
„ …
„ dimensione del bordo
„ la dimensione può essere data in varie unità:
„ N (=1…7, default=3), +N, –N
„ consigliabili +N –N

Colori Colori standard

„ alcuni colori predefiniti ed accessibili per nome: black = #000000 green = #008000
Black, White, Gray, Silver,
Yellow, Red, Purple, Fuchsia, silver = #C0C0C0 lime = #00FF00
Maroon, Green, Lime, Olive, Aqua,
Teal, Blue, Navy gray = #808080 olive = #808000

„ altri colori sono specificabili mediante il loro codice white = #FFFFFF yellow = #FFFF00
RGB in esadecimale ( # rr gg bb )
„ esempio: maroon = #800000 navy = #000080

„ <font color="#ffffff">Bianco!</font> red = #FF0000 blue = #0000FF

purple = #800080 teal = #008080

fuchsia = #FF00FF aqua = #00FFFF

© A.Lioy - Politecnico di Torino (1994-2009) E-7

HTML (feb'09)

Tabelle Dati in tabella

„ <table ... > ... </table> „ <tr ... > ... </tr>
„ attributi: „ una riga della tabella
„ align= left / center / right „ contiene celle normali (<td>) o di intestazione
„ border= dimensione (<th>)
„ width= dimensione (n_pixel o %) „ <th ... > ... </th>
<td ... > ... </td>
„ cellspacing= dimensione un dato (oppure un’intestazione = heading) della
„ cellpadding= dimensione tabella, che può occupare più celle in orizzontale o
„ summary= testo verticale
„ frame= void / above / below / hsides / lhs / rhs / „ colspan= numero-colonne
vsides / box / border „ rowspan= numero-righe
„ rules = none / groups / rows / cols / all

Elementi (opzionali) di una tabella Table: attributi di riga, header e dati

„ <thead> „ align= allineamento-orizzontale
„ l’intestazione „ left, center, right
„ <tbody> „ valign= allineamento-verticale
„ il contenuto „ top, middle, bottom
„ <tfoot> „ baseline
„ il footer „ bgcolor= colore
„ <caption>
„ la didascalia

Table: gruppi di colonne I frame

„ <colgroup span=n width=… align=… valign=…> „ divisione di una pagina in zone il cui contenuto è
„ gruppo strutturale di n colonne, ciascuna con gli specificato da altri file HTML
attributi specificati „ uso sconsigliato (usare CSS e “include”)
„ <col span=n width=… align=… valign=…>
<html>
„ definizione di attributi per una o più colonne <head> ... </head> <html>
. . .
<frameset ...> </html>
<frame ...>
<frame ...>
<html>
<frame ...> . . .
</frameset ...>
</html>
</html> <html>
. . .
</html>

© A.Lioy - Politecnico di Torino (1994-2009) E-8

HTML (feb'09)

Frameset e Frame Spazio occupato dai frame

„ la struttura di un pagina organizzata in frame è
simile a quella tradizionale, sostituendo <body> con
<frameset>
„ è possibile annidare FrameSet per creare
suddivisioni complesse della pagina
„ il contenuto di ciascun frame è specificato tramite:
„ <frame src=URI name=...>
„ usare il tag <noframe> per testo da visualizzare sui
browser che non supportano i frame
„ possibile specificare la porzione di pagina occupata
da ciascun frame, usando:
„ percentuale (dello spazio disponibile)
„ valore assoluto (in pixel)
„ * per indicare di usare tutto lo spazio rimasto
„ in caso di “overflow” si attivano le scrollbar (H e V)
„ esempio (suddivisione orizzontale):
„ <frameset rows=“20%,50%,30%”>
„ esempi (suddivisione verticale):
„ < frameset cols=“20%,80%”>
„ < frameset cols=“100,*,100”>

Navigazione dei frame Esempio di frame (I)

„ nei link è bene indicare in quale frame (o finestra)
deve essere visualizzata la pagina bersaglio: <!-- pagina iniziale -->
<frameset rows=80%,20%>
„ <a href=URI target="nome_di_un_frame"> … </a> <noframe>
„ valori speciali del target: <p>Pagina non visualizzabile</p>
</noframe>
„ "_blank" (nuova finestra)
„ "_self" (nello stesso frame) = default <frameset cols=100,*>
<frame src="menu.html">
„ "_parent" (frameset di ordine superiore)
<frame src="p1.html" name="content">
„ "_top" (occupare l’intera finestra) </frameset>

<frame src="footer.html">

</frameset>

Esempio di frame (II) Inline frame (iframe)

„ un frame trattato come un singolo oggetto (es.
<!-- menu.html --> come un’immagine)
<html>
<head> . . . </head> „ collocabile quindi in qualunque punto della pagina
<body> „ inizialmente supportato solo da IE
<p><a href="p1.html" target="content">Pag.1</a></p>
„ sintassi:
<p><a href="p2.html" target="content">Pag.2</a></p>
<p><a href="p3.html" target="content">Pag.3</a></p> „ <iframe src=uri …> . . . </iframe>
</body>
„ height=… width=… name=… frameborder=…
</html>
marginwidth=… marginheight=…
scrolling=yes/no/auto align=… vspace=… hspace=…
„ testo all’interno dei tag viene ignorato dai browser
che capiscono iframe e visualizzato dagli altri (usarlo
per segnalazione di errore)

© A.Lioy - Politecnico di Torino (1994-2009) E-9

HTML (feb'09)

DIV e SPAN Attributi generali

„ introdotti in HTML 4.0
„ servono a raggruppare parti per poter applicare più
facilmente una formattazione
„ DIV identifica un blocco (tipicamente i browser
vanno a capo alla fine del blocco)
„ SPAN identifica una parte all’interno di un blocco
„ molto usati per creare (con un opportuno CSS) un
layout di pagina senza usare table o frame
„ id = "stringa"
„ àncora per un link
„ riferimento ad un elemento da parte di uno script
„ riferimento ad un campo di un form
„ riferimento per uno stile specifico in CSS
„ class = "class1 class2 …"
„ elenco di classi CSS da applicarsi all'elemento

„ “id” e “class” permettono i riferimenti al CSS „ title = "titolo"

„ visualizzato quando si punta l'elemento
<div id="..." class="..."> ... </div>
„ lang = "lingua"
<span id="..." class="..."> ... </span> „ per lettura automatica del testo (valori: en it fr de …)

Favourite icon
„ la piccola icona presente vicino alla URL
„ un'immagine 16 x 16 pixel
„ vecchi browser:
„ solo in formato MS icon
„ in posizione fissa e con nome fisso = /favicon.ico
„ primo passo verso lo standard:

<link rel="shortcut icon" href="/icons/my.ico"

type="image/vnd.microsoft.icon">
„ nuovi browser supportano standard de-facto:
<link rel="icon"
type="image/png" href="/icons/my.png">

© A.Lioy - Politecnico di Torino (1994-2009) E-10

Il protocollo HTTP (mar'09)

Un po' di storia di HTTP

IlIl protocollo
protocollo HTTP
HTTP
„ protocollo client-server
(HyperText
(HyperText Transfer
Transfer Protocol)
Protocol)
„ ideato per la richiesta e la trasmissione di pagine
HTML (e poi di risorse web in generale)
„ HTTP originale (anche noto come HTTP/0.9)
„ uso quasi solo sperimentale

Antonio Lioy „ HTTP/1.0

< lioy@polito.it > „ il primo a larga diffusione

„ ancora molto usato

Politecnico di Torino „ HTTP/1.1

Dip. Automatica e Informatica „ per migliorare l'efficienza del web

„ per migliorare la gestione delle cache

Il protocollo HTTP 1.0 Connessione stateless (HTTP/1.0)

„ HyperText Transfer Protocol
„ RFC-1945 (HTTP/1.0)
„ servizio di default: TCP/80 B S B GET ... S
„ protocollo stateless 1. connection 2. request

„ lecito per il client chiudere la connessione prima di

aver ricevuto la risposta o parte di essa
„ chiusura del canale da parte del server
„ dati a 8 bit
„ alfabeto di default: ISO-8859-1 (= Latin-1) B HTML … S B S
3. response 4. close

I link Evoluzione dei link

„ URL (Uniform Resource Locator) „ URL sono indirizzi fisici (usando CNAME si può
fare qualcosa di logico, ma poco)
schema
schema::////user
user::password
password@@host
host::porta
porta//path
path##àncora
àncora „ URN (Uniform Resource Name)
è l’evoluzione futura, per usare nomi logici,
„ schemi regolari: replicazione, ...
„ http, telnet, ftp, gopher, file „ URI (Uniform Resource Identifier)

„ schemi irregolari: „ RFC-3986

„ news:newsgroup „ URI = URL + URN

„ mailto:indirizzo-postale
„ definizione base in RFC-1738, più
1959+2255 (LDAP), 2017 (external-body), 2192
(IMAP), 2224 (NFS)

© A.Lioy - Politecnico di Torino (2003-09) C-1

Il protocollo HTTP (mar'09)

Protocollo HTTP/1.0 Metodi HTTP/1.0

„ comandi ASCII con righe terminate da CR+LF „ GET uri http-version
„ i dati possono essere binari (perché il protocollo è richiede la pagina Web associata alla URI
“8-bit clean”) specificata (URI completa solo nel caso di richiesta
ad un proxy)
„ messaggi costituiti da header + body
„ HEAD uri http-version
„ header sono righe che iniziano con “keyword: ” restituisce solo gli header della risposta, non i dati
„ header separato dal body mediante una riga vuota „ POST uri http-version
(ossia contenente solo CR+LF) invia dei dati al server affinché vengano elaborati
dalla URI indicata
„ risposte devono iniziare con
http-version status-code [ commento_testuale ]

Metodo GET Metodo HEAD

– – – – – – – – – – – ( TCP setup ) – – – – – – – – – – – – – – – – – – – – – – ( TCP setup ) – – – – – – – – – – –
request request
GET / HTTP/1.0 HEAD / HTTP/1.0
response
HTTP/1.0 200 OK response
Date: Wed, 20 May 1998 09:58:21 GMT HTTP/1.0 200 OK
Server: Apache/1.0.0 Date: Wed, 20 May 1998 09:58:21 GMT
Content-Type: text/html Server: Apache/1.0.0
Content-Length: 1534 Content-Type: text/html
Last-modified: Fri, 5 May 1998 12:14:23 GMT Content-Length: 1534
Last-modified: Fri, 5 May 1998 12:14:23 GMT
<html>
. . .
</html>
– – – – – – – – – – – ( TCP teardown ) – – – – – – – – – – – – – – – – – – – – – – ( TCP teardown ) – – – – – – – – – – –

Metodo POST Test manuale di HTTP (Windows)

– – – – – – – – – – – ( TCP setup ) – – – – – – – – – – –
„ aprire una finestra di comando (aka “finestra DOS”)
request
„ dare i seguenti comandi:
POST /cgi-bin/form.cgi HTTP/1.0
Content-type: text/plain C:\> telnet
Content-length: 12 Microsoft Telnet> set localecho
Microsoft Telnet> set crlf
Antonio Lioy Microsoft Telnet> set logging
response Microsoft Telnet> set logfile mylog.txt
HTTP/1.0 200 OK Microsoft Telnet> open server_web 80
Date: Mon, 8 Mar 1999 21:30:24 GMT GET / HTTP/1.0 <enter>
Server: Apache/1.2.6 <enter>
Content-type: text/plain „ suggerimento: se non si vuola attivare il log allora
attivare lo scrolling sulla finestra per vedere tutta la
dati ricevuti da stdin: Antonio Lioy risposta del server (Proprietà – Layout – Screen
– – – – – – – – – – – ( TCP teardown ) – – – – – – – – – – – buffer size – Height)

© A.Lioy - Politecnico di Torino (2003-09) C-2

Il protocollo HTTP (mar'09)

Test manuale di HTTP (*nix) Codice di stato HTTP

„ installare (se non presente) il programma "netcat" „ tutte le risposte contengono un codice di stato di 3
„ aprire una finestra di shell cifre XYZ
„ dare i seguenti comandi: „ la prima cifra (X) fornisce il major status dell’azione
richiesta
„ X=1 : informational
$ nc server_web 80 > output.txt
GET / HTTP/1.1 <enter> „ X=2 : success
Host: nome_server_web <enter> „ X=3 : redirection
Connection: close <enter>
<enter> „ X=4 : client error
„ X=5 : server error
„ seconda e terza cifra affinano lo stato

Codici di stato standard HTTP/1.0 Redirect

200 OK 400 Bad request
201 Created 401 Unauthorized
202 Accepted 403 Forbidden
204 No Content 404 Not found
301 Moved permanently 500 Internal server error
302 Moved temporarily 501 Not implemented
304 Not modified 502 Bad gateway
503 Service unavailable
„ se l’oggetto richiesto non è disponibile alla URI
indicata, il server può indicare la nuova URI tramite
una risposta con codice 3xx e header
Location: nuova-URI
„ il browser può:
„ connettere automaticamente il client alla nuova URI
se il metodo richiesto era GET o HEAD …
„ … mentre gli è vietato farlo se il metodo era POST
„ per supportare i browser vecchi (= che non
capiscono Redirect) o pigri si consiglia di inviare
nella risposta un body costituito da una pagina
HTML che fornisca la nuova URL in modo
comprensibile da un essere umano

Header HTTP/1.0 (I) Header HTTP/1.0 (II)

„ general header: „ response header:
„ Date: http-date „ Location: absolute-URI
„ Pragma: no-cache „ Server: product
„ request header: „ WWW-Authenticate: challenge
„ Authorization: credentials „ entity body header:
„ From: user-agent-mailbox „ Allow: method
„ If-Modified-Since: http-date „ Content-Encoding: x-gzip | x-compress
„ 304 se l’entity non è cambiata dalla data indicata „ Content-Length: length
„ Referer: URI „ Content-Type: MIME-media-type
„ richiesta susseguente un Redirect „ Expires: http-date
„ User-Agent: product „ Last-Modified: http-date

© A.Lioy - Politecnico di Torino (2003-09) C-3

Il protocollo HTTP
HTTP date
„ tre possibili formati:
„ RFC-822 = Sun, 06 Nov 1994 08:49:37 GMT
„ RFC-850 = Sunday, 06-Nov-94 08:49:37 GMT
„ asctime = Sun Nov 6 08:49:37 1994
„ accettare tutti, generare solo RFC-822
„ sempre GMT, mai l’indicazione del fuso orario
Problemi di HTTP/1.0
„ progettato per oggetti statici
„ dimensione nota a priori
„ altrimenti possibile troncamento dei dati
„ impossibile continuare collegamento interrotto
„ progettato per richiedere e ricevere singole pagine:
„ ogni oggetto richiede una connessione separata
„ una connessione TCP per ogni richiesta:
„ TCP setup richiede tempo (3-way handshake)
„ TCP slow start richiede tempo
„ la chiusura del canale fa perdere le informazioni
sulla congestione della rete
„ gestione elementare della cache
Il protocollo HTTP/1.1 (II)
„ supporto per server virtuali
„ più server logici associati allo stesso indirizzo IP
„ nuovi metodi:
„ PUT, DELETE, TRACE, OPTIONS, CONNECT
„ nuovo metodo di autenticazione (basato su digest)
a livello di trasporto
© A.Lioy - Politecnico di Torino (2003-09)
(mar'09)
Il protocollo HTTP/0.9
„ più semplice
„ non documentato in nessun RFC
„ request: GET URI
„ response: entity-body
Il protocollo HTTP/1.1 (I)
„ RFC-2616
„ connessioni persistenti (è il default) e pipelining
„ maggior velocità (più transazioni su stesso canale)
„ miglior trasmissione del body
„ negoziazione formato dati e lingua del body
„ frammentazione (chunked encoding) per pagine
dinamiche)
„ trasmissione parziale
„ gestione della cache
„ modalità specificate dal protocollo
„ proxy gerarchici
HTTP/1.1: virtual host
„ con HTTP/1.0 occorreva un indirizzo IP per ogni
server web ospitato su un nodo (multihomed)
„ con HTTP/1.1 non è più necessario:
„ più server logici associati allo stesso indirizzo IP
„ ottenibili tramite alias nel DNS (record CNAME)
„ il client deve indicare il virtual host desiderato
tramite il suo FQDN (Fully Qualified Domain Name)
„ nuovo header: “Host: FQDN [ : port ]”
C-4
Il protocollo HTTP (mar'09)

HTTP/1.1: virtual host (esempio) HTTP/1.1: connessioni persistenti

„ uso di un unico canale TCP per trasmettere più
host.provider.it IN A 10.1.1.1 interazioni richiesta-risposta
www.musica.it IN CNAME host.provider.it DNS „ è il comportamento di default in HTTP/1.1
www.libri.it IN CNAME host.provider.it „ chi si comporta diversamente deve dichiararlo con:
Connection: close
„ non è un header end-to-end ma hop-by-hop
(collegamento a host.provider.it, ossia IP 10.1.1.1)
GET /index.html HTTP/1.1 „ cosa importante per proxy e gw
HTTP
Host: www.musica.it

(collegamento a host.provider.it, ossia IP 10.1.1.1)

GET /index.html HTTP/1.1 HTTP
Host: www.libri.it

Connessioni persistenti: esempio Connessioni persistenti: pro e contro

– – – – – – – – – – – ( TCP setup ) – – – – – – – – – – –
„ vantaggi:
GET / HTTP/1.1 „ minor overhead apertura (3-way handshake) e
Host: www.polito.it chiusura canale (4-way handshake e suoi timeout)
HTTP/1.1 200 OK „ miglior gestione delle congestioni di rete
. . . (mantenimento della window TCP)
„ client può fare pipelining delle richieste (server deve
GET /favicon.gif HTTP/1.1 fornire risposte nello stesso ordine)
Host: www.polito.it
Connection: close „ risparmio di CPU (su tutti i nodi della catena)
„ evoluzione “dolce” a nuove versioni di HTTP (client
HTTP/1.1 200 OK può provare nuova versione ma poi usare vecchia)
Connection: close
. . . „ svantaggi:
„ sovraccarico del server (possibile denial-of-service)
– – – – – – – – – – – ( TCP teardown ) – – – – – – – – – – –

HTTP/1.1: pipeline HTTP/1.1: compressione

„ possibile inviare più richieste senza attendere le „ risparmio:
risposte del server „ di byte trasmessi
„ ottimizza la trasmissione TCP „ di tempo (come percepito dall’utente finale)
„ molto utile quando si richiedono in un colpo solo „ costi:
più elementi (di una stessa risorsa)
„ CPU sul client
„ attenzione:
„ CPU sul server (se compressione fatta “al volo”)
„ sono richieste sequenziali, non parallele (le risposte
saranno ricevute nello stesso ordine delle richieste) „ ma la risorsa oggi scarsa è la banda, non la CPU …

„ in caso di errore, potrebbe essere necessario

ripetere tutto il comando „ in HTTP/1.1 implementata come codifica dei dati
oppure come codifica di trasmissione

© A.Lioy - Politecnico di Torino (2003-09) C-5

Il protocollo HTTP (mar'09)

Codifiche dati Codifiche di trasmissione

„ codifica applicata ad una risorsa prima di trasferirla „ specifica la modalità di trasferimento di una risorsa
(proprietà del dato, non della trasmissione) (proprietà della trasmissione, non del dato)
„ poiché HTTP è 8-bit clean, codifica = compressione „ header: TE e Transfer-Encoding
„ utile per conservare il MIME-type della risorsa „ simile all’header MIME Content-Transfer-Encoding
„ header: Content-Encoding e Accept-Encoding ma poiché il canale è pulito a 8 bit l’unica difficoltà
è determinare la lunghezza del messaggio
„ codifiche possibili:
„ valori (possibili più di uno):
„ gzip = GNU zip (RFC-1952) = LZ-77 + CRC-32
„ identity (default)
„ compress = programma Unix (adaptative LZW)
„ gzip, compress, deflate
„ deflate = zlib (RFC-1950) + deflate (RFC-1951)
„ chunked (se presente, deve essere l’ultimo)
„ identity = nessuna codifica
„ default se Content-Encoding assente
„ accettabili i nomi pre-standard x-gzip e x-compress

Codifica “chunked” Codifica “chunked”: sintassi

„ utile quando il server non conosce a priori la „ sintassi (del body):
dimensione dei dati da trasferire *chunk
„ caso tipico dei server dinamici (es. ASP, PHP, JSP) last-chunk
*(entity-header CR LF)
„ si frammenta la risposta in pezzi (detti “chunk”) CR LF
„ meno importante in HTTP/1.0 (fine dati implicita alla „ ogni chunk:
chiusura del canale) ma protocollo meno efficiente chunk-size [ chunk-extensions ] CR LF
chunk-data CR LF
„ size in hex, ultimo chunk è quello con size=0

„ nota: "*" indica zero o più ripetizioni dell'oggetto

seguente

Codifica chunked: esempio CSS / PNG / HTTP-1.1 e le prestazioni

... „ CSS semplifica HTML (e quindi ne riduce la
Transfer-Encoding: chunked CRLF dimensione)
CRLF „ PNG ha compressione migliore di GIF
6 CR LF „ es. risparmio del 12% sulle 40 immagini del test
<html> chunk n.1
CRLF „ impatto di HTTP-1.1 complesso: connessioni
18 CRLF persistenti, pipelining, compressione
<body>CIAO</body></html> chunk n.2
CRLF
0 CRLF
CRLF chunk n.3 (last)
CRLF

(body risultante)
<html><body>CIAO</body></html>

© A.Lioy - Politecnico di Torino (2003-09) C-6

Il protocollo HTTP (mar'09)

Test HTTP 1.0 vs. 1.1 Risultati test HTTP 1.0 vs. 1.1
„ test di Nielsen, Gettys et al (W3C) WAN first-time retrieval against Apache server
„ pagina di test:
600 559 TCP packets 7
„ dimensione HTML = 40 K 6,14
time (s) 6
500
„ contiene 43 immagini in-line (totale 130 KB)
5
400
„ test consistente in 44 GET (una per ciascun 4
oggetto) in vari modi: 300
4,09
221
182
309 3
„ HTTP/1.0 con 4 connessioni simultanee 200
2
„ HTTP/1.1 con 1 connessione persistente 100 2,23 2,11 1
„ HTTP/1.1 pipeline con 1 connessione persistente 0 0
„ HTTP/1.1 pipeline + compressione con 1 HTTP/1.0 HTTP/1.1 HTTP/1.1 HTTP/1.1
connessione persistente pipelined pipelined w.
compression
www.w3c.rl.ac.uk/pastevents/RALSymposium98/Talks/br0.html

HTTP/1.1: metodo PUT Il codice 100 Continue

„ PUT uri http-version
„ il request body costituisce una nuova risorsa da
memorizzarsi sul server alla URI specificata
„ il request body è una nuova versione da sostituirsi a
quella specificata dalla URI
„ risposte: 201 (Created), 200 (OK) o 204 (No content)
„ esempio:
„ è inefficiente trasmettere un grosso request body
se il server rifiuterà la richiesta senza neanche
guardarlo:
„ es. utente non autorizzato o metodo non supportato
„ tipicamente relativo a PUT e POST
„ il client chiede conferma esplicita prima di
trasmettere il request body

PUT /avviso.txt HTTP/1.1 PUT /voti.pdf HTTP/1.1

Host: lioy.polito.it Host: www.abc.com
Content-Type: text/plain Expect: 100-continue
Content-Length: 40 HTTP/1.1 100 Continue
. . . voti.pdf ...
Il 31/5/2007 non ci sar&agrave; lezione. HTTP/1.1 200 OK

HTTP/1.1: metodo DELETE HTTP/1.1: metodo TRACE

„ DELETE uri http-version „ TRACE uri http-version
„ chiede eliminazione della risorsa alla URI specificata „ richiede di ricevere copia della richiesta
„ nessuna garanzia che sia cancellata, anche se OK „ richiesta incapsulata in un response body con tipo
„ risposte: MIME "message/http"
„ 200 (OK) se eseguita + body con dettagli „ tramite i request header “Via” (aggiunti dai proxy e
dai gateway) è possibile tracciare il collegamento a
„ 202 (Accepted) se canc. richiede decisione umana livello applicativo
„ 204 (No content) se eseguita ma senza dettagli „ tramite il request header “Max-Forwards” è
„ esempio: possibile limitare il numero di proxy attraversati
(utile in caso di loop)
DELETE voti.html HTTP/1.1
Host: lioy.polito.it
Content-Length: 0

© A.Lioy - Politecnico di Torino (2003-09) C-7

Il protocollo HTTP (mar'09)

Metodo TRACE: esempio HTTP/1.1: metodo OPTIONS

„ OPTIONS uri http-version
TRACE / HTTP/1.1 „ richiede di conoscere le opzioni supportate dal
Host: www.polito.it S
server
„ solo opzioni generali se URI=*, altrimenti quelle
HTTP/1.1 200 OK generali+specifiche della URI (es. lingue in cui la
Date: Sun, 20 May 2007 21:29:05 GMT
risorsa è disponibile)
Server: Apache
Transfer-Encoding: chunked „ tramite il request header “Max-Forwards: N” è
Content-Type: message/http possibile richiedere le opzioni non all’origin server
C ma al proxy N-1 attraversato
29
TRACE / HTTP/1.1
Host: www.polito.it

Metodo OPTIONS: esempio HTTP/1.1: metodo CONNECT

„ riservato all’uso con proxy capaci di creare un
OPTIONS / HTTP/1.1 tunnel sicuro (es. SSL)
Host: www.abc.com S

HTTP/1.1 200 OK
Date: Sun, 20 May 2007 21:51:25 GMT
C Server: Apache/1.3.31 (Unix)
Content-Length: 0
Allow: GET, HEAD, OPTIONS, TRACE

Trasmissione parziale Entity tag (Etag)

„ utile quando si vuole riprendere un trasferimento
interrotto
„ header del server:
„ Accept-Ranges: none | bytes
„ Content-Range: bytes start–stop/total
(total=* se dimensione totale ignota)
„ identificativo “opaco” da usarsi in alternativa alla
data di modifica per sapere se una entity è
cambiata
„ inserito dal server nel response header tramite:
Etag: [ W/ ] “hex_string”
„ tag uguali implicano:

„ header del client: „ (strong Etag) oggetti identici (stessi byte)

„ Range: range1, range2, …, rangeN „ (weak Etag) oggetti equivalenti (stesso effetto)

„ possibili range: „ valore usato dal client in request header con:

„ start–stop (intervallo, estremi inclusi)
„ –lastN (gli ultimi lastN byte)
„ startByte– (da startByte sino alla fine)
„ If-Match (es. aggiornare con PUT una versione
precedente solo se non è già stata modificata)
„ If-None-Match (es. fare GET di nuova versione)

© A.Lioy - Politecnico di Torino (2003-09) C-8

Il protocollo HTTP
HTTP/1.1 request header (I)
„ Accept: media-range [ ; q=qualityValue ] , …
„ formati dati accettabili
„ es. Accept: image/jpeg, image/*;q=0.5
„ Accept-Charset: charset [ ; q=qualityValue ] , …
„ set di caratteri accettabili
„ Accept-Encoding: cont-enc [ ; q=qualityValue ] , …
„ codifiche del contenuto accettabili
„ Accept-Language: language [ ; q=qualityValue ] , …
„ lingue accettabili
„ es. Accept-Language: it, en-gb;q=0.8, en;q=0.7
HTTP/1.1 request header (III)
„ If-Match: etagValue , …
„ applicare il metodo solo se la risorsa corrisponde ad
uno dei tag indicati
„ If-Modified-Since: http-date
„ applicare il metodo solo se la risorsa è stata
modificata dopo la data indicata
„ If-None-Match: etagValue , …
„ applicare il metodo solo se la risorsa non
corrisponde ad alcuno dei tag indicati
„ If-Range: etagValue | http-date
„ inviare tutta la risorsa se è cambiata, altrimenti solo
la porzione indicata (da usarsi con Range: …)
HTTP/1.1 request header (V)
„ Range: intervallo
„ chiede di ricevere solo l’intervallo di dati indicato
„ offsetFrom–offsetTo (es. bytes=500–999)
„ –lastBytes (es. bytes=–500)
„ Referer: absoluteURI | relativeURI
„ URI della pagina che ha generato l’attuale richiesta
„ campo assente se URI inserita da tastiera
„ TE: [ trailers ] [ transf-enc [ ; q=qualityValue ] ] , …
„ chunk trailers e codifiche di trasferimento accettabili
„ User-Agent: nome-prodotto
„ identifica il software che implementa il client
© A.Lioy - Politecnico di Torino (2003-09)
(mar'09)
HTTP/1.1 request header (II)
„ Authorization: credenziali
„ credenziali in risposta ad una richiesta di
autenticazione da parte dell’origin server
„ Expect: comportamento-atteso , …
„ il server risponde con 417 se non capisce
„ From: rfc822-address
„ importante soprattutto per contattare chi ha attivato
un robot che crea problemi
„ problemi di privacy/spamming
„ Host: hostname [ : port ]
„ virtual host da contattare (porta di default: 80)
HTTP/1.1 request header (IV)
„ If-Unmodified-Since: http-date
„ applicare il metodo solo se la risorsa non è stata
modificata dopo la data indicata
„ Max-Forwards: max-num-forwards
„ da usarsi con TRACE e OPTIONS per identificare il
nodo intermedio che deve rispondere
„ max-num-forwards decrementato da ogni nodo
„ Proxy-Authorization: credenziali
„ credenziali in risposta ad una richiesta di
autenticazione da parte di un proxy
HTTP/1.1 response header (I)
„ Accept-Ranges: bytes | none
„ indica se il server permette il download parziale
„ Age: ageValue
„ indica i secondi trascorsi da quando la risorsa è
stata inserita in cache
„ ha senso solo in proxy, gateway o server con cache
„ ETag: entity-tag
„ un identificativo opaco unico della risorsa richiesta
„ Location: absolute-URI
„ effettua un redirect alla URI indicata
C-9
Il protocollo HTTP
HTTP/1.1 response header (II)
„ Proxy-Authenticate: sfida
„ sfida proposta da un proxy per autenticare il client
„ Retry-After: http-date | secondi
„ in caso di indisponibilità del server
„ Server: nome-prodotto
„ identifica il software che implementa il rispondente
„ Vary: * | request-header , ...
„ indica i campi della richiesta da cui dipende la
risposta (e quindi la validità di una copia in cache)
„ WWW-Authenticate: sfida
„ sfida proposta dall’origin server per autenticare il
client
Request-cache-directive (I)
„ no-cache
„ voglio una risposta dall’origin server
„ no-store
„ non memorizzare (in tutto o in parte) né la richiesta
né la risposta
„ max-age=secondi
„ voglio una risposta non più vecchia di X s
„ max-stale [ =secondi ]
„ accetto anche risposte scadute (da non più di X s)
„ min-fresh=secondi
„ voglio una risposta che sia ancora valida tra X s
Response-cache-directive (I)
„ public
„ risposta può essere messa in cache (shared/private)
„ private [ =“header-name, …” ]
„ non mettere in shared cache (tutto o alcuni header)
„ no-cache [ =“header-name, …” ]
„ non mettere in cache (tutto o alcuni header)
„ no-store
„ non mettere in cache (shared/private) su disco
„ no-transform
„ must-revalidate
„ il proxy / client deve rivalidare con origin server
quando la risorsa in cache diventa stale
© A.Lioy - Politecnico di Torino (2003-09)
(mar'09)
HTTP/1.1 general header (I)
„ Cache-Control: req-cache-dir | res-cache-dir , …
„ controllo della cache nella richiesta e nella risposta
„ direttive del client e del server verso i proxy
„ Connection: close
„ per connessione non persistenti (con server o proxy)
„ Date: http-date
„ data di invio della richiesta o della risposta
„ Pragma: no-cache
„ per compatibilità con HTTP/1.0
„ in HTTP/1.1 si preferisce Cache-Control
Request-cache-directive (II)
„ no-transform
„ ai proxy è vietato effettuare trasformazioni della
risorsa (es. alcuni cambiano il formato delle
immagini per risparmiare spazio)
„ only-if-cached
„ non voglio contattare origin server
„ utile con reti sovraccariche
Response-cache-directive (II)
„ proxy-revalidate
„ il proxy / client deve rivalidare con origin server
quando la risorsa in cache diventa stale
„ max-age=secondi
„ scadenza dei dati
„ s-maxage=secondi
„ scadenza dei dati in una shared cache
„ ha priorità su max-age (solo per shared cache)
„ nota: max-age e s-maxage hanno priorità su un
eventuale header Expires: della risorsa
C-10
Il protocollo HTTP (mar'09)

HTTP/1.1 general header (II) HTTP/1.1 general header (III)

„ Trailer: header-name , …
„ gli header indicati sono in coda al body chunked
„ non possono essere Transfer-Encoding, Content-
Length e Trailer
„ Transfer-Encoding: codifica-di-trasferimento
„ Upgrade: protocollo, …
„ il client propone di passare ad un protocollo
“migliore” (a giudizio del server tra quelli elencati)
„ Via: protocol nodo [ commento ] , …
„ sequenza di nodi intermedi (proxy o gateway)
„ nodo = “host [ : porta ]” oppure uno pseudonimo
„ Warning: codice agente testo [ data ]
„ tipicamente usato dai proxy per avvisare di
condizioni particolari
„ se testo non ISO-8859-1 allora RFC-2047

Codici di warning HTTP/1.1 entity header (I)

„ 110 Response is stale „ Allow: metodo, …
„ la risorsa è “vecchia”
„ fornito dal server con stato 405 (Method Not
„ 111 Revalidation failed Allowed) per indivare i metodi permessi
„ impossibile contattare origin server per rivalidare „ fornito dal client con PUT per suggerire i metodi con
„ 112 Disconnected operation cui la risorsa dovrebbe essere accessibile
„ proxy scollegato dalla rete „ Content-Encoding: codifica

„ 113 Heuristic expiration „ Content-Language: language

„ proxy ha scelto euristicamente una scadenza „ Content-Length: num-bytes

„ 199 Miscellaneous warning „ numero (in base 10) di byte del body

„ 214 Transformation applied „ Content-Location: absoluteURI | relativeURI

„ proxy ha cambiato la codifica dei dati trasmessi „ utile nel caso una risorsa fornita a seguito di una
negoziazione sia anche accessibile direttamente
„ 299 Miscellaneous persistent warning

HTTP/1.1 entity header (I) Gestione dello stato

„ Content-MD5: base64-md5-digest „ le applicazioni web devono mantenere informazioni
„ per proteggere l’integrità dei dati trasferiti (da errori sugli utenti quando navigano:
casuali, non da attacchi!) „ tra pagine diverse
„ Content-Range: intervallo „ in tempi successivi (minuti, ore, giorni)
„ vari motivi:
„ Content-Type: mime-type „ preferenze utente (es. lingua, dimensione font)
„ dati di business (es. carrello dei prodotti)
„ Expires: http-date „ problema con HTTP:
„ HTTP/1.0 effettua singole transazioni ed è stateless
„ Last-Modified: http-date „ HTTP/1.1 permette transazioni multiple sulla stessa
connessione ma è stateless tra connessioni
successive

© A.Lioy - Politecnico di Torino (2003-09) C-11

Il protocollo HTTP
Possibili metodi per gestire lo stato
„ a livello di applicazione:
„ tramite URL speciali generate dinamicamente
„ es. www.x.com/basket/12ab34/
„ tramite campi “nascosti” (type=hidden) di un form
„ passati in modo invisibile (metodo POST)
„ passati in modo visibile (metodo GET)
– es. www.x.com/basket?id=12ab34
„ a livello di protocollo di trasporto:
„ cookie in HTTP
„ v1 in HTTP/1.0
„ v2 (+ v1) in HTTP/1.1
I 4 comandamenti dei cookie
„ è lecito mantenere traccia dello stato di una
sessione HTTP se …
„ 1) l’utente ne è conscio e consenziente
„ 2) l’utente può cancellare lo stato quando vuole
„ 3) le informazioni di stato non sono fornite a terzi
senza il consenso esplicito dell’utente
„ 4) le informazioni di stato non contengono dati
sensibili e non posso essere usate per ottenere dati
sensibili
Definizione dei cookie
„ inizialmente definito da Netscape:
„ “Persistent client state – HTTP cookies”
„ diventato poi standard IETF:
„ “HTTP state management mechanism”:
„ v1 = RFC-2109
„ v2 = RFC-2695
„ le specifiche Netscape e v1 sono obsolete ma
ancora usate
„ RFC-2964 “Use of HTTP state management”
contiene avvertenze su problemi / pericoli dei
cookie
© A.Lioy - Politecnico di Torino (2003-09)
(mar'09)
Perché gestire lo stato in HTTP?
„ gestire lo stato senza modificare le URL
„ gli utenti possono scambiarsi le URL tra loro (senza
per questo scambiarsi lo stato)
„ non si “sporcano” le cache intermedie con
„ dati uguali ma corrispondenti ad URL diverse
„ pagine diverse ma corrispondenti ad URL uguali
„ minimizzare l’impatto sulla configurazione del
server e dell’applicazione
„ associare l’utente allo stato anche se è anonimo
(es. non passa da portale di autenticazione)
„ salvare lo stato in memoria permanente
„ permane tra reboot, start/stop di UA, cambio di IP
Cookie
„ scopo: memorizzare informazioni da parte del
server in locale sul client in cui “gira” il browser
„ in questo modo si alleggerisce il server
„ ... ma si introducono elementi di:
„ aleatorietà (=UA che non supporta/accetta cookie)
„ rischio (=cookie manipolati sul client o in rete)
1. store the cookie!
2. stored
3. here is the cookie!
Caratteristiche dei cookie
„ dati di piccole dimensioni registrati sul client
(persistent information) e inviati al server
„ cookie creati dal server sul client tramite header:
„ Set-Cookie: ... (v1)
„ Set-Cookie2: ... (v2)
„ cookie trasmessi dal client al server tramite header:
„ Cookie: ...
„ i cookie sono nel formato nome=valore
„ salvati localmente dal browser (in un file)
„ dati comunicati al server ai successivi accessi
„ usati per creare un collegamento tra richieste HTTP
diverse verso lo stesso server
C-12
Il protocollo HTTP
Supporto dei cookie nei browser
„ Netscape Navigator
„ dalla versione 2.0
„ registrati nel file cookies.txt in (default in
Netscape\Users\username)
„ Microsoft IE
„ dalla versione 3.0
„ registrati in \Windows\Cookies o nel profilo utente
\Documents and Settings\username\Cookies
Trasmissione dei cookie (v1): S > C
„ cookie inserito nell’header della risposta HTTP
„ sintassi del cookie:
Set-Cookie:
cookieName=cookieValue
[ ; EXPIRES=dateValue ]
[ ; DOMAIN=domainName ]
[ ; PATH=pathName ]
[ ; SECURE ]
Cookie: dominio, path
„ DOMAIN indica il dominio autorizzato a gestire il
cookie (ad es. polito.it)
„ soltanto le richieste effettuate a tale dominio
provocano la trasmissione del cookie
„ se il dominio non è specificato, il browser usa il
nome del server che ha mandato il cookie
„ PATH indica il percorso in cui si è autorizzati a
usare il cookie (ad es. /didattica/ )
„ soltanto le richieste a URL in tale percorso potranno
provocare la trasmissione del cookie
„ se il path non è specificato, il browser usa quello
della URL che ha scatenato l'invio del cookie
© A.Lioy - Politecnico di Torino (2003-09)
(mar'09)
Limiti dei cookie
„ limitazioni a riguardo del numero di cookie che
possono essere memorizzati
„ su un client:
„ max 300 cookie
„ max 4 KB per cookie
„ totale = 1.2 MB max
„ su un server:
„ max 20 cookie / client
„ max 4 KB per cookie
„ totale = 80 KB max / client
Cookie: valore, scadenza, secure
„ il nome del cookie ed il relativo valore sono
stringhe qualsiasi:
„ prive di virgola, punto-e-virgola e spazio
„ tali caratteri devono essere espressi in esadecimale
(%2C, %3B, %20)
„ EXPIRES: data di scadenza dopo la quale il cookie
può essere eliminato dal client
„ formato rfc-822 Wdy, DD Mon YY HH:MM:SS GMT
„ se non viene specificata una scadenza, il cookie
scade alla chiusura del browser
„ SECURE: cookie trasmesso solo su canale HTTPS
Trasmissione di un cookie (V1): C > S
„ quando il browser sta per effettuare accesso ad
una URL, controlla se esistono cookie associati al
dominio e al percorso
„ in caso affermativo include nell’header HTTP della
richiesta tutte le coppie nome/valore dei relativi
cookie
„ se l’URL specificata nella richiesta HTTP è quella di
un CGI, esso troverà tale stringa nella variabile
d’ambiente HTTP_COOKIE
Cookie: nome1=valore1; nome2=valore2; ...
C-13
Il protocollo HTTP
Esempio (passo 1)
„ cookie usato per gestire la lista dei libri selezionati
da un utente che accede ad un negozio virtuale
„ il client accede al server e riceve:
Set-Cookie:
customer=john_smith;
expires=Sat, 28-Aug-99 00:00:00 GMT;
path=/cgi/bin/;
domain=books.virtualShopping.com;
secure
Esempio (passo 3)
„ il client riceve:
„ Set-Cookie: shipping=fedex; path=/cgi/bin/deliver; ...
„ il client accede ad una URL nel percorso
/cgi/bin/deliver e manda:
„ Cookie: customer=john_smith; part_number=book1;
shipping=fedex
Problemi dei cookie
„ autenticazione tramite cookie (es. siti commerciali
che associano l’utente al carrello virtuale, one-click
order) è fortemente sconsigliata:
„ lettura dei cookie durante la trasmissione e sul client
„ attacchi che permettono di intercettare i cookie:
„ packet sniffing
„ web spoofing
„ attacchi al client (virus, worm, javascript, ...)
„ sub-domain attack (quale parte del dominio è
responsabile del servizio web che usa il cookie?)
© A.Lioy - Politecnico di Torino (2003-09)
(mar'09)
Esempio (passo 2)
„ quando il client accede ad una URL nel percorso
/cgi/bin invia al server un header che contiene:
„ Cookie: customer=john_smith
„ il client riceve come risposta:
„ Set-Cookie: part_number=book1; path=/cgi/bin ; ...
„ il client richiede una URL nel percorso /cgi/bin e
manda:
„ Cookie: customer=john_smith; part_number=book1
Problemi dei cookie
„ il meccanismo basato su cookie permette di creare
profili degli utenti
„ user tracking = termine usato per indicare la
possibilità di tracciare i siti visitati da un utente e
quindi le sue abitudini e i suoi interessi
„ esempio: se un utente scarica un banner
pubblicitario da un sito, oltre a ricevere
un’immagine riceve anche un cookie
„ per tutti i siti appartenenti al circuito è possibile
impostare e recuperare il valore dei cookie
riguardanti le preferenze di navigazione di un
utente
„ i cookie possono essere disabilitati sul browser
Trasmissione dei cookie (v2): S > C
„ nuova sintassi (v2) specificata in RFC-2965
„ uno o più cookie (lista separata da virgole)
Set-Cookie2: cookieName=cookieValue
[ ; Comment=commentText ]
[ ; CommentURL="URL" ]
[ ; Discard ]
[ ; Domain=domainName ]
[ ; Max-Age=dateValue ]
[ ; Path=pathName ]
[ ; Port="comma-separated-port-list" ]
[ ; Secure ]
[ ; Version=versionNumber ]
C-14
Il protocollo HTTP (mar'09)

Nuovi attributi dei cookie v2 Cambiamento di significato

„ Comment e/o CommentURL „ in v1 l’attributo Secure richiedeva trasmissione
„ informano l’utente circa lo scopo del cookie solo su HTTPS
„ Discard „ in v2 l’attributo Secure è un suggerimento del
server:
„ chiede all’UA di cancellare il cookie quando termina
(=cookie volatile, da conservarsi solo in RAM) „ “trattare in modo sicuro”

„ Max-Age „ il client dovrebbe trasmettere il cookie al server

tramite un canale con sicurezza non inferiore a
„ numero di secondi dopo cui cancellare il cookie quella con cui è stato ricevuto
„ Port
„ porte TCP a cui restituire il cookie
„ Version
„ numero di versione (attualmente pari a 1)

Trasmissione dei cookie (v2): C > S Request header “Cookie2”

„ nuova sintassi (v2) specificata in RFC-2965 „ quando un client trasmette almeno un cookie
„ uno o più cookie (lista separata da virgole) avente numero di versione maggiore di quella
implementata dal client deve avvisare il server
dichiarando la propria versione tramite:
Cookie: $Version=cookieVersion ;
cookieName=cookieValue
Cookie2: highest-cookie-version-understood
[ ; $Domain=domainName ]
[ ; $Port="portNumber" ]
[ ; $Path=pathName ]

© A.Lioy - Politecnico di Torino (2003-09) C-15

Il linguaggio Javascript (mar'09)

Javascript
„ linguaggio di script pensato per il web (ma ora
IlIl linguaggio
linguaggio Javascript
Javascript adottato anche in altri ambienti, es. Adobe PDF)
„ eseguibile lato client o lato server
„ introdotto in pagine HTML tramite:
„ il tag <script> nell'head o nel body

Antonio Lioy „ istruzioni specificate per un event-handler

< lioy@polito.it > „ eseguito nel momento in cui il browser, leggendo

HTML, incontra il codice Javascript (sospensione
temporanea dell'azione di interprete HTML)
Politecnico di Torino
Dip. Automatica e Informatica

Il tag <script> Sintassi

„ due parametri principali: „ Javascript è case-sensitive
„ type=text/javascript „ ogni istruzione è terminata da punto-e-virgola ;
„ src=URI (lo script è presente alla URI indicata) „ tipi di dati e corrispondenti valori base:
„ esempi: „ numeri decimali (es. 14, -7, 3.14, 10.7e-4),
ottali (es. 016) ed esadecimali (es. 0xE)
<script type="text/javascript">
„ valori Booleani (true false)
alert("CIAO!");
</script> „ stringhe di caratteri, racchiuse tra apici doppi o
singoli (es. "ciao mamma" 'ciao babbo')
esempio.js „ oggetti
<script
type="text/javascript" „ il valore speciale null (variabile non inizializzata)
src="esempio.js"> alert("CIAO!");
„ il valore speciale undefined (variabile non definita)
</script>
„ il valore speciale NaN (Not A Number)

Commenti Variabili
„ stile C++: da "//" sino a fine riga „ identificate tramite il loro nome:
„ stile C: tutto il testo compreso tra "/*" e "*/" „ deve iniziare con un carattere alfabetico, $ o _
„ esempi: „ può poi contenere caratteri alfanumerici, $ e _
„ es. costo, $1, studente_12345, _2009q1
<script type="text/javascript"> „ non sono tipate (al contrario di Java, C, …) ma:
// commento di una sola riga in stile C++
/* „ prendono un tipo al momento della loro
commento che occupa quattro righe inizializzazione
in stile C „ possono cambiare tipo (automaticamente) per
*/ adattarsi al contesto in cui vengono usate
</script>

© A.Lioy - Politecnico di Torino (2009) G-1

Il linguaggio Javascript (mar'09)

Creazione di una variabile Costanti

„ creazione esplicita tramite l'istruzione "var" (con o „ tramite l'istruzione "const" si può dichiarare una
senza un valore iniziale): variabile con valore fisso:
„ var totale; „ const iva = 0.19;
„ var totale = 0; „ const autore = "A.Lioy";
„ var saluto = "ciao mamma!" „ all'interno di una stringa si possono usare:
„ creazione implicita assegnando un valore alla „ caratteri ISO-8859-1
variabile: „ caratteri Unicode
„ totale = 0; „ sequenze di escape:
„ se si usa una variabile senza averle prima „ \r \n \t \' \" \\
assegnato un valore:
„ \nnn(ottale) \xNN (hex) \UNNNN (Unicode hex)
„ undefined / NaN (se dichiarata con "var")
„ attenzione all'uso (se stringa usata in HTML allora
„ runtime error (se non dichiarata) può richiedere codifica, es. &grave; )

Input ed output Pop-up di I/O

„ JS è un linguggio di scripting, pensato per essere
eseguito lato client (in un browser) o lato server
„ le funzioni di I/O dipendono dall'ambiente di
esecuzione
„ per il lato client si possono usare:
„ per l'input
„ i dati provenienti da una finestra pop-up di input
„ i dati provenienti da un form (tramite DOM)
„ per l'output
„ un finestra pop-up di output
„ la pagina HTML (mentre viene "costruita" o
tramite DOM)
„ window.alert( messaggio )
„ apre un pop-up bloccante contenente il messaggio
ed un pulsante per conferma di lettura (OK)
„ window.prompt( prompt [ , valore_iniziale ] )
„ apre un pop-up bloccante contenente il testo di
prompt, un campo di input (vuoto o col valore
iniziale specificato) e due pulsanti per inserire la
risposta (OK) o per non fornirla (Cancel)
„ restituisce il valore introdotto, oppure null nel caso
l'utente abbia premuto Cancel o chiuso il pop-up
„ a rigor di termini queste sono implementazioni JS
dell'oggetto window (DOM livello 0) e relativi metodi

Pop-up di I/O: esempio 1 Pop-up di I/O: esempio 2

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> "http://www.w3.org/TR/html4/strict.dtd">
<html> <html>
<head> <head>
<title>Pop-up di I/O: esempio 1</title> <title>Pop-up di I/O: esempio 2</title>
<script type="text/javascript"> </head>
var n = window.prompt("Nome?", "nessuno") <body>
window.alert(n); <p>Inizio dell'esempio.</p>
</script> <script type="text/javascript">
</head> var n = window.prompt("Nome?", "nessuno")
<body> window.alert("Ciao "+n);
<p>Fine dell'esempio.</p> </script>
</body> <p>Fine dell'esempio.</p>
</body>

© A.Lioy - Politecnico di Torino (2009) G-2

Il linguaggio Javascript (mar'09)

Output tramite HTML Output tramite HTML: esempio

„ si può usare l'oggetto DOM "document" con uno
dei seguenti metodi: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
„ write( text ) "http://www.w3.org/TR/html4/strict.dtd">
„ inserisce il testo <html>
<head>
„ writeln( text ) <title>Output tramite HTML: esempio</title>
„ inserisce il testo seguito da CR LF </head>
<body>
„ il testo è inserito nel punto ove si incontra lo script
<script type="text/javascript">
var n = window.prompt("Nome?", "nessuno")
document.writeln("<p>Ciao "+n+"</p>");
</script>
</body>

Operatori relazionali e logici Operatori e valori Booleani

descrizione simbolo „ i seguenti valori sono equivalenti a Falso:
uguaglianza (valore) == „ false

identità (valore e tipo) === „0

disuguaglianza (valore) != „ NaN
non identità (valore e tipo) !== „ la stringa vuota ""
maggiore di / maggiore o uguale a > >= „ null
minore di / minore o uguale a < <= „ undefined
appartenenza in
„ qualunque altro valore è equivalente a Vero
AND logico &&
„ attenzione quindi ai confronti:
NOT logico !
„ (27 == true) fornisce valore Vero
OR logico ||
„ (27 === true) fornisce valore Falso

Operatori aritmetici Operatori di assegnazione

descrizione simbolo descrizione simbolo esempio equivalenza

addizione + assegnazione = a = 5
incremento unitario ++ assegn. con somma += a += 5 a = a + 5

sottrazione – assegn. con sottrazione -= a -= 5 a = a – 5

decremento unitario –– assegn. con prodotto *= a *= 5 a = a * 5

moltiplicazione * assegn. con divisione /= a /= 5 a = a / 5

assegn. con modulo %= a %= 5 a = a % 5
divisione (floating-point) /
modulo (resto della divisione intera) %

© A.Lioy - Politecnico di Torino (2009) G-3

Il linguaggio Javascript (mar'09)

Le stringhe di caratteri Conversioni stringhe – numeri (I)

„ particolarmente importanti perché qualunque input „ Number( oggetto )
fornito dall'utente tramite browser è una stringa „ restituisce una rappresentazione numerica
„ operatori: dell'oggetto o NaN
„ assegnazione ( = ) „ String( oggetto )
„ confronto in ordine alfabetico ( == != > >= < <= ) „ restituisce una rappresentazione come stringa di
„ concatenazione ( + += ) caratteri dell'oggetto o undefined o null
„ attenzione! se un'istruzione contiene stringhe,
numeri ed il simbolo +, tutto viene trattato come n = Number("2"); // n = 2
stringhe; si suggerisce perciò l'uso delle parentesi: n = Number("2.3"); // n = 2.3
n = Number("2,3"); // n = NaN
ris = "N=" + 5 + 2; // ris = "N=52"
n = Number("2mila"); // n = NaN
ris = "N=" + (5 + 2); // ris = "N=7" n = Number("2 mila"); // n = NaN
ris = "N=" + 5 – 2; // ris = NaN

Conversioni stringhe – numeri (II) Proprietà e metodi dell'oggetto String (I)

„ parseInt( stringa [ , base ] ) „ importanti perché usabili anche su variabili stringa
„ restituisce un numero intero o NaN „ length( )
„ possibile specificare la base numerica (default: 10) „ lunghezza N della stringa (indice da 0 a N-1)
„ parseFloat( stringa ) „ charAt( pos )
„ restituisce un numero floating-point o NaN „ il carattere in posizione pos
„ parseInt e parseFloat considerano solo la parte „ charCodeAt( pos )
iniziale, fermandosi al primo carattere non valido „ il codice numerico Unicode del carattere in
n = parseInt("10",2); // n = 2 posizione pos
n = parseInt("2.3"); // n = 2 „ indexOf( searchString [ , start ] )
n = parseInt("2,3"); // n = 2 „ posizione della stringa cercata (a partire da start o
n = parseInt("2mila"); // n = 2 dall'inizio)
n = parseInt("duemila"); // n = NaN
„ -1 se la stringa non viene trovata

Proprietà e metodi dell'oggetto String (II) Proprietà e metodi dell'oggetto String (III)
„ lastindexOf( searchString [ , start ] ) „ toLowerCase( )
„ posizione della stringa cercata (a partire da start o „ restituisce i caratteri convertiti in minuscolo
dalla fine) „ toUpperCase( )
„ -1 se la stringa non viene trovata „ restituisce i caratteri convertiti in maiuscolo
„ slice( begin [ , end ] )
„ crea una nuova stringa coi caratteri presenti da
begin a end (escluso) oppure alle fine
„ usare end negativo per indicare posizioni dalla fine
„ substring( begin [ , end ] )
„ estrae i caratteri da begin a end (o alla fine)
„ substr( begin [ , length ] )
„ estrae i caratteri da begin per la quantità length

© A.Lioy - Politecnico di Torino (2009) G-4

Il linguaggio Javascript (mar'09)

Test su valori errati Controllo di flusso

„ non si può fare un confronto con NaN o altri valori „ strutture di controllo utili per eseguire un
limite, ma si possono usare funzioni che testano programma in modo non sequenziale
questi casi „ if
„ isFinite( number ) „ if/else
„ vero se il numero non è pari a +/– infinito „ while
„ isNaN( number ) „ do/while
„ vero se il numero ha un valore diverso da NaN „ for
„ typeOf( x ) „ for/in
„ restituisce una stringa che esprime il tipo di dato
attualmente corrispondente a X
„ risposte possibili: boolean, function, number, object,
string, undefined

Controllo di flusso "if" / "if-else" Esempio di costrutto "if-else"

„ esecuzione condizionale di istruzioni in base al
valore di una condizione Booleana
<script type="text/javascript">
„ if var t_mis = window.prompt("Temperatura misurata?");
„ if/else if (t_mis <= 0)
alert("l’acqua e' ghiacciata");
else if (t_mis >= 100)
if ( condizione ) if ( condizione )
alert("l’acqua e' vapore");
{ {
else
... istruzioni ... istruzioni
alert("l’acqua e' allo stato liquido");
} }
</script>
else
{
... istruzioni
}

Selezione multipla: l'istruzione "switch" Esempio di costrutto "switch"

„ è una forma abbreviata di cascata di "if-else"
„ uso di "break" per non continuare col caso <script type="text/javascript">
successivo var frutto = window.prompt("Quale frutto vuole?");
switch (frutto) {
„ "default" se non si ricade in nessun caso esplicito case "pera":
alert ("pere a 2 Euro/kg"); break;
switch ( espressione )
case "mela":
{
alert ("mele a 1.5 Euro/kg"); break;
case valore1: ... istruzioni;
case "banana":
break;
alert ("banane a 1 Euro/kg"); break;
case valore2: ... istruzioni;
default:
break;
alert ("spiacenti, non abbiamo "+frutto);
...
}
default: ... istruzioni;
</script>
}

© A.Lioy - Politecnico di Torino (2009) G-5

Il linguaggio Javascript (mar'09)

Controllo di flusso "while" Esempio di ciclo "while"

„ struttura per ripetere un blocco di istruzioni finché
una condizione è e rimane vera
<script type="text/javascript">
„ le istruzioni del ciclo possono quindi essere // conto alla rovescia
eseguite zero o più volte var x = 5;
while (x >= 0)
{
while ( condizione ) alert(x);
{ x--;
... istruzioni }
} </script>

Controllo di flusso "do-while" Esempio di ciclo "do-while"

„ struttura simile al while con la differenza che il
controllo si fa alla fine del ciclo e quindi il ciclo
viene sempre eseguito almeno una volta <script type="text/javascript">
var ris;
do {
do ris = window.prompt(
{ "Scrivi 'ciao' o resti bloccato qui");
... istruzioni } while (ris != "ciao");
} while ( condizione ); </script>

Controllo di flusso "for" Esempio di ciclo "for" numerico

„ struttura per ripetere blocchi di istruzioni finché
una condizione rimane vera <script type="text/javascript">
„ specifica: /*
calcolo della somma
„ un’azione di inizializzazione
dei primi 10 numeri naturali
„ una condizione */
„ un’azione da ripetere alla fine di ogni ciclo var totale = 0;
(tipicamente un incremento/decremento dell'indice for (var i=1; i <= 10; i++)
{
associato al ciclo)
totale = totale + i;
}
for ( inizializzazione ; condizione; azione_ripetitiva )
{ alert("Somma dei numeri [1...10] = "+totale);
... istruzioni_da_ripetere </script>
}

© A.Lioy - Politecnico di Torino (2009) G-6

Il formato MIME
IlIl formato
formato MIME
MIME
Antonio Lioy
< lioy @ polito.it>
Politecnico di Torino
Dip. Automatica e Informatica
Definizione base di MIME
„ RFC-2045 “MIME part one: format of Internet
message bodies”
„ RFC-2046 “MIME part two: media types”
„ RFC-2047 “MIME part three: message header
extensions for non-ASCII text”
„ RFC-2048 “MIME part four: registration
procedures”
„ RFC-2049 “MIME part five: conformance criteria
and examples”
Header MIME (I)
„ Mime-Version: 1.0
„ Content-Type: tipo/sottotipo ; parametri
„ text, application, audio, image, message, model,
video, multipart
„ con sottotipo (es. image/gif)
„ parametri opzionali (es. name=bb.gif)
„ parametri spesso nella forma “nome = valore”
„ Content-Transfer-Encoding:
„ non codificati: 7bit, 8bit, binary
„ codificati: base64, quoted-printable
© Antonio Lioy - Politecnico di Torino (2003-2009)
(mime - apr'09)
Che cosa è MIME?
„ Multipurpose Internet Mail Extensions
„ un formato dati per trasmettere informazioni in
Internet
„ inizialmente pensato per superare alcuni limiti della
posta elettronica (RFC-821/822):
„ canale a 7 bit
„ caratteri US-ASCII
„ righe inferiori a 1000 caratteri
„ oggi usato per trasmettere / identificare dati in molti
altri contesti, con caso più importante il web
Estensioni di MIME
„ RFC-2183 “Communicating presentation
information in Internet messages: the Content-
Disposition header field”
„ RFC-2231 “MIME parameter value and encoded
word extensions: character sets, languages, and
continuations”
„ RFC-2557 “MIME encapsulation of aggregate
documents, such as HTML (MHTML)”
„ RFC-3023 “XML media types”
„ RFC-3676 “The Text/Plain format and DelSp
parameters”
„ RFC-3798 “Message disposition notification”
Header MIME (II)
„ Content-Id:
„ identificativo dei dati generato dal mittente
„ opzionale e poco usato
„ Content-Description:
„ descrizione testuale dei dati generata dal mittente
„ opzionale e poco usato
„ Content-Disposition: disposizione ; parametri
„ disposizione: inline, attachment
„ filename=
„ creation-date= , modification-date= , read-date=
„ size=
1
Il formato MIME (mime - apr'09)

Non-codifiche MIME Codifica “base64”

„ 7bit „ 6 bit = 1 carattere ASCII stampabile
„ righe < 1000 caratteri „ dimensione del messaggio: +33%
„ caratteri ASCII (ossia con MSB=0) „ genera righe di 76 caratteri ASCII stampabili
„ è il default „ utile per messaggi binari
„ 8bit
„ righe < 1000 caratteri „ esempio: “C’è” diventa “Qyfo”
„ caratteri potenzialmente con MSB=1
C’è = 0x43 0x27 0xe8
„ binary = 0100 0011 0010 0111 1110 1000
„ righe di lunghezza anche > 1000 caratteri = 010000 110010 011111 101000
= 16 50 31 40
„ caratteri potenzialmente con MSB=1
= Q y f o

Tabella di conversione base64 Codifica “quoted-printable”

00 AA 17
17RR 34
34 ii 51
51 zz „ codificati solo i caratteri ASCII > 127
11 BB 18
18SS 35
35 jj 52
52 00
22 CC 19
19TT 36
36 kk 53
53 11 „ codifica: ‘=hh’
33 DD 20
20UU 37
37 ll 54
54 22 „ codifica dipendente dall’alfabeto (!)
44 EE 21
21VV 38
38mm 55
55 33
55 FF 22
22WW 39
39nn 56
56 44 „ aumento variabile del messaggio
66G G 23
23XX 40
40oo 57
57 55
77 HH 24 „ righe non superiori a 76 caratteri
24YY 41
41pp 58
58 66
88 II 25
25ZZ 42
42qq 59
59 77 „ righe spezzate mettendo ‘=’ come ultimo carattere
99 JJ 26
26 aa 43
43 rr 60
60 88
10 „ codificato anche il carattere ‘=’ come ‘=3D’
10KK 27
27bb 44
44 ss 61
61 99
11
11 LL 28
28 cc 45
45 tt 62
62 ++
12
12M M 29
29dd 46
46uu 63
63 //
13
13NN 30
30 ee 47
47 vv „ esempio: “C’è” diventa “C’=e8” (in ISO-8859-1)
14
14O O 31
31 ff 48
48w w (pad)
(pad) ==
15
15 PP 32
32gg 49
49 xx
16
16Q Q 33
33hh 50
50 yy

Alfabeti MIME ISO-8859-15

Specificati tramite il parametro charset= „ anche detto Latin-9
„ US-ASCII „ adattamento di ISO-8859-1 ai seguenti simboli:
„ ISO-8859-1 (Latin-1) „ Euro
„ ISO-8859-2 (Latin-2) „ caratteri per la traslitterazione di parole russe
„ ISO-8859-3 (Latin-3) „ alcune legature Francesi
„ ISO-8859-4 (Latin-4) „ al costo di perdere il simbolo di pipe ( | ) ed alcuni
„ ISO-8859-5 (Latin/Cyrillic) simboli diacritici isolati (umluat, cedilla, …) ma non
quando usati sulle lettere
„ ISO-8859-6 (Latin/Arabic)
„ ISO-8859-7 (Latin/Greek)
„ nota: windows-1252 ha tutti i caratteri stampabili di
„ ISO-8859-8 (Latin/Hebrew) iso-8859-1/-15 ma alcuni con codici numerici
„ ISO-8859-9 (Latin-5) diversi

© Antonio Lioy - Politecnico di Torino (2003-2009) 2

Il formato MIME (mime - apr'09)

MIME content-type – esempi (I) MIME content-type – esempi (II)

„ text/plain „ multipart/mixed
„ normale testo ASCII (7 bit, alfabeto US-ASCII) contiene parti diverse, da visualizzare secondo
l’ordine di ricezione
„ parametro opzionale “charset=…” richiede
tipicamente anche “encoding=…” „ multipart/parallel
contiene parti diverse, da visualizzare senza un
„ text/enriched ordine prefissato
testo con speciali sequenze di formattazione (es.
<bold> ... </bold>) „ multipart/alternative
contiene gli stessi dati in formato diverso, in ordine
„ text/html, text/xml, text/css, text/csv, ... crescente di fedeltà
„ video/mpeg, video/quicktime, ... „ multipart/digest
„ audio/basic composizione di più messaggi di posta (parti tutte
mono, 8 bit, codifica mu-law ISDN, campionamento message/rfc822)
a 8 KHz

MIME content-type – esempi (III) Estendibilità di MIME

„ message/rfc822 „ nuove definizioni possono essere aggiunte in
contiene un mail (es. per il forward) futuro per:
„ message/partial „ content-type
parte di un mail che è stato spezzato „ content-transfer-enconding
„ message/external-body „ content-disposition
riferimento a dati esterni (Web, FTP, ...)
„ fino a quando un’estensione non è documentata in
„ image/gif, image/jpeg un RFC è da considerarsi “privata” e deve iniziare
immagine in formato GIF o JPEG con codifica JFIF con x- o X-
„ application/postscript, application/pdf „ elenco delle definizioni esistenti (gestito da IANA):
documento Postscript, PDF
„ application/octet-stream http://www.iana.org/assignments/media-types/
formato applicativo generico

Esempio: MIME in e-mail

From: Antonio Lioy <lioy@polito.it>
To: Antonio Lioy <lioy@polito.it>
MIME-Version: 1.0
Subject: test di MIME
Content-Type: multipart/mixed; boundary="0107040803040507"
This is a multi-part message in MIME format.
--0107040803040507
Content-Type: text/plain; charset=ISO-8859-1; format=flowed
Content-Transfer-Encoding: quoted-printable
Questa =E8 la parte di testo.
--0107040803040507
Content-Type: application/x-zip-compressed; name="tesi.zip"
Content-Transfer-Encoding: base64
Content-Disposition: inline; filename="tesi.zip"
dwIAAEQFAAAIAAAAdGVzaS50eHRtVMuO1DAQvEfK/as453ggfff
. . .
kudHh0UEsFBgAAAAABAAEANgAAAJ0CAAAAAA==
--0107040803040507
Content-Type: application/vnd.ms-excel; name="voti.xls"
Content-Transfer-Encoding: base64
Content-Disposition: inline; filename="voti.xls"
0M8R4KGxGuEAAAAAAAAAAAAAAAAAAAAAPgADAP7/CFaggTTTTT
. . .
OTA1OTJjPl0NPj4Nc3RhcnR4cmVmDTE3Mw0lJUVPRg0=
--0107040803040507--

© Antonio Lioy - Politecnico di Torino (2003-2009) 3

Architetture di sistemi distribuiti (progdis - feb'09)

Modello tipico di un’applicazione

„ interfaccia utente (UI)
Architetture
Architetture di
di sistemi
sistemi distribuiti
distribuiti „ gestione di tutto l’I/O con l’utente
„ logica applicativa
„ elaborazioni da fare per fornire il servizio all’utente
„ dati (grezzi)
Antonio Lioy
„ informazioni necessarie all’applicazione
< lioy@polito.it >

Politecnico di Torino
Dip. Automatica e Informatica
UI
UI logica
logica dati
dati

Esempio (applicaz. "classica") Elaborazione “classica”

#include <stdio.h> „ dati locali (condivisi / privati)
dati applicativi
int main ( )
„ unico spazio di indirizzamento
{
„ elaborazione sequenziale su unica CPU
double percentuale_iva = 20;
„ flusso elaborazione univoco (eccezione: interrupt)
interfaccia utente

double prezzo;
char buf[100];
logica applicativa nodo A dati
printf ("costo? ");
globali
gets (buf);
sscanf (buf, "%lf", &costo); dati
f1 ( )
prezzo = costo * (1 + percentuale_iva / 100); privati

printf ("prezzo di vendita = %.2lf\n", prezzo); dati

main ( )
privati dati
return 0; f2 ( )
privati
}

Elaborazione “classica”: vantaggi Elaborazione “classica”: problemi

„ semplicità di programmazione „ protezione dei dati da operazioni illegali
„ robustezza „ operazioni compiute sui dati globali
„ buona possibilità di ottimizzazione „ sono accessibili anche i dati privati (!)
„ parzialmente migliorabile con OOP
„ basse prestazioni
„ unica CPU, elaborazione sequenziale
„ migliorabile con sistemi multi-CPU e
programmazione concorrente (thread, processi)
„ uso solo tramite accesso fisico al sistema
„ terminali o “consolle”
„ migliorabile con collegamenti via modem / rete

© A.Lioy - Politecnico di Torino (2003-09) A-1

Architetture di sistemi distribuiti (progdis - feb'09)

Elaborazione distribuita Esempio (applicaz. distribuita)

„ dati solo locali (privati) nodo A = UI
„ molti spazi di indirizzamento printf ("costo? ");
gets (buf); double costo;
„ elaborazione concorrente su CPU diverse sscanf (buf, "%lf", &costo);
… char buf[100];
„ molti flussi di elaborazione 1a) costo= 50.00
printf ("prezzo = %.2lf\n", prezzo);
1b) prezzo?
nodo B
4) 60.00
dati
prog #2 nodo B = logica applicativa
privati
3) 20.00 double
prezzo = costo * (1 + p_iva / 100);
nodo A prezzo;
nodo C nodo C = dati
dati
prog #1
privati dati data double
prog #3 2) p_iva?
privati source p_iva = 20;

Elaborazione distribuita: vantaggi Elaborazione distribuita: problemi

„ elevate prestazioni „ complessità di programmazione:
„ molte CPU „ come comunicano i vari programmi?
„ buona scalabilità „ formato dei dati sui vari nodi di rete?
„ più facile aumentare il n. di CPU che la potenza di „ necessità di definire protocolli (applicativi)
una singola CPU „ sincronizzazione delle operazioni può portare ad
„ protezione dei dati da operazioni illegali attese e rallentamenti
„ spazi di memoria separati, accessibili solo tramite i „ scarsa robustezza
rispettivi programmi „ maggiori possibilità di errore / malfunzionamenti
„ accesso tramite rete „ difficile ottimizzazione
„ non necessaria presenza fisica dell’utente „ mancanza di una visione globale

Architettura software Modello client-server

„ collezione di moduli software (o componenti)
„ … interagenti tramite un ben definito paradigma di
comunicazione (o connettori)
„ nota: non è detto che la comunicazione sia
effettuata via rete (es. IPC sullo stesso nodo)
„ metodo più diffuso per creare applicativi distribuiti
„ client e server sono due processi separati:
„ il server fornisce un generico servizio
„ il client richiede il servizio
„ anche sul medesimo sistema

M2 M4
Attenzione alla differenza tra client e server:
– come elementi hw di un sistema di elaborazione
M1
– come processi di un’architettura distribuita

M3 M5

© A.Lioy - Politecnico di Torino (2003-09) A-2

Architetture di sistemi distribuiti
Il server
„ idealmente è in esecuzione ‘‘da sempre’’:
„ attivato al boot
„ attivato esplicitamente dal sistemista
„ accetta richieste da uno o più punti:
„ porta TCP o UDP (analogo al concetto di SAP OSI)
„ porte fisse e solitamente predeterminate
„ manda risposte relative al servizio
„ idealmente non termina mai:
„ allo shutdown
„ azione esplicita del sistemista
Architetture
„ usando i concetti di client e server si possono
costruire svariate architetture
„ architettura client-server (C/S)
„ architettura asimmetrica
„ il posizionamento del server è determinato a priori
„ architettura peer-to-peer (P2P)
„ architettura simmetrica
„ ogni nodo può ricoprire il ruolo di client e di server
(simultaneamente o in tempi diversi)
Architettura C/S 2-tier
„ è il C/S classico, originale (es. NFS)
„ il client interagisce direttamente con il server
senza passaggi intermedi
„ architettura tipicamente distribuita su scala sia
locale sia geografica
„ usata in ambienti di piccole dimensioni (50-100
client simultanei)
„ svantaggi
„ bassa scalabilità (es. al crescere del numero di
utenti, decrescono le prestazioni del server)
© A.Lioy - Politecnico di Torino (2003-09)
(progdis - feb'09)
Il client
„ attivato su richiesta di un ‘‘utente’’
„ invia richiesta verso un server
„ attende la risposta su una porta allocata
dinamicamente (non può essere una porta fissa
perché ci possono essere molti “utenti” che
operano simultaneamente, es. due finestre di un
browser web)
„ esegue un numero finito di richieste e poi termina
Architettura client-server (C/S)
„ architettura in cui processi client richiedono i
servizi offerti da processi server
„ vantaggi:
„ semplicità di realizzazione
„ semplificazione del client
„ svantaggi:
„ sovraccarico del server
„ sovraccarico del canale di comunicazione
richiesta
client server
servizio
C/S 2-tier: client pesante o leggero?
„ tre componenti (UI, logica applicativa, dati) … da
distribuire su due soli elementi (client e server)
„ soluzione 1 = fat client / thin server
„ client = UI + logica applicativa
„ server = dati
„ schema tradizionale, difficoltà di sviluppo (sw ad-
hoc) e gestione (installazione, aggiornamento),
minor sicurezza
„ soluzione 2 = thin client / fat server:
„ client = UI
„ server = logica applicativa + dati
„ (es. il web) pesante sui server, maggior sicurezza
A-3
Architetture di sistemi distribuiti (progdis - feb'09)

Architettura C/S 3-tier Esempi di sistemi 3-tier

„ un componente (o agente) è inserito tra client e
server, per svolgere vari ruoli:
„ filtro (es. adatta un sistema legacy su mainframe a
un ambiente C-S)
„ bilanciamento del carico di lavoro sul/i server (es.
transaction monitor per limitare il numero di
richieste simultanee)
„ servizi intelligenti (es. distribuire una richiesta su più
server, collezionare i risultati e restituirli al client
come risposta singola)
„ per migliorare le prestazioni (di calcolo):
„ agente = load balancer
„ server = server farm di server omogenei o
equivalenti
„ per adattare il server alle capacità del client:
„ agente = mediatore / broker
„ server = insieme di server eterogenei / non
equivalenti

client agente server

La UI ed il web 3-tier: modello web (I)

„ UI “tradizionale” custom:
„ difficile sviluppo, deployment e manutenzione pagine HTML
statiche
„ difficile addestramento degli utenti
„ UI “moderna” web è divisa in due: HTML
„ UI client-side standard (=browser)
„ UI server-side standard (=server web) e richiesta HTTP comando
programmabile facilmente browser server server
web web applicativo
HTML dati
dinamici
client-side server-side canale HTTP
dati
(interazione (interfaccia
con l’utente) applicativa)

3-tier: modello web (II) 3-tier: esempio applicativo

tier 2 tier 3
pagine HTML tier 1
(front-end) (back-end)
statiche remote data
web access access
HTML file system
browser
handle middle-tier
GUI connect
security server to
richiesta HTTP server
query java legacy
browser application application
web & DBMS (exec complex
web
HTML applicativo business rules)
dati
data
canale HTTP mobility access
dati hand-held DB
device server
transactions,
sessions, ...

© A.Lioy - Politecnico di Torino (2003-09) A-4

Architetture di sistemi distribuiti (progdis - feb'09)

Architettura C/S 4-tier Migliorare le prestazioni di rete?

„ due componenti / agenti inseriti tra client e server: „ architetture 3/4-tier migliorano le prestazioni di
„ web agent (gestisce la presentazione dei dati) calcolo … ma il front-end resta un collo di bottiglia
„ component agent (gestisce le logiche applicative) „ come migliorare? l’erogatore del servizio non
controlla la parte di rete tra client e front-end
„ tentativo di miglioramento:
(front-end) (back-end) „ statistica sulla provenienza dei clienti
„ moltiplicare il front-end (uno per ogni rete da cui
web component data
client provengono i miei clienti)
agent agent server
„ come indirizzare i clienti verso il front-end giusto?
user presentation application data „ basandosi su lingua/dominio (es. srv.it, srv.fr)
tier tier tier tier
„ basandosi sul routing (es. DNS modificato
Akamai)

4-tier: Internet e-commerce system Client tier: browser o applicazione?

„ web browser:
business objects
pagine HTML
browser statiche „ (V) noto agli utenti e gestito da essi
HTML „ (V) comunicazione e dati standard (HTTP, HTML)
query e
risposte „ (S) versione incerta di protocollo e dati (minimo
richiesta richiesta’ richiesta’’
comune?)
client web component data „ (S) prestazioni non elevate (interprete)
tier tier tier tier
HTML cooked data raw data „ (S) funzionalità limitata (semplice interfaccia grafica)
„ (S) estensioni non sempre supportate:
( HCI ) gestisce business object disponibili back-end
Human le pagine come “componenti”: database „ applet (Java, Active-X)
Computer web • comunicazione distribuita
Interface • proxy „ script client-side (JavaScript, VBscript)
• interfaccia sistemi legacy
• sicurezza „ plugin (Flash, …)
•…

Client tier: browser o applicazione? Architettura peer-to-peer (P2P)

„ applicazione client custom / ad-hoc: „ architetture in cui i processi possono fungere
„ (V) funzionalità molto ricca (=richiesta dal server) simultaneamente da client e da server
„ (V) prestazioni molto elevate „ vantaggi:

„ (S) addestramento all’uso „ carico di lavoro e di comunicazione distribuito tra

tutti i processi
„ (S) piattaforme supportate
„ svantaggi:
„ (S) deployment ed aggiornamento
„ difficoltà di coordinamento / controllo
„ (S) assistenza utenti

C S
peer #1 peer #2
S C

© A.Lioy - Politecnico di Torino (2003-09) A-5

Architetture di sistemi distribuiti (progdis - feb'09)

P2P computing Architetture P2P

„ i client evolvono da meri utenti di servizi a fornitori
autonomi di servizi
„ per condividere risorse e sfruttare servizi
collaborativi
„ si sfruttano meglio le capacità di calcolo dei singoli
nodi (così si scaricano i server)
„ si usano meglio le reti, con comunicazioni dirette
tra i nodi (così si evitano congestioni sui link verso
i server)
„ collaborative computing
„ comunità di rete per compiti distribuiti
(es. grid computing; aperto o chiuso; anche per dati
riservati o elaborazioni con deadline fissa?)
„ edge service
„ servizi ortogonali come “fattori abilitanti” per la
creazione di comunità P2P (es. TOIP, Internet fax)
„ file sharing
„ per scambiare informazioni sulla rete senza doverle
caricare su un server, ma lasciandole là dove si
trovano (problema: l’indice)
„ es. Gnutella (gnutella.wego.com), WinMX, Kazaa

Modelli di server Server iterativo

„ l’architettura interna del server influenza molto le „ se il servizio richiesto è di breve durata il server lo
prestazioni del sistema complessivo fornisce direttamente
„ bisogna scegliere il modello più adatto al problema
applicativo inizializza server
„ non esiste una soluzione buona per tutti gli usi (si
rischia che sia troppo complicata) attende
client
invia domanda
domanda

elabora elabora

attende
risposta invia
risposta

Esempi di server iterativo Prestazioni di un server iterativo

„ servizi standard TCP/IP di breve durata: „ prestazioni non influenzate dal numero di CPU
„ daytime (tcp/13 o udp/13) RFC-867 „ sia TE il tempo di CPU dell’elaborazione richiesta al
„ qotd (tcp/17 o udp/17) RFC-865 server [s] (ipotesi: TE >> TR)
„ time (tcp/37 o udp/37) RFC-868 „ prestazioni massime (in condizioni ottimali):

„ in generale, servizi in cui si vuole fortemente P = 1 / TE servizi / s

limitare il carico (un solo utente per volta) „ in caso di richieste simultanee da più client, quelli
„ vantaggi: non serviti rientrano in competizione
successivamente (a meno che la coda delle
„ semplicità di programmazione domande abbia ampiezza > 1)
„ velocità di risposta (quando ci si riesce a collegare!) „ la latenza [ s ] del servizio dipende dal carico W>=1
„ svantaggi: del nodo che ospita il server:
„ limite di carico TE ≤ L ≤ TE x W ovvero L ~ TE x E(W)

© A.Lioy - Politecnico di Torino (2003-09) A-6

Architetture di sistemi distribuiti (progdis - feb'09)

Server concorrente Esempi di server concorrente

„ quando il servizio è lungo, il server attiva un „ la maggior parte dei servizi standard TCP/IP:
sottoprocesso “figlio” e torna in attesa „ echo (tcp/7 o udp/7) RFC-862
server „ discard (tcp/9 o udp/9) RFC-863
inizializza „ chargen (tcp/19 o udp/19) RFC-864
padre
„ telnet (tcp/23) RFC-854
client attende
genera figlio „ smtp (tcp/25) RFC-2821
invia domanda
domanda
„…
elabora „ in generale, i servizi con elaborazione complessa o
elabora
attende invia di durata lunga e/o non prevedibile a priori
figlio
risposta risposta
termina

Server concorrente: analisi Prestazioni di un server concorrente

„ vantaggi: „ influenzate dal numero di CPU (sia esso C)
„ carico idealmente illimitato „ sia TF il tempo di CPU per creare un figlio [s]
„ svantaggi: „ prestazioni massime (in condizioni ottimali):
„ complessità di programmazione (concorrente) P = C / (TF + TE) servizi / s
„ lentezza di risposta (creazione di un figlio, TF) „ in caso di richieste simultanee da più client, quelli
„ carico max limitato (ogni figlio richiede RAM, cicli di non serviti rientrano in competizione
CPU, cicli di accesso a disco, …) successivamente (a meno che la coda delle
domande abbia ampiezza > 1)
„ la latenza del servizio dipende dal carico W del
nodo che ospita il server:
(TF + TE ) ≤ L ≤ (TF + TE ) x W / C s

Server a “crew” Esempi di server a “crew”

„ pre-attivazione dei figli per migliorare il tempo di „ tutti i servizi concorrenti possono essere realizzati
risposta con server a crew
server
inizializza F2
„ servizi di rete ad alte prestazioni:
F1
„ sottoposti ad alto carico (=n. di utenti simultanei)
genera figli F3
„ con basso ritardo alla risposta (latenza)

client „ esempi tipici:

invia attende
domanda domanda
sveglia figlio „ web server per e-commerce

elabora „ DBMS server

elabora
attende invia
figlio
risposta risposta
torna a
dormire

© A.Lioy - Politecnico di Torino (2003-09) A-7

Architetture di sistemi distribuiti (progdis - feb'09)

Server a “crew”: analisi Prestazioni di un server “a crew”

„ vantaggi: „ analoghe a quelle di un server concorrente, con TF
„ carico idealmente illimitato (si possono generare sostituito dal tempo necessario ad attivare un figlio
figli addizionali in funzione del carico) TA (di solito trascurabile)
„ velocità di risposta (svegliare un figlio è più rapido „ se, una volta esauriti i figli, il server a crew può
che crearlo) generarne altri allora le prestazioni sono una
combinazione pesata con la probabilità G di dover
„ possibilità di limitare il carico massimo (solo figli generare nuovi figli:
pre-generati)
P = (1 - G) x [ C / (TA + TE) ] + G x [ C / (TF + TE) ]
„ svantaggi:
„ complessità di programmazione (concorrente)
„ gestione dell’insieme dei figli (children pool)
„ sincronizzazione e concorrenza degli accessi alle
risorse condivise del server da parte dei vari figli

Programmazione concorrente Processi vs. thread (I)

„ lavoro simultaneo di più moduli di elaborazione „ attivazione di un modulo
sulla stessa CPU „ [ P ] lenta
„ due modelli principali: „ [ T ] veloce
„ processi „ comunicazione tra moduli
„ thread „ [ P ] difficile (richiede IPC, es. pipe, shared memory)
„ [ T ] facile (stesso spazio di indirizzamento)
processo P1 processo P2 processo P3

codice #1 codice #2 codice T1 codice T2

PC #1 PC #2 PC T#1 PC T#2
mem #1 mem #2 PC #3
mem #3

Processi vs. thread (II)

„ protezione tra moduli
„ [ P ] ottima, sia della memoria sia dei cicli di CPU
„ [ T ] pessima (e l’accesso a memoria comune
richiede sincronizzazione e può causare deadlock)
„ debug:
„ [ P ] non banale ma possibile
„ [ T ] molto difficile (schedulazione non replicabile)

© A.Lioy - Politecnico di Torino (2003-09) A-8

Programmazione in ambiente web (mar'09)

World Wide Web (WWW)

Programmazione
Programmazione
„ anche abbreviato semplicemente“web”
in
in ambiente
ambiente web
web
„ insieme di:
„ protocolli di comunicazione
„ formati dati
„ appoggiato su canali TCP/IP
Antonio Lioy
< lioy@polito.it > CSS PNG
JS dati
HTML
XHTML
Politecnico di Torino HTTP FTP
Dip. Automatica e Informatica TCP protocolli
IP

Protocolli per il web Il web statico

„ usabili molti protocolli già esistenti (es. FTP)
„ limitazioni / complicazioni perché non pensati per il
web
„ definito un nuovo protocollo applicativo: 2. lettura pagina da disco

„ HTTP 1. richiesta pagina pagina

browser server HTML
„ le funzionalità ottenibili sono dettate dal protocollo
applicativo (es. con FTP solo GET e PUT di file) web web
4. invio pagina HTML
3. pagina HTML
canale HTTP

5. interpretazione HTML

Web statico Il web statico: pro e contro

„ pagina web non varia mai il suo contenuto
„ … finché l’autore non la cambia esplicitamente
„ il contenuto della pagina:
„ non dipende dall’interazione con l’utente
„ non dipende dalle informazioni inviate al server dal
client
„ non dipende dall’istante di tempo in cui viene
richiesta
„ pagina implementata in HTML / CSS
„ ad ogni pagina web corrisponde un file HTML
„ (+) massima efficienza (basso carico di CPU)
„ (+) possibilità di fare caching delle pagine:
„ in RAM (sul server) o su disco (sul client o proxy)
„ sul server
„ sul client
„ sui proxy
„ (+) pagine indicizzabili dai motori di ricerca
„ (–) staticità dei dati
„ (–) nessuna adattabilità ai client ed alle loro
capacità

© A.Lioy - Politecnico di Torino (2003-09) B-1

Programmazione in ambiente web (mar'09)

Richiesta di una pagina statica Modello delle prestazioni nel web statico
http://security.polito.it/~lioy/01eny/
HTTP HTML
URI parsing + request interpretation
channel set-up transmission + display
http:// security.polito.it /~lioy/01eny/
HTTP
DNS response
UA
transmission
80 / tcp 130.192.1.8
rete user think
time
web server URI rewriting HTTP srv
response
disco creation
request
/u/lioy/public_html/01eny/index.html analysis retrieving
HTML page
t
file system

Agent, server, proxy e gateway Proxy e gateway – schema

„ User Agent = browser (ma anche spider, robot, …)
LAN / Intranet / ISP LAN / Intranet / ISP
„ Origin Server = fornitore del servizio desiderato
(client) (server)
„ possibile avere elementi intermedi tra UA ed OS
che fungono sia da client sia da server:
Internet
„ gateway user origin
proxy gateway
„ interfaccia pubblica per server agent server
„ es. per sicurezza o load balancing
„ proxy (delegato)
„ lavora per conto dei client cache
cache cache
„ inoltra la domanda al server o risponde lui stesso (privata) (shared) (RAM)
tramite una cache

Proxy Web statico con pagine dinamiche

„ cache solo per le pagine statiche „ il client elabora il contenuto dinamico della pagina
„ funzionamento: (script o applet Java o controlli Active-X)
„ trasparente = non altera la richiesta (tranne per le
2. lettura pagina DHTML
parti obbligatorie)
1. richiesta pagina pagina
„ non trasparente = riscrive la richiesta (es. DHTML
browser server
anonymizer) web web
„ configurazione su UA: 4. invio pagina DHTML

„ esplicita (richiede intervento sul client) 3. pagina DHTML

canale HTTP
„ implicita (richiede intelligenza nella rete)
„ possibili gerarchie di proxy 5. esecuzione parte dinamica
+ interpretazione HTML
„ spesso usato da ISP per migliorare la velocità di
navigazione dei client

© A.Lioy - Politecnico di Torino (2003-09) B-2

Programmazione in ambiente web
Web statico con pagine dinamiche
„ pagina varia il suo contenuto in relazione
all’interazione con l’utente
„ es. menù a tendina che appare quando il mouse
transita su una particolare area
„ si parla genericamente di DHTML:
„ HTML 4.0 o superiore
„ CSS (Cascaded Style Sheet)
„ linguaggio di script lato client
„ ECMA 262 (EcmaScript Edition 3) implementato
come JavaScript o JScript
„ VBScript (solo per IE 4.0 o superiore)
Pagine dinamiche: applet
„ due tipi di applet:
„ applet Java (richiede una JVM sul browser)
„ controllo ActiveX (richiede IE + Wintel)
„ problemi:
„ compatibilità (quale versione del linguaggio o della
JVM?)
„ carico (richiedono esecuzione)
„ sicurezza (esecuzione di un programma vero e
proprio):
„ applet Java esegue in una “sandbox”
„ activeX installa una DLL (!)
Client-side scripting
„ HTML è un linguaggio di descrizione di pagine
„ unica interattività possibile è seguire i link
„ aggiunta di interattività alla pagina HTML tramite
codice da interpretarsi sul client (nel browser):
„ NS e SUN inventano il linguaggio LiveWire, poi
chiamato JavaScript (ma non è un subset di Java!)
„ MS inventa VBScript (subset di VBA) e poi JScript
„ accordo per fondere JavaScript e JScript in
ECMAScript:
„ standard ECMA-262
„ da tutti chiamato JavaScript (versione 1.3)
© A.Lioy - Politecnico di Torino (2003-09)
(mar'09)
Pagine dinamiche: pro e contro
„ presentazione del contenuto variabile
„ (+) efficiente (basso carico di CPU sul server)
„ (–) inefficiente (medio-alto carico di CPU sul client,
specie per gli applet)
„ (~) possibilità di fare caching delle pagine
„ (~) pagine indicizzabili dai motori di ricerca (ma
solo i dati statici …)
„ (–) staticità dei dati
„ (–) funzionalità dipende dalla capacità del client
(linguaggi di scripting, tipi di applet, CPU, RAM, …)
Modello delle prestazioni nel web statico
con pagine dinamiche
„ nessuna differenza con web statico per la parte di
rete e lato server
„ maggior carico computazionale e di memoria lato
client:
„ dipende dalla tecnologia dinamica scelta
„ carico crescente per
„ CSS
„ script lato client
„ applet
Client-side scripting: a cosa serve ?
„ inserire dinamicamente degli elementi nella pagina
HTML
„ una funzione scritta in un linguaggio di scripting
può venire associata ad un evento scatenato
dall’interazione con la pagina:
„ es. il click su una figura
„ es. l’invio di un form
„ eseguire del codice in seguito ad un evento
„ validazione dei dati immessi in un form prima di
inviarli al server
„ si risparmia traffico inutile sulla rete e si
semplifica la logica dell’applicazione server-side
18
B-3
Programmazione in ambiente web (mar'09)

Inserimento di codice client-side Commenti & JavaScript

„ uso del tag SCRIPT con parametri: „ JavaScript supporta commenti in stile C e C++
„ type=text/javascript, text/vbscript, ... „ ignorato il testo tra // e ritorno a capo, e tra /* e */
„ src=... (se lo script è presente in un file esterno) „ JS riconosce il commento HTML <!-- come
„ uso di commenti per nascondere il codice dai commento single-line
browser che non lo capiscono „ JS non riconosce la sequenza di chiusura -->
„ necessario premettere il commento JS: // -->
<script src="controlli.js" type="text/javascript">
</script> „ un browser che non supporta JS ignora tutto tra la
prima riga del programma JS <!-- e l’ultima riga del
<script type="text/javascript"> programma // -->
<!--
„ un browser che supporta JS ignora solo la prima
… codice client-side …
// script_comment -->
riga (<!--) e l’ultima riga (// -->) ma non le righe che
</script> stanno in mezzo

JavaScript JavaScript core ed estensioni

„ è un linguaggio interpretato
„ contiene un set ristretto di comandi che servono client-side JavaScript
alle applicazioni lato client per:
„ elaborare dati inseriti nei FORM inclusi nella pagina
HTML
estensioni estensioni
„ transmettere comandi al browser
Core JavaScript
client-side server-side
(es. aprire/chiudere finestre) (variabili, funzioni,
(es. window, (es. database,
„ eseguire certe operazioni a seguito di un evento LiveConnect, …)
history) gestione server)
determinato da una certa azione dell’utente (event
handler)

server-side JavaScript

JavaScript e pagine HTML JavaScript: primo esempio

„ trasmissione delle applicazioni JavaScript verso il
browser:
„ inserire il codice JavaScript nella pagina html
usando il tag <script> <html>
<head></head>
„ importare il codice scritto dentro un file esterno (con
<body>
estensione .js) tramite <script src=“...”> <script type="text/javascript">
„ specificare un’espressione JavaScript come valore document.writeln("Ciao!")
di un attributo HTML </script>
</body>
„ inserire un’espressione JavaScript come gestore di
</html>
eventi (DOM event handler) dentro certi tag HTML

27
js1.html

© A.Lioy - Politecnico di Torino (2003-09) B-4

Programmazione in ambiente web (mar'09)

JavaScript: tavola dei quadrati DOM event handler

„ è possibile associare comandi JavaScript ad eventi
<html> tramite un “gestore di eventi” (o “event handler”)
<head>
<title>Tavola dei quadrati</title> „ sintassi:
</head>
<body>
<TAG . . . eventHandler = “JavaScript_code”>
<h1>Tavola dei quadrati</h1> „ ove:
<script type="text/javascript">
<!-- „ “TAG” è un generico tag HTML
var i;
„ “eventHandler” è il nome dell’event handler
for (i=1; i<20; i++) {
document.writeln("<p>" + i + "^2 = " + i*i + "</p>"); (es. onclick, onfocus, onblur, onsubmit, onreset,
} onchange, onload, onunload)
// -->
</script> „ “JavaScript Code” è una sequenza di comandi
</body> JavaScript (spesso è una chiamata di funzione)
</html>

JS: secondo esempio JS: terzo esempio

<html><head>
„ quando lo stesso script serve per più pagine, lo si
<title>Esempio JS associato ad onclick</title>
può scrivere in un file esterno e richiamarlo nella
pagina HTML
<script type="text/javascript">
„ il file “.js” deve
function makeRed(x){
„ essere un file di testo
obj = document.getElementById(x);
obj.style.color="red"; „ avere un nome di lunghezza massima 8 caratteri
} „ non contenere il tag <script>
</script></head><body>
<p id="id1" onclick="makeRed('id1')">
Click on this text to make it red!
</p>
</body></html> 30 31
js2.html

JS: terzo esempio (2) DOM (Document Object Model)

„ una “visione ad oggetti” della pagina HTML
<html>
<head> „ mette a disposizione una mappa degli elementi del
<script src="js3.js" type="text/javascript"> web utilizzando una metafora ad oggetti
</script> „ DOM è una struttura dati e non un linguaggio
</head>
<body> „ deve essere usato assieme ad un linguaggio di
<p id="id1" onclick="makeRed('id1')"> scripting lato client (JavaScript, VBscript) che
Click on this text to make it red!</p> manipoli tali strutture dati
</body> „ il W3C raccoglie e cerca di rendere standard il
</html> modo con cui vari linguaggi di script interagiscono
js3.html
con la struttura dati alla base di HTML
function makeRed(x) { „ DOM livello 1:
obj = document.getElementById(x);
„ www.w3.org/TR/1998/REC-DOM-Level-1-19981001
obj.style.color="red"; }
js3.js

© A.Lioy - Politecnico di Torino (2003-09) B-5

Programmazione in ambiente web (mar'09)

Esempio DOM Esempio DOM: gerarchia oggetti

<script ...>
. . .
name = document.forms[0].elements[0].value
alert("Ciao " + name)
. . .
</script>

DOM: dare un nome agli oggetti Gerarchia degli oggetti DOM

„ per semplificare l’accesso ad un elemento (invece window
|
di usare il riferimento gerarchico) si può +--parent, frames, self, top
assegnargli un “nome” univoco: |
+--location
„ attributo “name” (disponibile solo per alcuni tag)
|
„ attributo “id” (disponibile per qualunque tag) +--history
|
„ esempio (“intro” è un riferimento ad una particolare +--document
istanza del tag <h1>): |
+--forms
<html> | |
| elements (text elements, textarea, checkbox, radio,
<body> | password, select, button, submit, reset, ...)
<h1 id="intro">Introduzione</h1> +--links
. . . |
</body> +--images
</html> |
+--background

Il web dinamico Web dinamico

„ pagina generata dal server in modo dinamico
1. richiesta risorsa „ varia il suo contenuto informativo in base a:
(CGI, ASP, PHP, …) 2. inoltro richiesta
browser server all’interprete corretto „ richieste inviate dall’utente
web web
5. invio pagina „ contenuto di un database
HTML / DHTML interprete 3. lettura „ istante di tempo in cui avviene la richiesta
(perl, php...) file richiesto
canale HTTP „ tecniche per realizzare il web dinamico:

4. lettura dati „ CGI

da DB / file
file „ linguaggi di script lato server (JavaScript/Jscript,
6. esecuz. parte dinamica .pl .php... VBScript, PHP, PerlScript, Python, ...)
+ interpretazione HTML
HD „ SSI (Server Side Include)
DB HD
„ servlet, JSP (Java Server Pages)

© A.Lioy - Politecnico di Torino (2003-09) B-6

Programmazione in ambiente web (mar'09)

Il web dinamico: pro e contro CGI

„ adattamento delle pagine a condizioni variabili: „ Common Gateway Interface
„ input fornito dal client „ http://hoohoo.ncsa.uiuc.edu/cgi/interface.html
„ capacità del client „ RFC-3875
„ (+) massima dinamicità dei dati „ il web server:
„ (+) ottima adattabilità ai client ed alle loro capacità „ attiva l’applicazione CGI
„ (–) bassa efficienza (alto carico di CPU) „ le passa eventuali parametri:
„ (–) impossibile fare caching delle pagine se i „ tramite stdin (metodi POST, PUT)
parametri di selezione non sono nella URL „ tramite una URL modificata (metodo GET)
(es. sono nei cookie)
„ riceve i risultati tramite stdout
„ possibili errori se il caching è attivato
„ i risultati devono essere in formato web
„ (–) pagine non indicizzabili dai motori di ricerca (HTML/CSS/scripting client-side)

Schema di funzionamento di CGI CGI: pro

1. scelta applicazione
ed invio dati del form
client server
network
(browser) HTTP
4. ricez. pagina HTML
3. invio pagina HTML
al server HTTP e
termine applicazione
„ metodo generale
„ disponibile su tutti i server web (IIS, Apache, …)
„ applicazione scritta in qualunque modo
„ file eseguibile (=più efficienza)
„ script interpretato (=più flessibilità)
2. avvio applicazione CGI e
passaggio parametri
interfaccia CGI

applicazione CGI
(eseguibile o script da interpretare)

CGI: contro CGI: contro (II)

„ ogni chiamata richiede l’attivazione di un processo:
„ elevato costo di inizializzazione
„ elevata latenza
„ creazione / distruzione di molti processi
„ occupazione di memoria proporzionale al numero
di processi simultaneamente attivi
„ difficoltà di comunicazione tra server web ed
applicazione (spazi di memoria differenti)
„ mancano meccanismi per la condivisione di risorse
tra programmi CGI
„ ogni accesso ad una risorsa richiede “apertura” e
“chiusura” della risorsa
„ non esistono i concetti di sessione né di transazione
„ l’interfaccia grafica dell’applicazione web (ossia i
tag HTML) è annegata nel codice
„ paradigma inadatto ad applicazioni con molti utenti,
attivi simultaneamente e che richiedono bassi
tempi di risposta

© A.Lioy - Politecnico di Torino (2003-09) B-7

Programmazione in ambiente web (mar'09)

CGI: possibili miglioramenti Passaggio parametri in input a CGI

„ uso di variabili di ambiente per comunicare tra
server web ed applicazione
„ inclusione di uno o più interpreti nel web server:
„ (+) miglior velocità di attivazione
„ (+) miglior comunicazione con l’applicazione
„ (+) minor occupazione di memoria
„ (-) maggior dimensione del server
„ pre-attivazione dell’applicazione (in N copie) ed
inclusione nel server di un modulo specifico per
scegliere una copia libera e comunicare con essa
„ FastCGI
„ tre modalità per trasmettere i dati dei form:
„ standard input (quando si usa POST o PUT)
„ URL modificata (quando si usa GET):
„ URL originale del CGI seguita da ‘?’ ed elenco
dei dati separati da ‘&’
„ la variabile di ambiente QUERY_STRING
contiene la parte di URL dopo ‘?’
„ linea di comando (quando si usa ISINDEX)
„ altre informazioni passate all’applicazione tramite
variabili di ambiente (es. REMOTE_ADDR,
HTTP_USER_AGENT)

Output generato da CGI CGI: generazione nella risposta

„ l’applicazione deve restituire HTML valido
„ usare &agrave; &quot; &lt; &gt; …
„ l’applicazione deve restituire anche parte degli HTTP/1.0 200 OK server
header HTTP; CGI/1.1 specifica i seguenti header: HTTP MIME-Version: 1.0 HTTP
„ Content-Type: header Server: Apache/1.3.19
Content-Type: text/html
„ tipo MIME della risposta
„ Location: <HTML><HEAD></HEAD>
<BODY> applicazione
„ se è una URI, il server invia un redirect al client HTTP
<H1>Ciao!</H1> CGI
body
„ se è un documento, il server lo fornisce al client </BODY>
„ Status: </HTML>
„ il server lo usa come status code nel suo header

Esempi CGI cgic

„ http://security.polito.it/~lioy/cgi/cgiecho
„ http://security.polito.it/~lioy/cgi.htm (guardare la
differenza tra GET e POST)
„ libreria ANSI C per programmare CGI
„ http://www.boutell.com/cgic/
„ estrae dati dai form, correggendo errori dei browser
„ tratta in modo trasparente GET e POST
„ legge i dati dei form o un file uploaded
„ funzioni per impostare e leggere i cookie
„ tratta correttamente CR e LF nei form di testo
„ estrae dati da form (string, int, real, scelte singole e
multiple), controllando i limiti dei campi numerici
„ carica le var. di ambiente CGI in stringhe non nulle
„ compatibile con qualunque server CGI (U*ix, Win*)

© A.Lioy - Politecnico di Torino (2003-09) B-8

Programmazione in ambiente web
Libwww
„ libreria C per scrivere client HTTP+HTML
„ usata anche per scrivere robot
„ http://www.w3.org/Library/
Server-side scripting (2)
„ JSP (Sun), tecnologia ibrida
„ il codice è annegato nel template HTML (come per
le altre tecnologia altri script server-side)
„ il codice è costituito da
„ scripting elements (come altri linguaggi server-
side)
„ direttive
„ azioni (tag proprietari XML & NS like)
„ le pagine vengono tradotte in servlet dal server Web
SSI (2)
„ su IIS le pagine che contengono direttive SSI
devono avere estensione “.shtm” o “.shtml”
„ è possibile configurare opportunamente i server
web in modo da elaborare le direttive SSI anche per
le pagine con estensioni “.htm” o “.html”
„ server web
„ Apache supporta SSI (e XSSI dalla versione 1.2)
„ IIS supporta solo la direttiva #include di SSI
„ deve essere inserita nella parte di HTML
„ non può essere prodotta da codice ASP
„ in IIS le altre funzionalità di SSI sono ottenibili
con oggetti ASP
© A.Lioy - Politecnico di Torino (2003-09)
(mar'09)
Server-side scripting
„ tecnologie differenti, ma caratterizzate da avere nel
file della pagina codice di scripting mescolato con
il template HTML + client-side scripting
„ ASP (Microsoft)
„ VBscript
„ JScript
„ implementazione anche per Apache (con PerlScript)
„ PHP (open source)
„ sviluppato per Apache
„ esiste anche per IIS
„ usabile sia come linguaggio generale di scripting sia
attraverso CGI
SSI (Server Side Include)
„ introduce direttive nel codice HTML sotto forma di
commento
„ se SSI non è supportato dal server web, le direttive
sono ignorate
„ se SSI è supportato, nella pagina HTML restituita al
client le direttive sono sostituite con il testo risultato
della elaborazione
„ aggiunge nuove variabili di environment
„ non sostituisce CGI/ASP/..., ma introduce la
possibilità di aggiungere dinamismo alle pagine
HTML effettuando semplici operazioni
<!--#command tag1=value1 tag2=value2 ... -->
Variabili di environment SSI
„ DOCUMENT_NAME: il nome del file corrente
„ DOCUMENT_URI: il percorso virtuale a questo
documento (come /docs/tutorials/foo.shtml)
„ QUERY_STRING_UNESCAPED: versione della
stringa di ricerca inviata dal client, con tutti i
caratteri speciali di shell, preceduti da ‘\’
„ DATE_LOCAL: data corrente, fuso orario locale;
soggetto al param. timefmt nel comando config
„ DATE_GMT: analogo a DATE_LOCAL, ma relativo
al meridiano di Greenwich
„ LAST_MODIFIED: l’ultima data di modifica del
documento corrente; come altri soggetto a
timefmt
B-9
Programmazione in ambiente web
Direttive SSI
„ #config: permette di impostare alcuni parametri
„ errmsg: messaggio da restituire nel caso di errore
nel parsing delle direttive SSI
„ timefmt: il formato della data e dell’ora; stringa di
definizione come quella della funzione di sistema
Unix strftime( )
„ sizefmt: il formato della dimensione di file
„ bytes: espresso in byte
„ abbrev: formato abbreviato (KB o MB)
<!--#config errmsg="MSG_ERRORE" -->
<!--#config timefmt="STRINGA_DI_FORM" -->
<!--#config sizefmt="bytes" -->
Direttive SSI (3)
„ #flastmod: restituisce data e ora dell’ultima
modifica di un file (tag: file) il cui nome è passato
come parametro
<!--#flastmod file="NOME_FILE" -->
„ #fsize: restituisce la dimensione di un file il cui
nome è passato come parametro; il formato è
modificabile da sizefmt; tag supportati:
„ virtual: path virtuale (no accesso a CGI script)
„ file: path relativo fisico a partire dalla directory
corrente (no path assoluti, no uso di ‘../’)
<!--#fsize virtual="VIRT_PATH_NOME_FIL" -->
<!--#fsize file="REL_PATH_NOME_FILE" -->
Esempi SSI
„ restituisce la data ed ora locale
<!--#echo var="DATE_LOCAL" -->
„ restituisce la data ed ora locale formattati in modo
differente
<!--#config timefmt="%A %B %d, %Y" -->
<!--#echo var="DATE_LOCAL" -->
„ esegue un’ipotetico script che restituisce il numero
di accessi alla pagina
<!--#exec virtual="/cgi-bin/counter" -->
© A.Lioy - Politecnico di Torino (2003-09)
(mar'09)
Direttive SSI (2)
„ #echo: restituisce il contenuto della variabile (tag:
var) di environment passata come parametro
<!--#echo var="NOME_VARIABILE_ENV" -->
„ #exec: esegue un comando di shell o uno script
CGI il cui nome è passato come parametro e
restituisce il relativo output, tag supportati:
„ cmd: comando di shell (Unix: /bin/sh, Win32:
cmd.exe) indicato dalla stringa
„ cgi: script CGI indicato dalla stringa (path virtuale);
nessuna elab. se non la convers. da URL a tag <A>
<!--#exec cmd="PATH_SHELL_SCRIPT" -->
<!--#exec cgi="VIRT_PATH_CGI_SCRIPT" -->
Direttive SSI (4)
„ #include: inserisce il contenuto di un file nella
pagina restituita al client; il nome del file è passato
come parametro; tag supportati:
„ virtual: path virtuale (no accesso a CGI script)
„ file: path relativo fisico a partire dalla directory
corrente (no path assoluti, no uso di ‘../’)
<!--#include virtual="VIRT_PATH_NOM_FILE" -->
<!--#include file="REL_PATH_NOME_FILE" -->
„ attenzione! il file incluso non può contenere direttive
SSI
Esempi SSI
„ inserisce data ed ora locale in forma standard:
<!--#echo var="DATE_LOCAL" -->
„ inserisce data ed ora locale in forma non standard:
<!--#config timefmt="%A %B %d, %Y" -->
<!--#echo var="DATE_LOCAL" -->
„ esegue un comando di sistema (il testo <DIR>
contenuto nell’output del comando dir può
provocare una errata formattazione da parte del
browser)
<!--#exec cmd="ls" -->
<!--#exec cmd="dir" -->
B-10
Programmazione in ambiente web (mar'09)

Esempi SSI (2) Esempi SSI (3)

„ inserisce un piè di pagina comune ad altre pagine „ impostare un messaggio di errore differente da
<!--#include file="footer.html" --> quello standard in caso di problemi nel parsing
delle direttive
„ inserisce la data dell’ultima modifica alla pagina
<!--#config errmsg="[New error message!]" -->
corrente; soluzione 1 (se si cambia il nome alla
pagina, occorre modificare la direttiva) „ messaggio di errore standard; il codice della
direttiva è sostituito dal seguente testo
<!--#config timefmt="%A %B %d, %Y" -->
<!--#flastmod file="tesine.html" --> [an error occurred while processing this
directive]
„ inserisce la data dell’ultima modifica alla pagina
corrente; soluzione 2 (la direttiva può essere „ messaggio di errore impostato con la direttiva
inclusa così com’è in tutte le pagine)
[New error message!]
<!--#config timefmt="%D" -->
<!--#echo var="LAST_MODIFIED" -->

Esempio funzionamento SSI/XSSI Esempio funzionamento SSI/XSSI (2)

pagina prima dell’elaborazione „ contenuto del file title.inc
<HTML><HEAD><TITLE> (come memorizzata sul server)
<!--#include virtual="title.inc" -->
Esempio di SSI
</TITLE></HEAD><BODY> „ contenuto del file author.inc
...
<FONT face=sans-serif size=-2> <B>Antonio Lioy</B>
<BR>Maintained by: <!--#include virtual="author.inc" -->
<BR>Last modified: <!--#echo var="LAST_MODIFIED" --> „ NOTA: i file inclusi con la direttiva include o il
</FONT> risultato di esecuzione di script (direttiva exec)
pagina dopo l’elaborazione „ possono contenere testo e HTML
<HTML><HEAD><TITLE>
Esempio di SSI (come inviata al browser) „ devono rispettare la codifica dei caratteri prevista da
</TITLE></HEAD><BODY> HTML): es. quantità => quantit&agrave;
...
<FONT face=sans-serif size=-2> „ una volta inclusi devono rispettare i requisiti
<BR>Maintained by: <B>Antonio Lioy</B> HTML/CSS (posizione dei TAG, ecc.)
<BR>Last modified: Thursday, 21-Feb-2002 18:53:28 MET
</FONT>

Server-side o client-side? Server-side e client-side

„ server-side: „ talvolta non sono equivalenti
„ (pro) maggiore sicurezza „ esempio (contenuto di prova.asp):
„ (con) sovraccarico del server
<%
„ client-side: var d=new Date();
var h=d.getHours();
„ (pro) elaborazione sul client
var m=d.getMinutes();
„ (con) capacità del client (funzionalità e prestazioni) Response.write(h + ":" + m);
„ (con) minore sicurezza (manipolabile dall’utente) %>
<script type="text/javascript">
„ in generale:
var d=new Date();
„ meglio server-side per sicurezza e funzionalità var h=d.getHours();
„ meglio client-side per migliorare le prestazioni var m=d.getMinutes();
document.write(h + ":" + m);
„ spesso si usano entrambi simultaneamente </script>

© A.Lioy - Politecnico di Torino (2003-09) B-11

Espressioni regolari in JS
Espressioni
Espressioni regolari
regolari in
in Javascript
Javascript
(RegExp)
(RegExp)
Antonio Lioy
< lioy @ polito.it >
Politecnico di Torino
Dip. Automatica e Informatica
(estensione di materiale preparato da Andrea S. Atzeni)
Un po’ di storia
„ termine coniato dal matematico S. Kleene (‘50)
„ sviluppato all'interno della teoria dei linguaggi
„ stessa potenza espressiva di macchine a stati
deterministiche
„ molto usate in ambiente Unix
„ utilizzi tipici:
„ formulazione di potenti ricerche testuali (es. grep)
„ automazione di editing testuale (es. sed)
Metacaratteri
„ \ (cosiddetto “escape”) per
„ segnalare sequenze speciali
„ considerare caratteri speciali come caratteri normali
„ es. \[ cerca il carattere [
„ simboli speciali per identificare un carattere …
„ \d = numerico, ossia [0-9]
„ \D = non numerico, ossia [^0-9]
„ \s = equivalente a "spazio" (blank CR LF FF HT VT)
„ \S = non equivalente a "spazio"
„ \w = alfanumerico o _, ossia [a-zA-Z0-9_]
„ \W = non alfanumerico o _, ossia [^a-zA-Z_]
© Antonio Lioy - Politecnico di Torino (2009)
(regexp - apr09)
Le espressioni regolari
„ definiscono un lessico = insieme di “parole” lecite
„ … specificando
„ i caratteri
„ alfabetici (A,a)
„ numerici (1,2, ...)
„ segni di interpunzione (. : , ; ...)
„ le sequenze ammissibili
„ es. “una sequenza di uno o più caratteri A”
„ … con un formalismo “compatto” (metacaratteri)
„ es. A+ => le sequenze A, AA, AAA, AAAA, ...
Insiemi di caratteri
„ […] per includere uno qualsiasi dei caratteri in
parentesi
„ possibile specificare singoli caratteri o intervalli di
caratteri adiacenti (es. A-Z per indicare tutte le
lettere alfabetiche maiuscole)
„ es. [a-zABC] riconosce una qualsiasi lettera
alfabeticaminuscola oppure A, B, o C
„ [^…] per escludere uno qualsiasi dei caratteri in
parentesi
„ es. [^0-9] riconosce qualsiasi carattere non numerico
Metacaratteri (cont)
„ | (or logico) per esprimere un’alternativa tra due
espressioni
„ sintassi: regexp1 | regexp2
„ es. "A|B" riconosce sia il carattere A sia il carattere B
„ . indica un carattere qualsiasi
„ es. "R.E" riconosce una stringa di tre caratteri che
inizi con R e termini con E, quali "RaE", "RAE" o
"RiE"
1
Espressioni regolari in JS (regexp - apr09)

Inizio e fine stringa Raggruppamenti

„ ^ corrisponde all'inizio della stringa „ ( … ) per raggruppare espressioni e creare clausole
„ sintassi: ^regexp complesse
„ es. "^buongiorno" riconosce “buongiorno, eccomi „ sintassi: (regexp1<c>regexp2)
qui!” ma non “Dimmi almeno buongiorno” „ es. "pa(ss|zz)o" riconosce "passo" oppure "pazzo"
„ $ corrisponde alla fine della stringa „ {N}
„ sintassi: regexp$ {Nmin,}
{Nmin,Nmax}
„ es. "200$" riconosce "nell'anno 1200" ma non per specificare la numerosità (esatta, minima,
"nell'anno 2000" minima e massima)
„ sintassi: regexp{…}
„ esempio (copia un file eliminando le righe vuote): „ es. "\d{2,4}" riconosce numeri composti da almeno
grep –v "^$" file1 > file2 due cifre ed al massimo da quattro, quali “23”, “655”
o “4345” ma non “2” o “34567”

Numero di occorrenze Le espressioni regolari in Javascript

„ * indica zero o più occorrenze di un’espressione „ possono essere create
„ sintassi: regexp* „ come sequenze letterali
„ es. (ab)* riconosce sequenze di "ab" di qualsiasi „ re = /ab+c/
lunghezza, come "ab" "abab" o anche "" „ valutata quando viene caricato lo script
„ + indica una o più occorrenze di un’espressione „ più veloce se l’espressione rimane costante
„ sintassi: regexp+ „ come costruttore dell’oggetto RegExp
„ es. (ab)+ riconosce sequenze di "ab" di qualsiasi „ re = new RegExp("ab+c")
lunghezza, come "ab" "abab" ma non ""
„ valutata a runtime
„ ? indica zero o al più una occorrenza
„ attenzione al carattere backslash:
„ sintassi: regexp?
re = /\d{2}/
„ es. "Mar(i)?a" riconosce le sequenze “Mara”, “Maria”,
re = new RegExp("\\d{2}")
e “Mariangela” ma non "Mariiiiiia!"

Flag delle regexp in JS Metodi JS per regexp (base)

„ possibile indicare dei flag quando si crea la regexp „ string.search( regexp )
„ re = / pattern / flags „ restituisce l'indice iniziale della (prima) stringa
„ re = new RegExp ("pattern", "flags") trovata, oppure -1
„ possibili flag: „ regexp.test( stringa )

„ i = case-insensitive (ignora la differenza tra caratteri „ restituisce true se all'interno della stringa compare
maiuscoli e minuscoli) l'espressione, false altrimenti
„ g = global (non si ferma al prima match ma prosegue
la ricerca su tutta la stringa) „ esempio:
„ m = multiline (se la stringa contiene terminatori di var s = "ciao,mamma"
linea allora ogni riga è considerata una stringa var re = /\W/
diversa ai fini dei caratteri ^ e $) n = s.search(re) // restituisce 4
„ esempio: re = /ciao/i x = re.test(s) // restituisce true

© Antonio Lioy - Politecnico di Torino (2009) 2

Espressioni regolari in JS (regexp - apr09)

Metodi JS per regexp (avanzati) Validazione dei dati di un form

„ le espressioni regolari possono essere usate per function verifica(d) {
identificare una o più sottostringhe (e cambiarle o var expr=/^\d{2}-\d{2}-\d{4}$/
salvarle in un array) if (expr.test(d))
„ string.match( regexp ) window.alert(d+": formato corretto")
„ restituisce le stringhe trovate oppure null else
window.alert(d+": formato errato")
„ string.replace( regexp, new)
}
„ restituisce la stringa di partenza con new al posto
delle parti selezionate dall'espressione regolare <form>
„ string.split( regexp ) data (gg-mm-aaaa) <input type="text" name="data">
„ restituisce le stringhe identificate in base alla regexp
<input type="button" value="verifica"
onclick="verifica(data.value)">
„ regexp.exec( string )
</form>
„ restituisce le stringhe identificate in base alla regexp

Esempio (password) Esempio (numero naturale)

„ possibile formato di una password: „ numero naturale, scritto eventualmente col punto
„ alfanumerica, minimo 8, massimo 16 caratteri come separatore delle migliaia
„ almeno una maiuscola, una minuscola ed una cifra „ funzione che restituisca -1 se il formato è errato,
altrimenti il numero di partenza senza gli eventuali
„ funzione che restituisca true se la pwd è corretta, punti (ad esempio 21.876 deve diventare 21876)
false altrimenti
function is_pwd_OK(p) { function n_naturale(x) {
return ( re = /^\d{1,3}(\.?\d{3})*$/
/^[a-zA-Z0-9]{8,16}$/.test(p) && if (re.test(x))
/[A-Z]/.test(p) && return x.replace(/\./g,"")
/[a-z]/.test(p) && else
/[0-9]/.test(p) ) return -1
} }

© Antonio Lioy - Politecnico di Torino (2009) 3

Integrazione Web-DBMS (web-dbms, apr'09)

Open Database Connettivity (ODBC)

„ una tecnologia parte di Microsoft Data Access
Components (MDAC) per l’accesso ai DBMS
Integrazione
Integrazione web-DBMS
web-DBMS „ interfaccia a basso livello C++
„ inclusa nei S.O. Microsoft
„ permette l’accesso ai dati da qualsiasi applicazione

Gianluca Ramunno indipendentemente dal DBMS

< ramunno@polito.it >
Politecnico di Torino
Dip. Automatica e Informatica
„ inserimento di un middleware (il database driver)
tra applicativo e DBMS
„ usa SQL come linguaggio di manipolazione ed
accesso ai dati
„ usato da DAO (interfaccia a livello applicativo)
ODBC

Open Database Connectivity (ODBC) Open Database Connectivity (ODBC)

application
application „ application
„ driver manager (DLL)
driver
drivermanager
manager „ carica i driver su richiesta dell’applicazione
„ driver (DLL)

driver driver „ elabora le chiamate ODBC ricevute dal Driver

driver driver driver
driver
Manager
„ il driver manager e i driver appaiono all’applicazione
data
datasource
source data
datasource
source data
datasource
source come un unico blocco
„ data source
„ DBMS, rete, SO su cui gira il DBMS
SqlServer oracle xls
ODBC ODBC

Driver in configurazione single-tier Driver in configurazione single-tier

„ sullo stesso sistema risiedono:
„ application
„ driver manager
„ driver
„ software per accesso ai dati (data access software)
„ data storage
„ esistono due configurazioni:
„ stand alone
stand-alone network
„ network

ODBC ODBC

© A.Lioy, G.Ramunno - Politecnico di Torino (2004-2009) 1

Integrazione Web-DBMS (web-dbms, apr'09)

Driver in configurazione multiple-tier Driver in configurazione multiple-tier

„ sul sistema client risiedono:
„ application
„ driver manager
„ driver
„ sulsistema server risiedono:
„ software per accesso ai dati (data access software)
„ data storage

ODBC ODBC

Driver multiple-tier con gateway OLE DB

„ esiste un processo gateway „ tecnologia Microsoft (MDAC) inclusa nei S.O.
„ instrada le richieste al data access software „ evoluzione di ODBC
„ interfaccia COM (Component Object Model) per
fornire alle applicazioni un accesso uniforme a dati
da fonti diverse
„ DBMS relazionali
„ DBMS non relazionali (novità)
„ file system, mail system, fogli di calcolo,
directory, …
„ non limitato a SQL

ODBC „ interfaccia a basso livello C++ OLE DB

OLE DB OLE DB
„ consumer consumer
„ applicazioni che attraverso l’interfaccia OLE DB
applicazione
applicazioneootool
tool
manipola dei dati
„ provider
interfaccia
„ intermediario che mette a disposizione i dati OLE DB
„ espone metodi OLE DB
„ non tutti i provider hanno le stesse capacità, OLE
OLEDB
DB
dipende da quali metodi OLE DB implementano
ODBC
ODBC File
File Native
Native
provider
OLE DB OLE DB

© A.Lioy, G.Ramunno - Politecnico di Torino (2004-2009) 2

Integrazione Web-DBMS (web-dbms, apr'09)

applicazione
applicazioneootool
tool
Esempio di provider OLE DB
interfaccia
interfacciaOLE
OLEDB
DB „ Jet 4.0 è il motore di Access
„ provider nativo OLE DB
applicazione
applicazione
OLE.ODBC
interface
OLE DB interface OLE DB interface OLE
OLEDB
DB
ODBC Driver
Manager

Text Jet 4.0

ODBC Driver
File interfaccia
database
proprietaria
database database
simple provider native provider
native provider
ODBC provider OLE DB OLE DB

applicazione
applicazioneootool
tool
ADO (ActiveX Data Object)
ADO
ADO
„ middleware con interfaccia ad oggetti OLE DB interface
„ evoluzione di DAO
„ mette a disposizione l’interfaccia OLE DB a
linguaggi diversi dal C++ OLE.ODBC
interface
„ è un wrapper di OLE DB ad un livello applicativo OLE DB inteface OLE DB interface
„ può essere usato con diversi linguaggi all’interno di ODBC driver
manager
„ programmi utente compilati (VisualBasic) text
ODBC driver file database
„ macro in applicazioni come MS-Office
(VisualBasic for Application - VBA)
simple provider native provider
„ WSH: script console (Jscript, VBscript) database

„ pagine ASP in IIS (Jscript, VBscript) ADO ODBC provider ADO

ADO: modello ad oggetti Oggetti ADO

Connection
„ Connection object
Recordset
„ rappresenta una sessione con una sorgente dati
Fields
„ Command object
Field
„ usato per definire un comando specifico come una
Command Properties
query SQL verso una sorgente dati
Parameters Property
„ Recordset object
Parameter
„ rappresenta un insieme di record di una tabella
Properties intera o del risultato di una query
Property „ composto da righe (record) e colonne (field)
Errors
Error ADO

© A.Lioy, G.Ramunno - Politecnico di Torino (2004-2009) 3

Integrazione Web-DBMS (web-dbms, apr'09)

Oggetti ADO Oggetti & collection ADO

„ Record object „ Error object
„ rappresenta una riga di dati „ dettagli
di un eventuale errore avvenuto in un
„ corrisponde ad un singolo record di un recordset operazione col provider
„ Field object „ Fields collection

„ rappresenta una colonna di dati „ contiene tutti gli oggetti Field di un recordset

„ corrisponde ad una colonna di un recordset „ Errors collection

„ Parameter object „ contiene tutti gli oggetti Error generati da un

„ rappresenta un parametro associato ad un oggetto
command (es. parametri per stored procedure)
ADO
operazione non riuscita col un provider
„ Parameters collection
„ contiene tutti gli oggetti Parameter di un command
ADO

Connection Connection
„ Mode
„ modalità di apertura del DB
Provider Connection Open
„ read-only è il default
„ per avere read-write con.Mode = adModeReadWrite
ConnectionString Execute
„ Execute (stringSQL)

Mode Close „ restituisce un RS read-only con cursore forward-

only
metodi
„ se si vogliono altre proprietà, non usare
proprietà con.Execute ma rs.Open

ADO

Recordset Open
Recordset: metodo open
Close

AddNew „ apertura di un recordset

Delete ObjRS.Open ( Source, ActiveConnection,
EOF Recordset
CursorType, LockType, option );
MoveFirst

Index MoveLast
„ Source: comando SQL, nome di tabella, stored
MoveNext procedure
proprietà
„ ActiveConnection: un oggetto di tipo Connection,
MovePrevious
una stringa di connessione
Update „ CursorType: tipo di cursore sul RS risultante
metodi „ Locktype: tipo di lock sui dati
ADO „ Option: interpretazione di Source ADO

© A.Lioy, G.Ramunno - Politecnico di Torino (2004-2009) 4

Integrazione Web-DBMS (web-dbms, apr'09)

CursorType Recordset: metodo AddNew

adOpenUnspecified Unspecified type of cursor.
adOpenForwardOnly This improves performance when only
(default) one pass through a RS is needed.
Like a dynamic cursor, except that you
can't see records that other users add,
adOpenKeyset although records that other users delete
are inaccessible from your RS. Data
changes by other users are still visible.
Additions, changes, and deletions by
adOpenDynamic other users are visible, and all types of
movement through the RS are allowed.
A static copy of a set of records that you
can use to find data or generate reports.
adOpenStatic
Additions, changes, or deletions by
other users are not visible.
„ aggiunta di un record
// se la tabella non e' già accessibile ...
objRS.Open("utenti", conString,
adOpenDynamic, adLockPessimistic);
// aggiunta del record
objRS.AddNew();
objRS("Nome") = "Alberto";
objRS("Cognome") = "Rossi";
objRS.Update();
ADO

ADO modello di operazione (query) ADO: esempio ASP/JScript (query)

„ creare un oggetto ADO connessione „ creazione ed apertura connessione
„ aprire la connessione verso un DBMS
<% @LANGUAGE="JScript" %>
„ creare un oggetto ADO recordset
<!--#include file="adojavas.inc"-->
„ aprire il recordset <%
var con;
„ manipolare i dati nel recorset
var conString;
„ chiudere il recordset con = Server.CreateObject("ADODB.Connection");
„ chiudere la connessione conString = "Provider=Microsoft.Jet.OLEDB.4.0; "
+ "Data Source= c:\\webdata\\mydb.mdb ";
„ rimuovere gli oggetti con.Open(conString);
%>

ADO ADO

ADO: esempio ASP/Jscript (query) ADO: esempio ASP/JScript (query)

„ creazione ed apertura recordset „ estraggo i dati dal recordset rst

<% <%
var rst; while (!rst.EOF) {
var sSQLString; Response.write(rst("Name") + "<BR>");
rst = Server.CreateObject("ADODB.Recordset"); rst.MoveNext( );
sSQLString = "Select * from Customers"; }
rst = con.Execute(sSQLString); %>
%>

ADO ADO

© A.Lioy, G.Ramunno - Politecnico di Torino (2004-2009) 5

Integrazione Web-DBMS (web-dbms, apr'09)

ADO: esempio ASP/JScript (query) Accesso a DB con path relativo

„ chiudo recordset & connessione „ col metodo Server.MapPath

<% @LANGUAGE="JScript" %>

<% <%
rst.Close( ); var con;
con.Close( ); var conString;
rst = null;
con = null; con = Server.CreateObject("ADODB.Connection");
%> conString = "Provider = Microsoft.Jet.OLEDB.4.0; "
+ "Data Source = " + Server.MapPath("./mydb.mdb");
con.Open(conString);
. . .

ADO

ADO: esempio ASP/JScript (update) ADO: esempio ASP/JScript (update)

„ creazione ed apertura connessione „ aggiunta record al DB

<% @LANGUAGE="JScript" %> <%

<!--#include file="adojavas.inc"--> var sSQLString;
<%
var con; sSQLString =
var conString; "INSERT INTO tBooks (Title, Description, Category)
con = Server.CreateObject("ADODB.Connection"); VALUES ('DB Design','How to design a database', 3);"
conString = "Provider=Microsoft.Jet.OLEDB.4.0; " con.Execute(sSQLString);
+ "Data Source= c:\\webdata\\mydb.mdb "; %>
con.Open(conString);
%>

ADO ADO

ADO: esempio ASP/JScript (update) Parole riservate (keyword)

„ chiusura connessione „ si possono verificare errori se i nomi delle tabelle o
delle colonne coincidono con keyword di ASP o del
linguaggio di scripting usato (es. value)
„ per evitare questi errori basta racchiudere il nome
<%
con.Close( );
tra parentesi quadre (es. [ value ] )
con = null;
%>

ADO

© A.Lioy, G.Ramunno - Politecnico di Torino (2004-2009) 6

Cenni sicurezza web ed e-commerce (mag'09)

Autenticazione
Sicurezza
Sicurezza dei
dei servizi
servizi basati
basati sul
sul web
web ee
di quelli di commercio elettronico
di quelli di commercio elettronico Ciao,
Ciao,sono
sonoAlice
Alice
(cenni)
(cenni)
Dimostramelo!
Dimostramelo!
Antonio Lioy
< lioy @ polito.it >

Politecnico di Torino
Dip. Automatica e Informatica
Barbara

Mutua autenticazione Autenticazione (dei dati)

Ciao,
Ciao,sono
sonoBarbara
Barbara

Benvenuta
BenvenutaBarbara!
Barbara!
Parlo
Parlocon
con Aumentate del 30%
la
labanca?
banca? lo stipendio
del Prof. Lioy
Certo!
Il Rettore
Certo!
Come
Comepuoi
puoidubitarne?
dubitarne?

Sgrinfia
Sgrinfia&&Arraffa
ArraffaS.r.l.
S.r.l.
Barbara

Autorizzazione (controllo accessi) Riservatezza

Dammi
Dammil’auto
l’autodi
diAlice!
Alice! Lo sai che Laura non è
una bionda naturale?
Che vergogna!
Sei
Seistata
stataautorizzata
autorizzatada
dalei?
lei?
Che s*?%$#”!

Barbara
Laura

© Antonio Lioy - Politecnico di Torino (2003-09) 1

Cenni sicurezza web ed e-commerce (mag'09)

Riservatezza (dati, azioni, posizione) Integrità (modifica)

Pagate 1,000 EURO

www.playboy.com ad Antonio Lioy

Rete
Retedi
di
comunicazione
comunicazione
Pagate 10,000 EURO
ad Antonio Lioy

contab_in_nero.xls Torino, cella 2455

Integrità (cancellazione) Attacchi di tipo “replay”

Trasferite 2500 Euro dal conto di Pagate 1,000 EURO

Antonio Lioy a quello della Rolex ad Antonio Lioy

Rete
Retedi
di Rete
Retedi
di
comunicazione
comunicazione Pagate 1,000 EURO comunicazione
comunicazione
ad Antonio Lioy.
Pagate 1,000 EURO
ad Antonio Lioy.
Pagate 1,000 EURO
ad Antonio Lioy

Proprietà (astratte) di sicurezza Denial-of-service (DoS)

autenticazione
( semplice / mutua )
autenticazione della
controparte
autenticazione dei dati
authentication ( simple / mutual )
peer authentication
data / origin authentication
„ si tiene impegnato un host in modo che non possa
fornire i suoi servizi
„ esempi:
„ saturazione della posta / log

autorizzazione, authorization, „ ping flooding (“guerra dei ping”)

controllo accessi access control „ SYN attack
integrità integrity „ attacchi:
riservatezza, confidenzialità confidentiality, privacy, secrecy
„ impedisce l’uso di un sistema / servizio
non ripudio non repudiation
„ contromisure:
disponibilità availability
„ nessuna definitiva, solo palliativi quantitativi
tracciabilità accountability

© Antonio Lioy - Politecnico di Torino (2003-09) 2

Cenni sicurezza web ed e-commerce (mag'09)

Distributed denial-of-service (DDOS) I tre pilastri della sicurezza

attaccante
1. Avoidance
(firewall, VPN, PKI, …)
master master master

3. Investigation
(forensic analysis,
daemon daemon daemon daemon daemon
internal audit, …)

VITTIMA 2. Detection
(IDS, monitor, …)
controllo
attacco

Crittografia Crittografia simmetrica

„ chiave unica
mittente destinatario „ chiave comune a mittente e destinatario
„ anche detta crittografia a chiave segreta
messaggio messaggio
chiave-1 (in chiaro) (in chiaro) chiave-2
K K

ciao! E q #%3& D ciao!

crittografia decrittografia

messaggio (cifrato)

Algoritmi simmetrici Crittografia asimmetrica

„ chiavi generate a coppie:
nome
nome chiave
chiave blocco
blocco note
note chiave privata (Kpri) + chiave pubblica (Kpub)
DES
DES 56
56 bit
bit 64
64 bit
bit obsoleto
obsoleto „ chiavi con funzionalità reciproca: i dati cifrati con
3-DES 112 una chiave sono decifrabili solo con l’altra
3-DES 112 bit
bit 64
64 bit
bit resistenza
resistenza 56-112
56-112 bit
bit
3-DES
3-DES 168 bit
168 bit 64 bit
64 bit resistenza 112 bit
resistenza 112 bit
Kpri Kpub
IDEA
IDEA 128
128 bit
bit 64
64 bit
bit
RC2 ciao! E q #%3& D ciao!
RC2 8-1024
8-1024 bit
bit 6464 bit
bit solitamente
solitamente K=64
K=64 bit
bit
RC4
RC4 variabile
variabile stream
stream segreto
segreto
RC5 Kpub Kpri
RC5 0-2048
0-2048 bit
bit 1-256
1-256 bit
bit ottimale
ottimale se
se B=2W
B=2W
AES
AES 128-256
128-256 bit
bit 128
128 bit
bit alias Rjindael
alias Rjindael ciao! E Y?2gs3 D ciao!

© Antonio Lioy - Politecnico di Torino (2003-09) 3

Cenni sicurezza web ed e-commerce (mag'09)

Firma digitale Riservatezza senza segreti condivisi

„ firma digitale ~ cifratura asimmetrica dei dati con „ possibile generare un messaggio segreto per uno
la chiave privata dell’autore specifico destinatario conoscendone solo la
„ solitamente non si cifrano direttamente i dati ma chiave pubblica
un loro riassunto ( digest )
„ fornisce autenticazione (e integrità) dei dati X chiunque
KXpri KXpub

X chiunque D E
KXpri KXpub
messaggio
E D privato per X

messaggio
pubblico
firmato da X

Scambio chiave segreta

Algoritmi a chiave pubblica
mediante algoritmi asimmetrici
„ RSA (Rivest - Shamir - Adleman) „ la riservatezza senza segreti condivisi viene
„ prodotto di numeri primi, fattorizzazione del
spesso usata per comunicare la chiave
risultato crittografica scelta per un algoritmo simmetrico
„ segretezza e firma digitale
„ DSA (Digital Signature Algorithm) ciao! E q #%3& D ciao!
„ elevamento a potenza, logaritmo del risultato
„ solo per firma digitale X Y
KYpub KYpri
„ standard NIST per DSS (FIPS-186)
K ε Y?2gs3 δ K

Lunghezza delle chiavi crittografiche Integrità dei messaggi

„ se: „ una persona che intercetti una comunicazione
„ l’algoritmo di crittografia è stato ben progettato cifrata non può leggerla ...
„ le chiavi - lunghe Nbit - sono tenute segrete „ ... ma può modificarla in modo imprevedibile!
„ … allora è possibile solo l’attacco esaustivo che
richiede un numero di tentativi pari a ci vediamo ci vediamo
alle 19:30 a?kfi3+s7#
T = 2Nbit
simm. 40 64 128 ...

asimm. 256 512 1024 ...

bassa sicurezza alta sicurezza

© Antonio Lioy - Politecnico di Torino (2003-09) 4

Cenni sicurezza web ed e-commerce (mag'09)

Digest Algoritmi di hash

nome blocco digest definizione note

dati inviati ??? dati ricevuti
MD2 8 bit 128 bit RFC-1319 obsoleto
message message MD4 512 bit 128 bit RFC-1320 obsoleto
digest digest MD5 512 bit 128 bit RFC-1321 buono
RIPEMD 512 bit 160 bit ISO/IEC 10118-3 ottimo
digest OK? SHA-1 512 bit 160 bit FIPS 180-1 buono
RFC-3174
SHA-224 512 bit 224 bit FIPS 180-2 ottimo(?)
SHA-256 512 bit 256 bit FIPS 180-2 ottimo(?)
SHA-384 512 bit 384 bit FIPS 180-2 ottimo(?)
SHA-512 512 bit 512 bit FIPS 180-2 ottimo(?)

Keyed-digest Firma digitale

Mittente Destinatario Mittente Destinatario
dati inviati ??? dati ricevuti dati inviati ??? dati ricevuti

chiave message digest message digest

segreta chiave del
condivisa mittente
md mdR
message digest message digest PRI PUB mdF
=?

kdR algoritmo algoritmo

kdF
=? asimmetrico asimmetrico

keyed-digest digital signature

Certificato a chiave pubblica PKI (Public-Key Infrastructure)

„ è l’infrastruttura ...
“Una
“Una struttura
struttura dati
dati per
per legare
legare in
in modo
modo sicuro
sicuro
una „ tecnica ed organizzativa ...
una chiave
chiave pubblica
pubblica ad ad alcuni
alcuni attributi”
attributi”
„ preposta alla creazione, distribuzione e revoca dei
certificati a chiave pubblica
„ tipicamente lega chiave a identità ... ma sono „ composta dalle CA e dai loro sistemi
possibili altre associazioni (es. indirizzo IP)
„ firmato in modo elettronico dall’emettitore:
l’autorità di certificazione ( CA )
„ con scadenza temporale
„ revocabile sia dall’utente sia dall’emettitore

© Antonio Lioy - Politecnico di Torino (2003-09) 5

Cenni sicurezza web ed e-commerce (mag'09)

Struttura di un certificato X.509

„ version 2
„ serial number 1231
„ signature algorithm RSA with MD5, 1024
„ issuer C=IT, O=Polito, OU=CA Autenticazione
Autenticazione della
della controparte
controparte
„ validity 1/1/97 - 31/12/97
„ subject C=IT, O=Polito,
CN=Antonio Lioy
Email=lioy@polito.it
„ subjectpublickeyinfo RSA, 1024, xx...x
„ CA digital signature yy...y

Password (ripetibili) Autenticazione basata su password

„ vantaggi:
server richiesta di autenticazione „ semplice per l’utente
utente (UID) „ ... a condizione che ne abbia una sola
UID
„ svantaggi:
richiesta della password „ conservazione della password lato utente (post-it!)
„ password indovinabile (il nome di mio figlio!)
PUID segreto (PUID)
{ UID : PUID } „ password leggibile durante la trasmissione
o
„ conservazione della password lato server:
{ UID : f (PUID) }
password leggibile „ password in chiaro (pericolossimo!)
durante la tramissione!!! „ digest della password (dictionary attack!)

Lettura della password

Password
durante la trasmissione in rete
„ suggerimenti per renderle meno pericolose: „ possibile tramite
„ caratteri alfabetici (maiuscoli + minuscoli) + cifre + „ packet sniffing (reti broadcast)
caratteri speciali „ MITM (man-in-the-middle) fisico o logico
„ lunghe (almeno 8 caratteri) „ traffic mirroring (su switch e router)
„ parole non presenti in dizionario „ soluzioni:
„ cambiate frequentemente (ma non troppo!) „ cifrare la password durante la trasmissione
„ non usarle :-) „ sicurezza di rete
„ uso di almeno una password (o PIN o codice di „ usare password non ripetibili
accesso o ...) inevitabile a meno di usare sistemi
biometrici „ la lettura diventa inutile ...
„ ... ma la password diventa difficile da
memorizzare

© Antonio Lioy - Politecnico di Torino (2003-09) 6

Cenni sicurezza web ed e-commerce (mag'09)

Password non ripetibili

OTP time-based
(usa-e-getta o OTP, One-Time-Password)

richiesta di autenticazione
richiesta di autenticazione server utente (UID)
server
utente (UID) UID
UID
richiesta della password delle 11:07
richiesta della password n. 48

P50UID P1107UID
P48UID UID : SUID
UID : SUID P49UID
P48UID
P47UID P1107 = p ( 11:07, SUID ) ?
P48 = p ( 48, SUID ) ? P46UID
...

OTP a sfida (asimmetrica)

VPN IPsec firewall IDS / NIDS
richiesta di autenticazione
server utente (UID)
cert (UID, KpubUID)
Protezione
Protezione delle
delle reti
reti ee delle
delle applicazioni
applicazioni
sfida = enc (R, KpubUID)

RUID
UID validi smart-card
SSL/TLS
decifratura
R = RUID ? della sfida

Che cos’è una VPN? Tecniche di realizzazione di una VPN

„ una tecnica (hardware e/o software) per realizzare „ mediante reti nascoste
una rete privata ... „ uso di indirizzi cosiddetti “privati”
„ ... utilizzando canali e apparati di trasmissione „ mediante routing protetto (tunnel IP)
condivisi
„ routing “forzato” dei pacchetti tra due edge router
„ mediante protezione crittografica dei pacchetti rete
ENI
FIAT
FIAT (tunnel IP sicuro)
ENI Melfi
Milano Melfi „ routing “forzato” e protezione crittografica
Milano

rete pubblica
di telecomunicazioni

FIAT
FIAT ENI
ENI
Torino
Torino Roma
Roma

© Antonio Lioy - Politecnico di Torino (2003-09) 7

Cenni sicurezza web ed e-commerce (mag'09)

IPsec End-to-end security

„ architettura IETF per la sicurezza al livello 3 (IPv4 /
IPv6): WAN
„ per creare VPN tra reti diverse (tunnel-mode)
„ per canali sicuri end-to-end (transport-mode) gateway gateway

„ definisce due formati particolari:

„ AH (Authentication Header) LAN LAN
per integrità, autenticazione, no replay
„ ESP (Encapsulating Security Payload)
IPsec IPsec
per riservatezza (+AH) canale virtuale sicuro
„ usa un protocollo per scambio chiavi: (transport-mode SA)
„ IKE (Internet Key Exchange)

Basic VPN Che cos’è un firewall?

„ firewall = muro tagliafuoco (porta anti-incendio)
WAN „ collegamento controllato tra reti a diverso livello di
IPsec IPsec sicurezza
gateway canale virtuale sicuro gateway
(tunnel-mode SA) „ applica alle comunicazioni la politica di sicurezza
desiderata

LAN LAN

rete a
rete a livello
di sicurezza L1 livello di
sicurezza L2

( L1 > L2 )

Firewall Firewall – livello di filtraggio

„ punto di controllo del traffico tra rete interna, rete „ packet-filter
esterna ed una o più DMZ (zona demilitarizzata) su „ controlla i pacchetti a livello IP
cui sono collocati i server pubblici
„ es. “src any dst 10.1.2.3/0.0.0.0 tcp 80 allow”
„ un modulo solo per tanti servizi
rete interna „ buona velocità, bassa sicurezza
rete
reteesterna
esterna FW
„ application gateway
„ controlla il payload applicativo
„ es. “GET DELETE HEAD deny”
server
„ un modulo per ogni applicazione (web, posta, …)
pubblico postazioni di lavoro
DMZ „ bassa velocità, alta sicurezza

© Antonio Lioy - Politecnico di Torino (2003-09) 8

Cenni sicurezza web ed e-commerce (mag'09)

Intrusion Detection System (IDS) Sicurezza a livello applicativo

„ definizione: „ completamente indipendente dalla rete
„ sistema per identificare individui che usano un „ autenticazione basata sull’utente, non sul nodo di
computer o una rete senza autorizzazione rete
„ esteso anche all’identificazione di utenti autorizzati „ indispensabile per quei canali che attraversano un
che violano i loro privilegi firewall
„ ipotesi:
„ il “pattern” di comportamento dei “cattivi” è diverso
da quello dei “buoni” F
W
„ metodologie:
„ signature-based (per attacchi già verificatisi ...)
„ anomalia statistica (per attacchi nuovi ...)

SSL (Secure Socket Layer)

SSL
TLS (Transport Layer Security)
„ proposto da Netscape
„ protocollo di trasporto sicuro (circa sessione): (1) https://www.polito.it/

„ autenticazione (server, server+client) (2) configurazione di sicurezza

„ autenticazione ed integrità dei messaggi
(3) cert (www.polito.it)
„ riservatezza dei dati trasmessi server
(3bis) server challenge /response
„ protezione da replay e da filtering Web browser
sicuro (4) cert (utente)
„ applicabile facilmente a HTTP, SMTP, POP, FTP, ...
„ HTTP sicuro (https://....) = TCP/443 (4bis) client challenge /response
„ POP sicuro = TCP/995
(5) canale sicuro (SSL)
„ TLS = standard IETF (RFC-2246)

Sicurezza di HTTP HTTP - basic authentication scheme

„ meccanismi di sicurezza definiti in HTTP/1.0: GET /path/alla/pagina/protetta
HTTP/1.0 401 Unauthorized - authentication failed
„ “address-based” = il server consente/impedisce
WWW-Authenticate: Basic realm="RealmName"
l’accesso in base all’indirizzo IP del client
Authorization: Basic B64_encoded_username_password
„ “password-based” (o Basic Authentication Scheme) HTTP/1.0 200 OK
l’accesso è limitato da username e password, Server: NCSA/1.3
codificate con Base64 MIME-version: 1.0
Content-type: text/html
„ entrambi gli schemi sono altamente insicuri <HTML> pagina protetta … </HTML>
(perché HTTP suppone che sia sicuro il canale!)
„ HTTP/1.1 introduce “digest authentication” basata
su sfida simmetrica
„ RFC-2617 “HTTP authentication: basic and digest
access authentication”

© Antonio Lioy - Politecnico di Torino (2003-09) 9

Cenni sicurezza web ed e-commerce (mag'09)

Controllo accessi ai siti web Applicazioni web: validare sempre i dati!

„ tramite VPN: „ come validare i dati
„ comunicazione impossibile a livello IP „ “check that it looks good”
„ tramite SSL client authentication: „ “don’t match that it looks bad”
„ se fallisce si chiude il canale TCP „ dati non validati / ripuliti
„ tramite HTTP Basic Authentication: „ … sono la sorgente di moltissimi attacchi
„ se fallisce non viene eseguito il metodo HTTP „ in ogni tipo di applicazione
richiesto „ mai fidarsi del codice eseguito sul client
„ tramite autenticazione applicativa (es. un form): „ assumere sempre che i dati scambiati possano
„ possibili errori di implementazione essere manipolati in modo improprio/inatteso
„ più tardi si fa l’autenticazione e più si espongono „ la sicurezza deve essere server-based
livelli sw ad attacchi che sfruttino bachi/errori

Applicazioni web: esempio Sistemi di pagamento elettronico

„ fallimento della moneta elettronica per problemi
form tecnici e normativi (es. bancarotta di DigiCash)
(con controlli „ fallimento di SET (Secure Electronic Transaction)
JavaScript) per problemi tecnici ed economici
„ attualmente il metodo più usato è trasmissione del
numero di carta di credito su canale SSL ...
„ ... che però non garantisce contro le frodi: VISA
dati validi??? Europa dichiara che il 50% dei tentativi di frode
dati del form nascono da transazioni Internet, che però sono
solo il 2% del suo volume d’affari!
server web
(con ASP, CGI, PHP, …)

Architettura di pagamento via Web Pagamento con carta di credito via Web
1. offerta
„ ipotesi base:
„ l’acquirente possiede una carta di credito
2. ordine
ct „ l’acquirente ha un browser con SSL
ire
cardholder red merchant
4. Internet 3. ! „ conseguenze:
ric OK
h ie e nto
5. st m „ la sicurezza effettiva dipende dalla configurazione
da a ga
c. pa sia del server sia del client
ti
c
c. 8. mondo
.c
. 6. finanziario „ il payment gateway ha tutte le informazioni
POS da
SS ti c .c (pagamento + merce) mentre il merchant ha solo le
L virtuale .O
K? informazioni sulla merce
7.
payment OK
! payment
gateway
network

© Antonio Lioy - Politecnico di Torino (2003-09) 10

Cenni sicurezza web ed e-commerce
PCI DSS
„ Payment Card Industry Data Security Standard
„ oggi richiesto da tutte le carte di credito per
transazioni Internet
„ molto più prescrittivo rispetto ad altre norme di
sicurezza (es. HIPAA = Health Insurance Portability
and Accountability Act)
„ https://www.pcisecuritystandards.org
Requisiti PCI DSS (II)
„ rispettare un programma per la gestione delle
vulnerabilità
„ R5 = usare e aggiornare con regolarità l’antivirus
„ R6 = sviluppare e mantenere applicazioni e sistemi
protetti
„ implementare misure forti per il controllo accessi
„ R7 = limitare l’accesso ai dati dei titolari delle carte
solo se effettivamente indispensabili per lo
svolgimento dell’attività commerciale
„ R8 = dare un ID univoco ad ogni utente del SI
„ R9 = limitare la possibilità di accesso fisico ai dati
dei titolari delle carte
Bibliografia
„ B.Schneier: “Applied cryptography”
„ W.Stallings: “Cryptography and network security”
anche in italiano:
“Sicurezza delle reti - applicazioni e standard”
Addison-Wesley Italia, 2001
„ Fugini, Maio, Plebani
“Sicurezza dei sistemi informativi”, Apogeo, 2001
„ C.P.Pfleeger, S.Pfleeger: “Security in computing”
anche in italiano:
“Sicurezza in informatica”, Pearson Education
© Antonio Lioy - Politecnico di Torino (2003-09)
(mag'09)
Requisiti PCI DSS (I)
„ costruire e mantenere una rete protetta:
„ R1 = installare e mantenere una configurazione
con firewall per proteggere i dati dei titolari delle
carte
„ R2 = non usare password di sistema predefinite o
altri parametri di sicurezza impostati dai fornitori
„ proteggere i dati dei titolari delle carte:
„ R3 = proteggere i dati dei titolari delle carte
memorizzati
„ R4 = cifrare i dati dei titolari delle carte quando
trasmessi attraverso reti pubbliche aperte
Requisiti PCI DSS (III)
„ monitorare e testare le reti con regolarità
„ R10 = monitorare e tenere traccia di tutti gli accessi
effettuati alle risorse della rete e ai dati dei titolari
delle carte
„ R11 = eseguire test periodici dei processi e dei
sistemi di protezione
„ adottare una Politica di Sicurezza
„ R12 = adottare una Politica di Sicurezza
E per finire ...
„ se vi interessa la sicurezza e la protezione dei
sistemi informativi ...
„ ... allora nella laurea specialistica tra i moduli a
scelta inserite TIGR
Tecnologie dell'Informazione
e Gestione dei Rischi
11