Sei sulla pagina 1di 97

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

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

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 „ Int Expires
„ se impostata a TRUE il server non invia output al „ configura il tempo in minuti di validità della pagina
client finché non viene terminata completamente nella cache del client (default = 10)
l’elaborazione dello script „ Date ExpiresAbsolute
„ String ContentType „ configura in termini di tempo assoluti (ossia data e
„ configura il MIME tipe client (es. “text/html”) ora di scadenza) la validità della pagina nella cache
„ String Charset del client
„ configura il charset della risposta (es. “iso-8859-1”) „ 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 „ 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.write("Ciao"); %> „ 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
var Nome = Request.Form("yourname");
„ data e ora di scadenza del cookie
var Cognome = Request.Form("yourfamilyname");
„ se non è impostata, è un cookie "volatile"
„ attenzione! impostare con setVarDate(date) Response.Cookies("myapp")("nome") = Nome;
Response.Cookies("myapp")("cognome") = Cognome;
„ Secure = true | false
„ tramesso solo su canali sicuri (SSL, TLS) var expire = new Date();
„ Path = pathprefix 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) „ String HTMLEncode (String)
„ esegue il file .asp che si trova in string (path relativo „ codifica una stringa in HTML usando gli opportuni
o assoluto; se assoluto lo script deve appartenere caratteri di escape (es. &egrave; )
alla medesima application) „ String MapPath (String)
„ Component CreateObject (String) „ mappa una virtual directory sulla directory fisica del
„ istanzia un componente (può essere un qualsiasi server (importante per agganciare un file o un DB)
componente installato sul server, es. ActiveX) „ String URLEncode (String)
„ codifica una stringa in modo appropriato per essere
usata come una URL (es. %20)
<% MyAd =
new Server.CreateObject("MSWC.AdRotator"); %>

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

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

La soluzione: CSS CSS: definizione


„ Cascading Style Sheets „ CSS1 (dicembre 1996)
„ introdotti dal World Wide Web Consortium (W3C) „ http://www.w3.org/TR/REC-CSS1
nella specifica HTML 4.0 ed ora usati anche per „ 50 proprietà
XHTML e XML
„ CSS2 (maggio 1998) e CSS2.1 (luglio 2007)
„ i fogli di stile descrivono come visualizzare i
componenti logici di un documento: „ 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 „ possibile specificare che un foglio di stile si applica
contiene la seguente definizione solo se la pagina è visualizzata su uno specifico
„ h1 {color: red; text-align: left} supporto multimediale (o "media-type"):
„ mentre un foglio di stile interno alla pagina „ parametro "media=…" del tag LINK
contiene: „ possibile elencare più media-type, separati da
„ h1 {text-align: right} virgola
„ la definizione risultante di <h1> per il browser sarà „ 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 (mar'09)

Includere un foglio di stile (@import) CSS: definizione dell’attributo class


„ un CSS può importare le regole di altri CSS in modo „ è possibile definire stili differenti per uno stesso
assoluto o condizionato al media-type elemento di HTML usando l’attributo “class”
„ sintassi „ esempi:
@import: url ("URI_CSS") [ media1 , media2 , ... ] ; „ un paragrafo “normale” allineato a sinistra
„ da inserirsi prima di qualunque regola di „ un paragrafo “citazione” centrato e corsivo
formattazione „ una classe “centrato” da usarsi al posto di <center>
„ esempio (all'interno di un file/sezione CSS):
p.normale { text-align: left }
@import url("poli_general.css"); p.citazione {
@import url("poli_stampa.css") print; text-align: center; font-style: italic }
body { color: blue } /* sconsigliato: non e' una classe "logica" */
. . . .centrato { text-align: center }

HTML: uso dell’attributo class CSS: unità di lunghezza


„ relative:
<p class="normale">
„ "em" = altezza della lettera "M" nel font corrente
Il poeta ha scritto:
</p> „ "ex" = altezza della lettera "x" nel font corrente
<p class="citazione"> „ "px" = dimensione di un pixel
Nel mezzo del cammin di nostra vita ...
</p> „ assolute:
„ "in" = inch (25.4 mm)
„ "cm" o "mm"
Il poeta ha scritto:
„ "pt" = punto tipografico (1/72 di ich)
Nel mezzo del cammin di nostra vita ... „ "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: colori CSS: background (I)


„ alcuni colori predefiniti ed accessibili per nome: „background-color: colore | inherit | transparent
Black, White, Gray, Silver, „ "transparent" è il default
Yellow, Red, Purple, Fuchsia, Maroon, „ background-image: url("image_URI")
Green, Lime, Olive, Aqua, Teal, Blue, Navy
„ URL dell’immagine
„ altri colori specificabili mediante il loro codice RGB
esadecimale, decimale o percentuale „ si suggerisce di specificare anche un colore da
usarsi:
„ esempi (equivalenti a "red"):
„ se non si riesce a caricare l'immagine
„ rgb (255, 0, 0)
„ per contornare l'immagine
„ rgb (100%, 0%, 0%)
„ visibile nelle trasparenze dell'immagine
„ #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) F.5


CSS (mar'09)

CSS: background (II) CSS: background (III)


„ background-repeat: repeat | repeat-x | repeat-y | „ background-attachment: fixed | scroll | inherit
no-repeat | inherit „ immagine in posizione fissa o segue l'eventuale
„ copie multiple dell'immagine per coprire tutto lo scorrimento del contenuto
sfondo oppure solo in orizzontale o verticale „ background: color image_URI repeat attachment
„ background-position: posizione_h posizione_v position | inherit
„ ogni posizione può essere una keyword, una „ formato sintetico per tutte le varie specifiche
lunghezza (distanza da angolo in alto a sinistra) o „ non importa l'ordine perché ogni elemento ha una
una percentuale (della dimensione del contenitore) sintassi diversa (possibile anche omettere elementi)
„ keyword (orizzontale): left, center, right „ esempio (sfondo grigio, immagine centrata, segue il
„ keyword (verticale): top, center, bottom contenuto)
„ se c'è una sola keyword la seconda si assume background: gray url("polito_logo.jpg")
essere "center" scroll center center no-repeat

CSS: text properties (I) CSS: text properties (II)


„ color: colore „ line-height: normal | fattore | lunghezza |
„ text-align: left | right | center | justify percentuale
„ text-transform: none | capitalize | uppercase | „ il valore del fattore moltiplicativo viene ereditato tale
lowercase e quale mentre per la percentuale si eredita il valore
numerico risultante
„ text-decoration: none | underline | overline | line-
through | blink „ esempi:

„ text-indent: lunghezza | percentuale „ { line-height: 1.2; font-size: 10pt } = i figli


ereditano per l'altezza delle loro righe un fattore
„ possibili valori negativi (testo sporge a sinistra) 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 (I) CSS: font properties (II)


„ font-style: normal | italic | oblique „ font-size: dimensione_del_font
„ N.B. oblique sottilmente diverso da italic „ valore assoluto (pt, mm, …)
„ font-weight: normal | bold | 1…1000 „ valore relativo (em, ex, …)
„ il valore numerico indica la saturazione del nero „ percentuale
„ font-variant: normal | small-caps „ scala assoluta (1…7, normale=3) o relativa (+/– N)
„ font-stretch: ultra-condesed | extra-condensed | „ xx-small x-small small medium large x-large xx-large
condensed | semi-condensed | normal | (notare che manca “normal” e la scala non è definita)
semi-expanded | expanded | extra-expanded | „ note:
ultra-expanded
„ i valori relativi e le percentuali sono riferite al font
„ raramente disponibile su UA dell'elemento genitore (può essere il default dell'UA)
„ preferire valori relativi o percentuali, evitare valori
assoluti

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

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 (feb'09)

Trasmissione parametri di un form (GET) application/x-www-form-urlencoded


„ URI = concatenazione del campo “action”, “?” e „ usabile sia con GET sia con POST
quindi i parametri espressi nella codifica „ è la codifica di default
application/x-www-form-urlencoded
„ genera una stringa composta dai nomi dei controlli
„ il body della richiesta rimane vuoto 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: form Es. x-www-form-urlencoded: trasmissione


„ se il precedente form venisse riempito dal signor
<form Marco Noè, nato il 30/10/74, genitore di 3 figli …
name="sample"
„ … allora verrebbe creata la seguente stringa:
method="get"
action="/cgi-bin/acquisisci">
Nome e cognome: cognome=Marco+No%E8&figli=3&nascita=30%2F10%2F74
<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) Esempio invio dati con GET: il form
„ URI coincide col valore del campo “action” <form method="get" action="/cgi/insaula">
<table border="0">
„ (default, ovvero enctype non specificato) <tr>
„ Content-Type: application/x-www-form-urlencoded <td>Numero aula:</td>
<td><input type="text" size="8" name="num"></td>
„ Content-Length: … </tr>
<tr>
„ body contiene solo la stringa dei parametri nella <td>Sede:</td>
forma application/x-www-form-urlencoded <td><input type="text" size="15" name="sede"></td>
</tr>
„ con “enctype=multipart/form-data”
<tr>
„ Content-Type: multipart/form-data <td>
<input type="submit" value="Invia">
„ Content-Length: … <input type="reset" value="Cancella">
</td>
„ body = messaggio MIME (una sezione per ogni </tr>
parametro) </table>
</form>
„ nota: obbligatorio per controlli di tipo File

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

Gli attributi I browser


„ tramite gli attributi è possibile caratterizzare meglio „ per visualizzare documenti HTML (e per navigarli)
un tag occorre un programma apposito: un browser HTML
„ ogni attributo è costituito da una variabile a cui „ un browser è un interprete:
viene assegnato un valore, posta all’interno del tag „ legge codice sorgente (HTML + estensioni)
di apertura (es. <hr width="90%">)
„ 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 „ per validare pagine create dinamicamente bisogna
„ permette di verificare se una pagina è scritta fare l'operazione sul client invece che sul server
rispettando completamente la sintassi ufficiale „ occorre quindi:
„ può fornire spiegazioni dettagliate sugli errori e come „ un plugin speciale per il browser
correggerli „ visitare manualmente tutte le pagine da validare
„ http://tidy.sourceforge.net „ un ottimo plugin per FireFox:
„ “ripulisce” il codice HTML e lo trasforma in una „ http://users.skynet.be/mgueury/mozilla/index.html
versione più recente
„ configurarlo in modalità "SGML parser" per avere gli
„ installabile localmente o usabile via rete stessi risultati di validator.w3.org
http://cgi.w3.org/cgi-bin/tidy
„ problemi con HTML generato da un server dinamico
(non validabile una pagina sorgente ASP o PHP)

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> „ <sup> ... </sup>
„ testo in grassetto (bold) „ testo sopraelevato (apice)
„ <i> ... </i> „ <sub> ... </sub>
„ 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 „ utilizzando un collegamento (detto àncora in HTML)
„ comprende: è possibile spostarsi automaticamente da una
risorsa ad un’altra
„ caratteri estesi di ISO-8859-1 – es. &raquo; = »
„ il tag che identifica la presenza di un collegamento
„ simboli matematici – es. &exist; = ∃ è l’ancora, indicata con <a>
„ lettere greche – es. &alpha; = α
„ simboli internazionali – es. &euro; = €

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 è „ possibile specificare la porzione di pagina occupata
simile a quella tradizionale, sostituendo <body> con da ciascun frame, usando:
<frameset> „ percentuale (dello spazio disponibile)
„ è possibile annidare FrameSet per creare „ valore assoluto (in pixel)
suddivisioni complesse della pagina
„ * per indicare di usare tutto lo spazio rimasto
„ il contenuto di ciascun frame è specificato tramite:
„ in caso di “overflow” si attivano le scrollbar (H e V)
„ <frame src=URI name=...>
„ esempio (suddivisione orizzontale):
„ usare il tag <noframe> per testo da visualizzare sui
browser che non supportano i frame „ <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 „ id = "stringa"
„ servono a raggruppare parti per poter applicare più „ àncora per un link
facilmente una formattazione „ riferimento ad un elemento da parte di uno script
„ DIV identifica un blocco (tipicamente i browser „ riferimento ad un campo di un form
vanno a capo alla fine del blocco)
„ riferimento per uno stile specifico in CSS
„ SPAN identifica una parte all’interno di un blocco
„ class = "class1 class2 …"
„ molto usati per creare (con un opportuno CSS) un
layout di pagina senza usare table o frame „ 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


„ se l’oggetto richiesto non è disponibile alla URI
200 OK 400 Bad request indicata, il server può indicare la nuova URI tramite
201 Created 401 Unauthorized una risposta con codice 3xx e header
202 Accepted 403 Forbidden Location: nuova-URI
204 No Content 404 Not found „ il browser può:
„ connettere automaticamente il client alla nuova URI
301 Moved permanently 500 Internal server error se il metodo richiesto era GET o HEAD …
302 Moved temporarily 501 Not implemented „ … mentre gli è vietato farlo se il metodo era POST
304 Not modified 502 Bad gateway „ per supportare i browser vecchi (= che non
503 Service unavailable 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 (mar'09)

HTTP date Il protocollo HTTP/0.9


„ tre possibili formati: „ più semplice
„ RFC-822 = Sun, 06 Nov 1994 08:49:37 GMT „ non documentato in nessun RFC
„ RFC-850 = Sunday, 06-Nov-94 08:49:37 GMT „ request: GET URI
„ asctime = Sun Nov 6 08:49:37 1994 „ response: entity-body
„ accettare tutti, generare solo RFC-822
„ sempre GMT, mai l’indicazione del fuso orario

Problemi di HTTP/1.0 Il protocollo HTTP/1.1 (I)


„ progettato per oggetti statici „ RFC-2616
„ dimensione nota a priori „ connessioni persistenti (è il default) e pipelining
„ altrimenti possibile troncamento dei dati „ maggior velocità (più transazioni su stesso canale)
„ impossibile continuare collegamento interrotto „ miglior trasmissione del body
„ progettato per richiedere e ricevere singole pagine: „ negoziazione formato dati e lingua del body
„ ogni oggetto richiede una connessione separata „ frammentazione (chunked encoding) per pagine
„ una connessione TCP per ogni richiesta: dinamiche)
„ TCP setup richiede tempo (3-way handshake) „ trasmissione parziale

„ TCP slow start richiede tempo „ gestione della cache

„ la chiusura del canale fa perdere le informazioni „ modalità specificate dal protocollo


sulla congestione della rete „ proxy gerarchici
„ gestione elementare della cache

Il protocollo HTTP/1.1 (II) HTTP/1.1: virtual host


„ supporto per server virtuali „ con HTTP/1.0 occorreva un indirizzo IP per ogni
„ più server logici associati allo stesso indirizzo IP server web ospitato su un nodo (multihomed)
„ nuovi metodi: „ con HTTP/1.1 non è più necessario:

„ PUT, DELETE, TRACE, OPTIONS, CONNECT „ più server logici associati allo stesso indirizzo IP

„ nuovo metodo di autenticazione (basato su digest) „ ottenibili tramite alias nel DNS (record CNAME)
a livello di trasporto „ il client deve indicare il virtual host desiderato
tramite il suo FQDN (Fully Qualified Domain Name)
„ nuovo header: “Host: FQDN [ : port ]”

© A.Lioy - Politecnico di Torino (2003-09) 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 „ è inefficiente trasmettere un grosso request body
„ il request body costituisce una nuova risorsa da se il server rifiuterà la richiesta senza neanche
memorizzarsi sul server alla URI specificata guardarlo:
„ il request body è una nuova versione da sostituirsi a „ es. utente non autorizzato o metodo non supportato
quella specificata dalla URI „ tipicamente relativo a PUT e POST
„ risposte: 201 (Created), 200 (OK) o 204 (No content) „ il client chiede conferma esplicita prima di
„ esempio: 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 „ identificativo “opaco” da usarsi in alternativa alla
interrotto data di modifica per sapere se una entity è
„ header del server: cambiata
„ Accept-Ranges: none | bytes „ inserito dal server nel response header tramite:
Etag: [ W/ ] “hex_string”
„ Content-Range: bytes start–stop/total
(total=* se dimensione totale ignota) „ 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) „ If-Match (es. aggiornare con PUT una versione
precedente solo se non è già stata modificata)
„ –lastN (gli ultimi lastN byte)
„ If-None-Match (es. fare GET di nuova versione)
„ startByte– (da startByte sino alla fine)

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


Il protocollo HTTP (mar'09)

HTTP/1.1 request header (I) HTTP/1.1 request header (II)


„ Accept: media-range [ ; q=qualityValue ] , … „ Authorization: credenziali
„ formati dati accettabili „ credenziali in risposta ad una richiesta di
„ es. Accept: image/jpeg, image/*;q=0.5 autenticazione da parte dell’origin server
„ Accept-Charset: charset [ ; q=qualityValue ] , … „ Expect: comportamento-atteso , …

„ set di caratteri accettabili „ il server risponde con 417 se non capisce

„ Accept-Encoding: cont-enc [ ; q=qualityValue ] , … „ From: rfc822-address

„ codifiche del contenuto accettabili „ importante soprattutto per contattare chi ha attivato
un robot che crea problemi
„ Accept-Language: language [ ; q=qualityValue ] , …
„ problemi di privacy/spamming
„ lingue accettabili
„ Host: hostname [ : port ]
„ es. Accept-Language: it, en-gb;q=0.8, en;q=0.7
„ virtual host da contattare (porta di default: 80)

HTTP/1.1 request header (III) HTTP/1.1 request header (IV)


„ If-Match: etagValue , … „ If-Unmodified-Since: http-date
„ applicare il metodo solo se la risorsa corrisponde ad „ applicare il metodo solo se la risorsa non è stata
uno dei tag indicati modificata dopo la data indicata
„ If-Modified-Since: http-date „ Max-Forwards: max-num-forwards
„ applicare il metodo solo se la risorsa è stata „ da usarsi con TRACE e OPTIONS per identificare il
modificata dopo la data indicata nodo intermedio che deve rispondere
„ If-None-Match: etagValue , … „ max-num-forwards decrementato da ogni nodo
„ applicare il metodo solo se la risorsa non „ Proxy-Authorization: credenziali
corrisponde ad alcuno dei tag indicati „ credenziali in risposta ad una richiesta di
„ If-Range: etagValue | http-date autenticazione da parte di un proxy
„ inviare tutta la risorsa se è cambiata, altrimenti solo
la porzione indicata (da usarsi con Range: …)

HTTP/1.1 request header (V) HTTP/1.1 response header (I)


„ Range: intervallo „ Accept-Ranges: bytes | none
„ chiede di ricevere solo l’intervallo di dati indicato „ indica se il server permette il download parziale
„ offsetFrom–offsetTo (es. bytes=500–999) „ Age: ageValue
„ –lastBytes (es. bytes=–500) „ indica i secondi trascorsi da quando la risorsa è
„ Referer: absoluteURI | relativeURI stata inserita in cache
„ URI della pagina che ha generato l’attuale richiesta „ ha senso solo in proxy, gateway o server con cache

„ campo assente se URI inserita da tastiera „ ETag: entity-tag

„ TE: [ trailers ] [ transf-enc [ ; q=qualityValue ] ] , … „ un identificativo opaco unico della risorsa richiesta

„ chunk trailers e codifiche di trasferimento accettabili „ Location: absolute-URI

„ User-Agent: nome-prodotto „ effettua un redirect alla URI indicata

„ identifica il software che implementa il client

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


Il protocollo HTTP (mar'09)

HTTP/1.1 response header (II) HTTP/1.1 general header (I)


„ Proxy-Authenticate: sfida „ Cache-Control: req-cache-dir | res-cache-dir , …
„ sfida proposta da un proxy per autenticare il client „ controllo della cache nella richiesta e nella risposta
„ Retry-After: http-date | secondi „ direttive del client e del server verso i proxy
„ in caso di indisponibilità del server „ Connection: close
„ Server: nome-prodotto „ per connessione non persistenti (con server o proxy)
„ identifica il software che implementa il rispondente „ Date: http-date
„ Vary: * | request-header , ... „ data di invio della richiesta o della risposta
„ indica i campi della richiesta da cui dipende la „ Pragma: no-cache
risposta (e quindi la validità di una copia in cache) „ per compatibilità con HTTP/1.0
„ WWW-Authenticate: sfida „ in HTTP/1.1 si preferisce Cache-Control
„ sfida proposta dall’origin server per autenticare il
client

Request-cache-directive (I) Request-cache-directive (II)


„ no-cache „ no-transform
„ voglio una risposta dall’origin server „ ai proxy è vietato effettuare trasformazioni della
„ no-store risorsa (es. alcuni cambiano il formato delle
immagini per risparmiare spazio)
„ non memorizzare (in tutto o in parte) né la richiesta
né la risposta „ only-if-cached

„ max-age=secondi „ non voglio contattare origin server

„ voglio una risposta non più vecchia di X s „ utile con reti sovraccariche

„ 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) Response-cache-directive (II)


„ public „ proxy-revalidate
„ risposta può essere messa in cache (shared/private) „ il proxy / client deve rivalidare con origin server
„ private [ =“header-name, …” ] quando la risorsa in cache diventa stale
„ non mettere in shared cache (tutto o alcuni header) „ max-age=secondi

„ no-cache [ =“header-name, …” ] „ scadenza dei dati

„ non mettere in cache (tutto o alcuni header) „ s-maxage=secondi

„ no-store „ scadenza dei dati in una shared cache

„ non mettere in cache (shared/private) su disco „ ha priorità su max-age (solo per shared cache)

„ no-transform „ nota: max-age e s-maxage hanno priorità su un


eventuale header Expires: della risorsa
„ must-revalidate
„ il proxy / client deve rivalidare con origin server
quando la risorsa in cache diventa stale

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


Il protocollo HTTP (mar'09)

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


„ Trailer: header-name , … „ Upgrade: protocollo, …
„ gli header indicati sono in coda al body chunked „ il client propone di passare ad un protocollo
„ non possono essere Transfer-Encoding, Content- “migliore” (a giudizio del server tra quelli elencati)
Length e Trailer „ Via: protocol nodo [ commento ] , …
„ Transfer-Encoding: codifica-di-trasferimento „ 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 (mar'09)

Possibili metodi per gestire lo stato Perché gestire lo stato in HTTP?


„ a livello di applicazione: „ gestire lo stato senza modificare le URL
„ tramite URL speciali generate dinamicamente „ gli utenti possono scambiarsi le URL tra loro (senza
„ es. www.x.com/basket/12ab34/ per questo scambiarsi lo stato)
„ tramite campi “nascosti” (type=hidden) di un form „ non si “sporcano” le cache intermedie con

„ passati in modo invisibile (metodo POST) „ dati uguali ma corrispondenti ad URL diverse

„ passati in modo visibile (metodo GET) „ pagine diverse ma corrispondenti ad URL uguali

– es. www.x.com/basket?id=12ab34 „ minimizzare l’impatto sulla configurazione del


server e dell’applicazione
„ a livello di protocollo di trasporto:
„ associare l’utente allo stato anche se è anonimo
„ cookie in HTTP (es. non passa da portale di autenticazione)
„ v1 in HTTP/1.0 „ salvare lo stato in memoria permanente
„ v2 (+ v1) in HTTP/1.1 „ permane tra reboot, start/stop di UA, cambio di IP

I 4 comandamenti dei cookie Cookie


„ è lecito mantenere traccia dello stato di una „ scopo: memorizzare informazioni da parte del
sessione HTTP se … server in locale sul client in cui “gira” il browser
„ 1) l’utente ne è conscio e consenziente „ in questo modo si alleggerisce il server
„ 2) l’utente può cancellare lo stato quando vuole „ ... ma si introducono elementi di:
„ 3) le informazioni di stato non sono fornite a terzi „ aleatorietà (=UA che non supporta/accetta cookie)
senza il consenso esplicito dell’utente „ rischio (=cookie manipolati sul client o in rete)
„ 4) le informazioni di stato non contengono dati
sensibili e non posso essere usate per ottenere dati
1. store the cookie!
sensibili

2. stored

3. here is the cookie!

Definizione dei cookie Caratteristiche dei cookie


„ inizialmente definito da Netscape: „ dati di piccole dimensioni registrati sul client
„ “Persistent client state – HTTP cookies” (persistent information) e inviati al server
„ diventato poi standard IETF: „ cookie creati dal server sul client tramite header:

„ “HTTP state management mechanism”: „ Set-Cookie: ... (v1)

„ v1 = RFC-2109 „ Set-Cookie2: ... (v2)

„ v2 = RFC-2695 „ cookie trasmessi dal client al server tramite header:

„ le specifiche Netscape e v1 sono obsolete ma „ Cookie: ...


ancora usate „ i cookie sono nel formato nome=valore
„ RFC-2964 “Use of HTTP state management” „ salvati localmente dal browser (in un file)
contiene avvertenze su problemi / pericoli dei „ dati comunicati al server ai successivi accessi
cookie
„ usati per creare un collegamento tra richieste HTTP
diverse verso lo stesso server

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


Il protocollo HTTP (mar'09)

Supporto dei cookie nei browser Limiti dei cookie


„ Netscape Navigator „ limitazioni a riguardo del numero di cookie che
„ dalla versione 2.0 possono essere memorizzati
„ registrati nel file cookies.txt in (default in „ su un client:
Netscape\Users\username) „ max 300 cookie
„ Microsoft IE „ max 4 KB per cookie
„ dalla versione 3.0 „ totale = 1.2 MB max
„ registrati in \Windows\Cookies o nel profilo utente „ su un server:
\Documents and Settings\username\Cookies „ max 20 cookie / client
„ max 4 KB per cookie
„ totale = 80 KB max / client

Trasmissione dei cookie (v1): S > C Cookie: valore, scadenza, secure


„ cookie inserito nell’header della risposta HTTP „ il nome del cookie ed il relativo valore sono
„ sintassi del cookie: stringhe qualsiasi:
„ prive di virgola, punto-e-virgola e spazio

Set-Cookie: „ tali caratteri devono essere espressi in esadecimale


(%2C, %3B, %20)
cookieName=cookieValue
„ EXPIRES: data di scadenza dopo la quale il cookie
[ ; EXPIRES=dateValue ] può essere eliminato dal client
[ ; DOMAIN=domainName ] „ formato rfc-822 Wdy, DD Mon YY HH:MM:SS GMT
[ ; PATH=pathName ] „ se non viene specificata una scadenza, il cookie
[ ; SECURE ] scade alla chiusura del browser
„ SECURE: cookie trasmesso solo su canale HTTPS

Cookie: dominio, path Trasmissione di un cookie (V1): C > S


„ DOMAIN indica il dominio autorizzato a gestire il „ quando il browser sta per effettuare accesso ad
cookie (ad es. polito.it) una URL, controlla se esistono cookie associati al
„ soltanto le richieste effettuate a tale dominio dominio e al percorso
provocano la trasmissione del cookie „ in caso affermativo include nell’header HTTP della
„ se il dominio non è specificato, il browser usa il richiesta tutte le coppie nome/valore dei relativi
nome del server che ha mandato il cookie cookie
„ PATH indica il percorso in cui si è autorizzati a „ se l’URL specificata nella richiesta HTTP è quella di
usare il cookie (ad es. /didattica/ ) un CGI, esso troverà tale stringa nella variabile
d’ambiente HTTP_COOKIE
„ soltanto le richieste a URL in tale percorso potranno
provocare la trasmissione del cookie
„ se il path non è specificato, il browser usa quello
Cookie: nome1=valore1; nome2=valore2; ...
della URL che ha scatenato l'invio del cookie

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


Il protocollo HTTP (mar'09)

Esempio (passo 1) Esempio (passo 2)


„ cookie usato per gestire la lista dei libri selezionati „ quando il client accede ad una URL nel percorso
da un utente che accede ad un negozio virtuale /cgi/bin invia al server un header che contiene:
„ il client accede al server e riceve: „ Cookie: customer=john_smith
„ il client riceve come risposta:
„ Set-Cookie: part_number=book1; path=/cgi/bin ; ...
Set-Cookie:
„ il client richiede una URL nel percorso /cgi/bin e
customer=john_smith;
manda:
expires=Sat, 28-Aug-99 00:00:00 GMT;
path=/cgi/bin/; „ Cookie: customer=john_smith; part_number=book1

domain=books.virtualShopping.com;
secure

Esempio (passo 3) Problemi dei cookie


„ il client riceve: „ il meccanismo basato su cookie permette di creare
„ Set-Cookie: shipping=fedex; path=/cgi/bin/deliver; ... profili degli utenti
„ il client accede ad una URL nel percorso „ user tracking = termine usato per indicare la
/cgi/bin/deliver e manda: possibilità di tracciare i siti visitati da un utente e
quindi le sue abitudini e i suoi interessi
„ Cookie: customer=john_smith; part_number=book1;
shipping=fedex „ 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

Problemi dei cookie Trasmissione dei cookie (v2): S > C


„ autenticazione tramite cookie (es. siti commerciali „ nuova sintassi (v2) specificata in RFC-2965
che associano l’utente al carrello virtuale, one-click „ uno o più cookie (lista separata da virgole)
order) è fortemente sconsigliata:
„ lettura dei cookie durante la trasmissione e sul client
Set-Cookie2: cookieName=cookieValue
„ attacchi che permettono di intercettare i cookie: [ ; Comment=commentText ]
„ packet sniffing [ ; CommentURL="URL" ]
[ ; Discard ]
„ web spoofing
[ ; Domain=domainName ]
„ attacchi al client (virus, worm, javascript, ...) [ ; Max-Age=dateValue ]
„ sub-domain attack (quale parte del dominio è [ ; Path=pathName ]
responsabile del servizio web che usa il cookie?) [ ; Port="comma-separated-port-list" ]
[ ; Secure ]
[ ; Version=versionNumber ]

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

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 (mime - apr'09)

Che cosa è MIME?


„ Multipurpose Internet Mail Extensions
IlIl formato
formato MIME
MIME „ un formato dati per trasmettere informazioni in
Internet
„ inizialmente pensato per superare alcuni limiti della
posta elettronica (RFC-821/822):
Antonio Lioy
„ canale a 7 bit
< lioy @ polito.it>
„ caratteri US-ASCII
„ righe inferiori a 1000 caratteri
Politecnico di Torino „ oggi usato per trasmettere / identificare dati in molti
Dip. Automatica e Informatica altri contesti, con caso più importante il web

Definizione base di MIME Estensioni di MIME


„ RFC-2045 “MIME part one: format of Internet „ RFC-2183 “Communicating presentation
message bodies” information in Internet messages: the Content-
„ RFC-2046 “MIME part two: media types” Disposition header field”
„ RFC-2047 “MIME part three: message header „ RFC-2231 “MIME parameter value and encoded
extensions for non-ASCII text” word extensions: character sets, languages, and
continuations”
„ RFC-2048 “MIME part four: registration
procedures” „ RFC-2557 “MIME encapsulation of aggregate
documents, such as HTML (MHTML)”
„ RFC-2049 “MIME part five: conformance criteria
and examples” „ RFC-3023 “XML media types”
„ RFC-3676 “The Text/Plain format and DelSp
parameters”
„ RFC-3798 “Message disposition notification”

Header MIME (I) Header MIME (II)


„ Mime-Version: 1.0 „ Content-Id:
„ Content-Type: tipo/sottotipo ; parametri „ identificativo dei dati generato dal mittente
„ text, application, audio, image, message, model, „ opzionale e poco usato
video, multipart „ Content-Description:
„ con sottotipo (es. image/gif) „ descrizione testuale dei dati generata dal mittente
„ parametri opzionali (es. name=bb.gif) „ opzionale e poco usato
„ parametri spesso nella forma “nome = valore” „ Content-Disposition: disposizione ; parametri
„ Content-Transfer-Encoding: „ disposizione: inline, attachment
„ non codificati: 7bit, 8bit, binary „ filename=
„ codificati: base64, quoted-printable „ creation-date= , modification-date= , read-date=
„ size=

© Antonio Lioy - Politecnico di Torino (2003-2009) 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


--0107040803040507
Content-Type: application/x-zip-compressed; name="tesi.zip"
From: Antonio Lioy <lioy@polito.it> Content-Transfer-Encoding: base64
To: Antonio Lioy <lioy@polito.it> Content-Disposition: inline; filename="tesi.zip"
MIME-Version: 1.0
Subject: test di MIME dwIAAEQFAAAIAAAAdGVzaS50eHRtVMuO1DAQvEfK/as453ggfff
Content-Type: multipart/mixed; boundary="0107040803040507" . . .
kudHh0UEsFBgAAAAABAAEANgAAAJ0CAAAAAA==
This is a multi-part message in MIME format. --0107040803040507
Content-Type: application/vnd.ms-excel; name="voti.xls"
--0107040803040507 Content-Transfer-Encoding: base64
Content-Type: text/plain; charset=ISO-8859-1; format=flowed Content-Disposition: inline; filename="voti.xls"
Content-Transfer-Encoding: quoted-printable
0M8R4KGxGuEAAAAAAAAAAAAAAAAAAAAAPgADAP7/CFaggTTTTT
Questa =E8 la parte di testo. . . .
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) „ metodo più diffuso per creare applicativi distribuiti
„ … interagenti tramite un ben definito paradigma di „ client e server sono due processi separati:
comunicazione (o connettori) „ il server fornisce un generico servizio
„ nota: non è detto che la comunicazione sia „ il client richiede il servizio
effettuata via rete (es. IPC sullo stesso nodo)
„ 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 (progdis - feb'09)

Il server Il client
„ idealmente è in esecuzione ‘‘da sempre’’: „ attivato su richiesta di un ‘‘utente’’
„ attivato al boot „ invia richiesta verso un server
„ attivato esplicitamente dal sistemista „ attende la risposta su una porta allocata
„ accetta richieste da uno o più punti: dinamicamente (non può essere una porta fissa
perché ci possono essere molti “utenti” che
„ porta TCP o UDP (analogo al concetto di SAP OSI) operano simultaneamente, es. due finestre di un
„ porte fisse e solitamente predeterminate browser web)
„ manda risposte relative al servizio „ esegue un numero finito di richieste e poi termina
„ idealmente non termina mai:
„ allo shutdown
„ azione esplicita del sistemista

Architetture Architettura client-server (C/S)


„ usando i concetti di client e server si possono „ architettura in cui processi client richiedono i
costruire svariate architetture servizi offerti da processi server
„ vantaggi:
„ architettura client-server (C/S) „ semplicità di realizzazione
„ architettura asimmetrica „ semplificazione del client
„ il posizionamento del server è determinato a priori „ svantaggi:
„ sovraccarico del server
„ architettura peer-to-peer (P2P) „ sovraccarico del canale di comunicazione
„ architettura simmetrica
richiesta
„ ogni nodo può ricoprire il ruolo di client e di server client server
(simultaneamente o in tempi diversi) servizio

Architettura C/S 2-tier C/S 2-tier: client pesante o leggero?


„ è il C/S classico, originale (es. NFS) „ tre componenti (UI, logica applicativa, dati) … da
„ il client interagisce direttamente con il server distribuire su due soli elementi (client e server)
senza passaggi intermedi „ soluzione 1 = fat client / thin server
„ architettura tipicamente distribuita su scala sia „ client = UI + logica applicativa
locale sia geografica „ server = dati
„ usata in ambienti di piccole dimensioni (50-100 „ schema tradizionale, difficoltà di sviluppo (sw ad-
client simultanei) hoc) e gestione (installazione, aggiornamento),
„ svantaggi minor sicurezza
„ bassa scalabilità (es. al crescere del numero di „ soluzione 2 = thin client / fat server:
utenti, decrescono le prestazioni del server) „ client = UI
„ server = logica applicativa + dati
„ (es. il web) pesante sui server, maggior sicurezza

© A.Lioy - Politecnico di Torino (2003-09) 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 „ per migliorare le prestazioni (di calcolo):
server, per svolgere vari ruoli: „ agente = load balancer
„ filtro (es. adatta un sistema legacy su mainframe a „ server = server farm di server omogenei o
un ambiente C-S) equivalenti
„ bilanciamento del carico di lavoro sul/i server (es.
transaction monitor per limitare il numero di
richieste simultanee) „ per adattare il server alle capacità del client:
„ servizi intelligenti (es. distribuire una richiesta su più „ agente = mediatore / broker
server, collezionare i risultati e restituirli al client „ server = insieme di server eterogenei / non
come risposta singola) 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 „ collaborative computing
autonomi di servizi „ comunità di rete per compiti distribuiti
„ per condividere risorse e sfruttare servizi (es. grid computing; aperto o chiuso; anche per dati
collaborativi riservati o elaborazioni con deadline fissa?)
„ si sfruttano meglio le capacità di calcolo dei singoli „ edge service
nodi (così si scaricano i server) „ servizi ortogonali come “fattori abilitanti” per la
„ si usano meglio le reti, con comunicazioni dirette creazione di comunità P2P (es. TOIP, Internet fax)
tra i nodi (così si evitano congestioni sui link verso „ file sharing
i server)
„ 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 „ ad ogni pagina web corrisponde un file HTML
„ … finché l’autore non la cambia esplicitamente „ (+) massima efficienza (basso carico di CPU)
„ il contenuto della pagina: „ (+) possibilità di fare caching delle pagine:
„ non dipende dall’interazione con l’utente „ in RAM (sul server) o su disco (sul client o proxy)
„ non dipende dalle informazioni inviate al server dal „ sul server
client „ sul client
„ non dipende dall’istante di tempo in cui viene „ sui proxy
richiesta
„ (+) pagine indicizzabili dai motori di ricerca
„ pagina implementata in HTML / CSS
„ (–) 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 (mar'09)

Web statico con pagine dinamiche Pagine dinamiche: pro e contro


„ pagina varia il suo contenuto in relazione „ presentazione del contenuto variabile
all’interazione con l’utente „ (+) efficiente (basso carico di CPU sul server)
„ es. menù a tendina che appare quando il mouse „ (–) inefficiente (medio-alto carico di CPU sul client,
transita su una particolare area specie per gli applet)
„ si parla genericamente di DHTML: „ (~) possibilità di fare caching delle pagine
„ HTML 4.0 o superiore „ (~) pagine indicizzabili dai motori di ricerca (ma
„ CSS (Cascaded Style Sheet) solo i dati statici …)
„ linguaggio di script lato client „ (–) staticità dei dati
„ ECMA 262 (EcmaScript Edition 3) implementato „ (–) funzionalità dipende dalla capacità del client
come JavaScript o JScript (linguaggi di scripting, tipi di applet, CPU, RAM, …)
„ VBScript (solo per IE 4.0 o superiore)

Pagine dinamiche: applet Modello delle prestazioni nel web statico


„ due tipi di applet: con pagine dinamiche
„ applet Java (richiede una JVM sul browser) „ nessuna differenza con web statico per la parte di
„ controllo ActiveX (richiede IE + Wintel) rete e lato server
„ problemi: „ maggior carico computazionale e di memoria lato
client:
„ compatibilità (quale versione del linguaggio o della
JVM?) „ dipende dalla tecnologia dinamica scelta

„ carico (richiedono esecuzione) „ carico crescente per

„ sicurezza (esecuzione di un programma vero e „ CSS


proprio): „ script lato client
„ applet Java esegue in una “sandbox” „ applet
„ activeX installa una DLL (!)

Client-side scripting Client-side scripting: a cosa serve ?


„ HTML è un linguaggio di descrizione di pagine „ inserire dinamicamente degli elementi nella pagina
„ unica interattività possibile è seguire i link HTML
„ aggiunta di interattività alla pagina HTML tramite „ una funzione scritta in un linguaggio di scripting
codice da interpretarsi sul client (nel browser): può venire associata ad un evento scatenato
dall’interazione con la pagina:
„ NS e SUN inventano il linguaggio LiveWire, poi
chiamato JavaScript (ma non è un subset di Java!) „ es. il click su una figura

„ MS inventa VBScript (subset di VBA) e poi JScript „ es. l’invio di un form

„ accordo per fondere JavaScript e JScript in „ eseguire del codice in seguito ad un evento
ECMAScript: „ validazione dei dati immessi in un form prima di
„ standard ECMA-262 inviarli al server
„ da tutti chiamato JavaScript (versione 1.3) „ si risparmia traffico inutile sulla rete e si
semplifica la logica dell’applicazione server-side
18

© A.Lioy - Politecnico di Torino (2003-09) 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


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

applicazione CGI
(eseguibile o script da interpretare)

CGI: contro CGI: contro (II)


„ ogni chiamata richiede l’attivazione di un processo: „ mancano meccanismi per la condivisione di risorse
„ elevato costo di inizializzazione tra programmi CGI
„ elevata latenza „ ogni accesso ad una risorsa richiede “apertura” e
“chiusura” della risorsa
„ creazione / distruzione di molti processi
„ non esistono i concetti di sessione né di transazione
„ occupazione di memoria proporzionale al numero
di processi simultaneamente attivi „ l’interfaccia grafica dell’applicazione web (ossia i
tag HTML) è annegata nel codice
„ difficoltà di comunicazione tra server web ed
applicazione (spazi di memoria differenti) „ 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 „ tre modalità per trasmettere i dati dei form:
server web ed applicazione „ standard input (quando si usa POST o PUT)
„ inclusione di uno o più interpreti nel web server: „ URL modificata (quando si usa GET):
„ (+) miglior velocità di attivazione „ URL originale del CGI seguita da ‘?’ ed elenco
„ (+) miglior comunicazione con l’applicazione dei dati separati da ‘&’
„ (+) minor occupazione di memoria „ la variabile di ambiente QUERY_STRING
„ (-) maggior dimensione del server contiene la parte di URL dopo ‘?’
„ pre-attivazione dell’applicazione (in N copie) ed „ linea di comando (quando si usa ISINDEX)
inclusione nel server di un modulo specifico per „ altre informazioni passate all’applicazione tramite
scegliere una copia libera e comunicare con essa variabili di ambiente (es. REMOTE_ADDR,
„ FastCGI 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 „ libreria ANSI C per programmare CGI
„ http://security.polito.it/~lioy/cgi.htm (guardare la „ http://www.boutell.com/cgic/
differenza tra GET e POST) „ 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 (mar'09)

Libwww Server-side scripting


„ libreria C per scrivere client HTTP+HTML „ tecnologie differenti, ma caratterizzate da avere nel
„ usata anche per scrivere robot file della pagina codice di scripting mescolato con
il template HTML + client-side scripting
„ http://www.w3.org/Library/
„ 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

Server-side scripting (2) SSI (Server Side Include)


„ JSP (Sun), tecnologia ibrida „ introduce direttive nel codice HTML sotto forma di
„ il codice è annegato nel template HTML (come per commento
le altre tecnologia altri script server-side) „ se SSI non è supportato dal server web, le direttive
„ il codice è costituito da sono ignorate
„ scripting elements (come altri linguaggi server- „ se SSI è supportato, nella pagina HTML restituita al
side) client le direttive sono sostituite con il testo risultato
della elaborazione
„ direttive
„ aggiunge nuove variabili di environment
„ azioni (tag proprietari XML & NS like)
„ non sostituisce CGI/ASP/..., ma introduce la
„ le pagine vengono tradotte in servlet dal server Web possibilità di aggiungere dinamismo alle pagine
HTML effettuando semplici operazioni

<!--#command tag1=value1 tag2=value2 ... -->

SSI (2) Variabili di environment SSI


„ su IIS le pagine che contengono direttive SSI „ DOCUMENT_NAME: il nome del file corrente
devono avere estensione “.shtm” o “.shtml” „ DOCUMENT_URI: il percorso virtuale a questo
„ è possibile configurare opportunamente i server documento (come /docs/tutorials/foo.shtml)
web in modo da elaborare le direttive SSI anche per „ QUERY_STRING_UNESCAPED: versione della
le pagine con estensioni “.htm” o “.html” stringa di ricerca inviata dal client, con tutti i
„ server web caratteri speciali di shell, preceduti da ‘\’
„ Apache supporta SSI (e XSSI dalla versione 1.2) „ DATE_LOCAL: data corrente, fuso orario locale;
„ IIS supporta solo la direttiva #include di SSI
soggetto al param. timefmt nel comando config
„ deve essere inserita nella parte di HTML „ DATE_GMT: analogo a DATE_LOCAL, ma relativo
al meridiano di Greenwich
„ non può essere prodotta da codice ASP
„ LAST_MODIFIED: l’ultima data di modifica del
„ in IIS le altre funzionalità di SSI sono ottenibili documento corrente; come altri soggetto a
con oggetti ASP timefmt

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


Programmazione in ambiente web (mar'09)

Direttive SSI Direttive SSI (2)


„ #config: permette di impostare alcuni parametri „ #echo: restituisce il contenuto della variabile (tag:
„ errmsg: messaggio da restituire nel caso di errore var) di environment passata come parametro
nel parsing delle direttive SSI <!--#echo var="NOME_VARIABILE_ENV" -->
„ timefmt: il formato della data e dell’ora; stringa di „ #exec: esegue un comando di shell o uno script
definizione come quella della funzione di sistema CGI il cui nome è passato come parametro e
Unix strftime( ) restituisce il relativo output, tag supportati:
„ sizefmt: il formato della dimensione di file „ cmd: comando di shell (Unix: /bin/sh, Win32:
„ bytes: espresso in byte cmd.exe) indicato dalla stringa
„ abbrev: formato abbreviato (KB o MB) „ cgi: script CGI indicato dalla stringa (path virtuale);
nessuna elab. se non la convers. da URL a tag <A>
<!--#config errmsg="MSG_ERRORE" -->
<!--#exec cmd="PATH_SHELL_SCRIPT" -->
<!--#config timefmt="STRINGA_DI_FORM" -->
<!--#exec cgi="VIRT_PATH_CGI_SCRIPT" -->
<!--#config sizefmt="bytes" -->

Direttive SSI (3) Direttive SSI (4)


„ #flastmod: restituisce data e ora dell’ultima „ #include: inserisce il contenuto di un file nella
modifica di un file (tag: file) il cui nome è passato pagina restituita al client; il nome del file è passato
come parametro come parametro; tag supportati:
<!--#flastmod file="NOME_FILE" --> „ virtual: path virtuale (no accesso a CGI script)
„ #fsize: restituisce la dimensione di un file il cui „ file: path relativo fisico a partire dalla directory
nome è passato come parametro; il formato è corrente (no path assoluti, no uso di ‘../’)
modificabile da sizefmt; tag supportati:
<!--#include virtual="VIRT_PATH_NOM_FILE" -->
„ virtual: path virtuale (no accesso a CGI script)
<!--#include file="REL_PATH_NOME_FILE" -->
„ file: path relativo fisico a partire dalla directory
corrente (no path assoluti, no uso di ‘../’)
„ attenzione! il file incluso non può contenere direttive
<!--#fsize virtual="VIRT_PATH_NOME_FIL" --> SSI
<!--#fsize file="REL_PATH_NOME_FILE" -->

Esempi SSI Esempi SSI


„ restituisce la data ed ora locale „ inserisce data ed ora locale in forma standard:
<!--#echo var="DATE_LOCAL" --> <!--#echo var="DATE_LOCAL" -->
„ restituisce la data ed ora locale formattati in modo „ inserisce data ed ora locale in forma non standard:
differente <!--#config timefmt="%A %B %d, %Y" -->
<!--#config timefmt="%A %B %d, %Y" --> <!--#echo var="DATE_LOCAL" -->
<!--#echo var="DATE_LOCAL" -->
„ esegue un comando di sistema (il testo <DIR>
„ esegue un’ipotetico script che restituisce il numero contenuto nell’output del comando dir può
di accessi alla pagina provocare una errata formattazione da parte del
browser)
<!--#exec virtual="/cgi-bin/counter" -->
<!--#exec cmd="ls" -->
<!--#exec cmd="dir" -->

© A.Lioy - Politecnico di Torino (2003-09) 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 (regexp - apr09)

Le espressioni regolari
Espressioni
Espressioni regolari
regolari in
in Javascript
Javascript „ definiscono un lessico = insieme di “parole” lecite
(RegExp)
(RegExp) „ … specificando
„ i caratteri
„ alfabetici (A,a)
„ numerici (1,2, ...)
Antonio Lioy
„ segni di interpunzione (. : , ; ...)
< lioy @ polito.it >
„ le sequenze ammissibili
Politecnico di Torino „ es. “una sequenza di uno o più caratteri A”
Dip. Automatica e Informatica „ … con un formalismo “compatto” (metacaratteri)
„ es. A+ => le sequenze A, AA, AAA, AAAA, ...

(estensione di materiale preparato da Andrea S. Atzeni)

Un po’ di storia Insiemi di caratteri


„ termine coniato dal matematico S. Kleene (‘50) „ […] per includere uno qualsiasi dei caratteri in
„ sviluppato all'interno della teoria dei linguaggi parentesi
„ stessa potenza espressiva di macchine a stati „ possibile specificare singoli caratteri o intervalli di
deterministiche caratteri adiacenti (es. A-Z per indicare tutte le
lettere alfabetiche maiuscole)
„ molto usate in ambiente Unix
„ es. [a-zABC] riconosce una qualsiasi lettera
„ utilizzi tipici: alfabeticaminuscola oppure A, B, o C
„ formulazione di potenti ricerche testuali (es. grep) „ [^…] per escludere uno qualsiasi dei caratteri in
„ automazione di editing testuale (es. sed) parentesi
„ es. [^0-9] riconosce qualsiasi carattere non numerico

Metacaratteri Metacaratteri (cont)


„ \ (cosiddetto “escape”) per „ | (or logico) per esprimere un’alternativa tra due
„ segnalare sequenze speciali espressioni
„ considerare caratteri speciali come caratteri normali „ sintassi: regexp1 | regexp2

„ es. \[ cerca il carattere [ „ es. "A|B" riconosce sia il carattere A sia il carattere B

„ simboli speciali per identificare un carattere … „ . indica un carattere qualsiasi

„ \d = numerico, ossia [0-9] „ es. "R.E" riconosce una stringa di tre caratteri che
inizi con R e termini con E, quali "RaE", "RAE" o
„ \D = non numerico, ossia [^0-9] "RiE"
„ \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) 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 > „ inserimento di un middleware (il database driver)
tra applicativo e DBMS
„ usa SQL come linguaggio di manipolazione ed
Politecnico di Torino accesso ai dati
Dip. Automatica e Informatica
„ 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


operazione non riuscita col un provider
„ rappresenta un parametro associato ad un oggetto
command (es. parametri per stored procedure) „ Parameters collection
„ contiene tutti gli oggetti Parameter di un command
ADO 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 „ aggiunta di un record
(default) one pass through a RS is needed.
Like a dynamic cursor, except that you // se la tabella non e' già accessibile ...
can't see records that other users add, objRS.Open("utenti", conString,
adOpenKeyset although records that other users delete adOpenDynamic, adLockPessimistic);
are inaccessible from your RS. Data // aggiunta del record
changes by other users are still visible. objRS.AddNew();
Additions, changes, and deletions by objRS("Nome") = "Alberto";
adOpenDynamic other users are visible, and all types of objRS("Cognome") = "Rossi";
movement through the RS are allowed. objRS.Update();
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. 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 „ si tiene impegnato un host in modo che non possa
authentication ( simple / mutual )
( semplice / mutua )
fornire i suoi servizi
autenticazione della
controparte
peer authentication „ esempi:
autenticazione dei dati data / origin authentication „ 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 (mag'09)

PCI DSS Requisiti PCI DSS (I)


„ Payment Card Industry Data Security Standard „ costruire e mantenere una rete protetta:
„ oggi richiesto da tutte le carte di credito per „ R1 = installare e mantenere una configurazione
transazioni Internet con firewall per proteggere i dati dei titolari delle
„ molto più prescrittivo rispetto ad altre norme di carte
sicurezza (es. HIPAA = Health Insurance Portability „ R2 = non usare password di sistema predefinite o
and Accountability Act) altri parametri di sicurezza impostati dai fornitori
„ https://www.pcisecuritystandards.org „ 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 (II) Requisiti PCI DSS (III)


„ rispettare un programma per la gestione delle „ monitorare e testare le reti con regolarità
vulnerabilità „ R10 = monitorare e tenere traccia di tutti gli accessi
„ R5 = usare e aggiornare con regolarità l’antivirus effettuati alle risorse della rete e ai dati dei titolari
„ R6 = sviluppare e mantenere applicazioni e sistemi delle carte
protetti „ R11 = eseguire test periodici dei processi e dei
„ implementare misure forti per il controllo accessi sistemi di protezione
„ R7 = limitare l’accesso ai dati dei titolari delle carte „ adottare una Politica di Sicurezza
solo se effettivamente indispensabili per lo „ R12 = adottare una Politica di Sicurezza
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 E per finire ...


„ B.Schneier: “Applied cryptography” „ se vi interessa la sicurezza e la protezione dei
„ W.Stallings: “Cryptography and network security” sistemi informativi ...
anche in italiano: „ ... allora nella laurea specialistica tra i moduli a
“Sicurezza delle reti - applicazioni e standard” scelta inserite TIGR
Addison-Wesley Italia, 2001
„ Fugini, Maio, Plebani
“Sicurezza dei sistemi informativi”, Apogeo, 2001 Tecnologie dell'Informazione
„ C.P.Pfleeger, S.Pfleeger: “Security in computing” e Gestione dei Rischi
anche in italiano:
“Sicurezza in informatica”, Pearson Education

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