World Wide Web (WWW) Programmazione in ambiente web

Programmazione in ambiente web (apr'18)

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

Programmazionein ambiente web

Antonio Lioy

< [email protected] >

Politecnico di Torino

Dip. Automatica e Informatica

World Wide Web (WWW) anche abbreviato semplicemente“web”

insieme di:

protocolli di comunicazione

formati dati

appoggiato su canali TCP/IP

IP

TCP

HTTP FTP

HTML

CSSJS

XHTML

PNG

protocolli

dati

Protocolli per il web usabili molti protocolli già esistenti (es. FTP)

limitazioni / complicazioni perché non pensati per il web

definito un nuovo protocollo applicativo:

HTTP

le funzionalità ottenibili sono dettate dal protocollo applicativo (es. con FTP solo GET e PUT di file)

Il web statico

paginaHTMLbrowser

webserverweb

0. canale HTTP

1. richiesta pagina

2. lettura pagina da disco

4. invio pagina HTML

3. pagina HTML

5. interpretazione HTML

Web statico pagina web non varia mai il suo contenuto

… finché l’autore non la cambia esplicitamente

il contenuto della pagina:

non dipende dall’interazione con l’utente

non dipende dalle informazioni inviate al server dal client

non dipende dall’istante di tempo o dal luogo (del browser) in cui viene richiesta

pagina implementata in HTML / CSS

Il web statico: pro e contro ad ogni pagina web corrisponde un file HTML

(+) massima efficienza (basso carico di CPU)

(+) possibilità di fare caching delle pagine:

in RAM (sul server) o su disco (sul client o proxy)

sul server

sul client

sui proxy

(+) pagine indicizzabili dai motori di ricerca

(–) staticità dei dati

(–) nessuna adattabilità ai client ed alle loro capacità



Richiesta di una pagina statica

http:// security.polito.it /~lioy/01nbe/

http://security.polito.it/~lioy/01nbe/

130.192.1.880 / tcp

DNS

/u/lioy/public_html/01nbe/index.html

file system

URI rewritingweb server

Modello delle prestazioni nel web statico

UA

rete

HTTP srv

disco

HTTP request

transmissionURI parsing +

channel set-up

HTML interpretation

+ display

HTTP response

transmission

retrievingHTML page

user think time

requestanalysis

responsecreation

t

Agent, server, proxy e gateway User Agent = browser (ma anche spider, robot, …)

Origin Server = fornitore del servizio desiderato

possibile avere elementi intermedi tra UA ed OS che fungono sia da client sia da server:

gateway

interfaccia pubblica per server

es. per sicurezza o load balancing

proxy (delegato)

lavora per conto dei client

inoltra la domanda al server o risponde lui stessotramite una cache

anche per autenticazione / autorizzazione

LAN / Intranet / ISP(client)

LAN / Intranet / ISP(server)

Proxy e gateway – schema

useragent

originserver

proxy gateway

cacheshared

generale

RAM

cacheshared

dedicata

cacheprivata

generale

Internet

cacheshared

dedicata

Proxy cache solo per le pagine statiche

funzionamento:

trasparente = non altera la richiesta (tranne per le parti obbligatorie)

non trasparente = riscrive la richiesta (es. anonymizer)

configurazione su UA:

esplicita (richiede intervento sul client)

implicita (richiede intelligenza nella rete)

possibili gerarchie di proxy (es. POLITO, IT, EU)

spesso usato da ISP (o aziende) per migliorare la velocità di navigazione dei client

Configurazione del proxy sull'UA configurazione manuale

unico proxy, con eccezioni (collegamento diretto per alcuni indirizzi)

configurazione automatica

attraverso un file PAC (Proxy Auto-Configuration) fornito da uno specifico server

configurazione attraverso scoperta automatica

Web Proxy Autodiscovery Protocol (WPAD)

nota: i primi due casi richiedono intervento manuale sull'UA mentre il terzo è automatico … ma può fallire



FX-15 proxy configurationTools

> Options> Advanced> Network> Connection> Settings …

IE-8 proxyTools > Internet Options > Connections > LAN settings

Il formato PAC (I) PAC = Proxy Auto-Configuration

inventato da Netscape nel 1996 per NS 2.0

nome standard:

proxy.pac (fornito da server)

wpad.dat (ottenuto tramite protocollo WPAD)

MIME-type:

application/x-ns-proxy-autoconfig (NS)

application/x-javascript-config (recente)

il file PAC contiene una funzione JS

FindProxyForURL(url, host)

restituisce una stringa con l'elenco dei proxy

Il formato PAC (II) componenti della risposta:

DIRECT

collegamento diretto, senza alcun proxy

PROXY host : port

usare il proxy indicato

SOCKS host : port

usare il server SOCKS indicato

"host" può essere specificato come indirizzo o nome (pericolo! chiamata al DNS)

componenti separati da ";" ed usati secondo il principio "first-match"

"PROXY p1.polito.it; PROXY p2.polito.it; DIRECT"

Il formato PAC (III) funzioni predefinite per condizioni nella risposta

condizioni su hostname

isPlainHostName( ), dnsDomainIs( ), localHostOrDomainIs( ), isResolvable( ),isInNet( )

funzioni ausiliarie informative:

dnsResolve( ), myIpAddress( ), dnsDomainLevels( )

condizioni su URL/hostname (con espr. regolari):

shExpMatch( )

condizioni su data/ora:

weekdayRange( ), dateRange( ), timeRange( )

PAC – esempio 1 non serve il proxy per contattare i server interni

per i server esterni il proxy è usato per efficienza (cache) ma se è sovraccarico o guasto si può accedere direttamente all'esterno … oppure no

function FindProxyForURL (url, host) {if (isPlainHostName(host) ||

dnsDomainIs(host, ".polito.it"))return "DIRECT"

elsereturn "PROXY proxy.polito.it:8080; DIRECT"

}

... return "PROXY p1.polito.it:8080; " +"PROXY p2.polito.it:9000"



PAC – esempio 2 non serve il proxy per contattare i server interni

proxy obbligatorio per i server esterni: due diversi (load balancing) più un terzo in caso di guasto

function FindProxyForURL (url, host) {if (isPlainHostName(host) ||

dnsDomainIs(host, ".polito.it"))return "DIRECT"

fallback = "; PROXY p3.polito.it:9000"if (shExpMatch(host, "*.it")) // dominio .ITreturn "PROXY p1.polito.it:8080" + fallback

else // dominio non .ITreturn "PROXY p2.polito.it:8080" + fallback

}

WPAD Web Proxy Autodiscovery Protocol

implementato da tutti i maggiori browser

non un vero e proprio protocollo di rete, ma una procedura per tentare varie strade

Internet draft

draft-ietf-wrec-wpad-01.txt (scaduto dic'99)

DHCP o DNS (record A di un "Well Known Alias")

draft-cooper-webi-wpad-00.txt (scaduto mag'01)

DHCP, SLP o DNS (record A di un "Well Known Alias"; record SRV; "service: URLs" nei record TXT)

tecnica più supportata: DNS con record A

Esempio WPAD ipotesi: client ha nome alfa.ing.polito.it.

UA emette DHCPINFORM (unicast o broadcast)

… e si aspetta DHCPACK con opzione 252 e stringacon la URL del file PAC

se DHCP (supportato da pochi browser) fallisce …

dnslookup(A,"wpad.ing.polito.it."), se fallisce …

dnslookup(A,"wpad.polito.it.")

… e poi cerca di accedere al file wpad.dat nella root

http://indirizzo_wpad_server/wpad.dat

1. Il protocollo HTTP

2. Il linguaggio HTML

3. Le specifiche CSS

Web statico con pagine dinamiche il client elabora il contenuto dinamico della pagina

(script o applet Java o controlli Active-X)

paginaDHTMLbrowser

web

0. canale HTTP

1. richiesta pagina

2. lettura pagina DHTML

4. invio pagina DHTML

3. pagina DHTML

serverweb

5. esecuzione parte dinamica+ interpretazione HTML

Web statico con pagine dinamiche pagina varia il suo contenuto in relazione

all’interazione con l’utente

es. menù a tendina che appare quando il mouse transita su una particolare area

si parla genericamente di DHTML:

HTML 4.0 o superiore

CSS (Cascaded Style Sheet)

linguaggio di script lato client

ECMA 262 (EcmaScript Edition 3) implementato come JavaScript o JScript

VBScript (solo per IE 4.0 o superiore)



Pagine dinamiche: pro e contro presentazione del contenuto variabile

(+) funzionalità più ricca e miglior interazione con l’utente

(+) efficiente (basso carico di CPU sul server)

(–) inefficiente (medio-alto carico di CPU sul client, specie per gli applet)

(~) possibilità di fare caching delle pagine

(~) pagine indicizzabili dai motori di ricerca (ma solo i dati statici …)

(–) staticità dei dati

(–) funzionalità dipende dalla capacità del client (linguaggi di scripting, tipi di applet, CPU, RAM, …)

Pagine dinamiche: applet due tipi di applet:

applet Java (richiede una JVM sul browser)

controllo ActiveX (richiede IE + Wintel)

problemi:

compatibilità (quale versione del linguaggio o della JVM?)

carico (richiedono esecuzione)

sicurezza (esecuzione di un programma vero e proprio):

applet Java esegue in una “sandbox”

activeX installa una DLL (!)

Modello delle prestazioni nel web staticocon pagine dinamiche

nessuna differenza con web statico per la parte di rete e lato server

maggior carico computazionale e di memoria lato client:

dipende dalla tecnologia dinamica scelta

carico crescente per

CSS

script lato client

controlli Active-X

applet Java

Client-side scripting HTML è un linguaggio di descrizione di pagine

unica interattività possibile è seguire i link

aggiunta di interattività alla pagina HTML tramite codice da interpretarsi sul client (UA):

NS e SUN inventano il linguaggio LiveWire, poi chiamato JavaScript (ma non è un subset di Java!)

MS inventa VBScript (subset di VBA) e poi JScript

accordo per fondere JavaScript e JScript in ECMAScript:

standard ECMA-262

da tutti chiamato JavaScript (versione >= 1.3)

33

Client-side scripting: a cosa serve ? generare dinamicamente parte della pagina HTML

adattamento al browser o preferenze dell’utente

alterare dinamicamente la pagina HTML

AJAX (Asynchronous Javascript And XML) per non ricaricare completamente la pagina dal server

eseguire una funzione associata ad un evento scatenato dall’interazione con la pagina:

es. al completamento di un form, validare i dati prima di inviarli al server

si risparmia traffico inutile sulla rete

si semplifica l’applicazione server-side

ma ... attenzione al rischio di ricevere dati errati!

Client-side script e pagine HTML trasmissione di uno script client-side verso il

browser:

inserire il codice nella pagina HTML usando il tag<script>

inserire un’espressione come gestore di eventi (DOM event handler) dentro alcuni tag HTML

specificare un’espressione come valore di un attributo HTML (“script macro” - deprecato)



Il tag SCRIPT per inserire uno script all’interno di HTML usare il

tag SCRIPT

parametri:

type=text/javascript, text/vbscript, ...

src=... (se lo script è presente in un file esterno)

<script type="text/javascript">… codice client-side …</script>

<script src="controlli.js" type="text/javascript"></script>

Il tag NOSCRIPT usare il tag NOSCRIPT per inserire HTML

visualizzato solo da quegli UA che:

non supportano gli script

non conoscono il linguaggio usato

hanno gli script disabilitati

<noscript>Attenzione! questo sito usa JavaScript perl’aggiornamento dei dati in tempo reale.Il tuo browser non supporta JavaScript (oppurene è stata disabilitata l’esecuzione) equindi tale funzionalità non saràdisponibile.</noscript>

37

JavaScript: in-line script

<!DOCTYPE html><html><head><title>JS1</title></head><body>

<script type="text/javascript">document.writeln("Ciao!")

</script></body></html>

js1.html

JavaScript: in-line script (cpon ciclo)

<!DOCTYPE html><html><head><title>Tavola dei quadrati</title></head><body><h1>Tavola dei quadrati</h1><script type="text/javascript">

var i;for (i=1; i<=20; i++) {

document.writeln("<p>"+i+"<sup>2</sup> = "+i*i+"</p>" );

}</script></body></html>

js_quadrati.html

DOM event handler è possibile associare comandi JavaScript ad eventi

tramite un “gestore di eventi” (o “event handler”)

sintassi:

<tag . . . eventHandler = “JavaScript_code”>

ove:

“tag” è un generico tag HTML

“eventHandler” è il nome dell’event handler(es. onclick, onfocus, onblur, onsubmit, onreset, onchange, onload, onunload)

“JavaScript_code” è una sequenza di comandi JS (spesso è una chiamata di funzione)

DOM event handler onclick = click sull’entità associata al tag

ondblclick = doppio click sull’entità associata al tag

onfocus = campo attivo per l’input

onblur = campo non più attivo per l’input

onsubmit = invio dei dati di un form tramite SUBMIT

onreset = modifica dei dati di un form tramiteRESET

onchange = cambiamento del contenuto + onblur

onload = al caricamento della pagina

onunload = allo “scaricamento” della pagina (per vederne un’altra o chiudere il browser)

lista completa nella sezione 18.2.3 di HTML 4.01



41

JS: esempio di eventHandler

... <head><title>Esempio JS associato ad onclick</title>

<script type="text/javascript">

function makeRed(x){obj = document.getElementById(x);obj.style.color="red";

}

</script></head><body>

<p id="id1" onclick="makeRed('id1')">Click on this text to make it red!</p>

</body> </html>js2.html

42

JS: script esterni quando lo stesso script serve per più pagine, lo si

può scrivere in un file esterno e richiamarlo nella pagina HTML

il file “.js” deve

essere un file di testo

avere un nome di lunghezza massima 8 caratteri

non contenere il tag <script> ma contenere direttamente il codice Javascript

JS: script esterni (2)

...<head> <script src="js3.js" type="text/javascript"></script></head><body><p id="id1" onclick="makeRed('id1')">Click on this text to make it red!</p></body>...

js3.html

function makeRed(x) {obj = document.getElementById(x);obj.style.color="red"; }

js3.js

1. Javascript

2. Form HTML

3. Espressioni Regolari Javascript

DOM (Document Object Model) una “visione ad oggetti” della pagina HTML

mette a disposizione una mappa degli elementi del web utilizzando una metafora ad oggetti

DOM è una struttura dati e non un linguaggio

deve essere usato assieme ad un linguaggio di scripting lato client (JavaScript, VBscript) che manipoli tali strutture dati

il W3C raccoglie e cerca di rendere standard il modo con cui vari linguaggi di script interagiscono con la struttura dati alla base di HTML

DOM livello 1:

www.w3.org/TR/1998/REC-DOM-Level-1-19981001

Gerarchia degli oggetti DOMwindow

self, window,parent, topWindow objects

documentframes[]

array ofWindow objects

location history navigator

all[]

applets[]

embeds[]

anchors[]

forms[]

images[]

links[]

layers[]

elements[]

options[]

plugins[]

mimeTypes[]Button

CheckboxFileHidden

PasswordRadioReset

SubmitText

Textarea

Select

Esempio DOM Esempio DOM: gerarchia degli oggettidocumentHTML page

images[0]first image

forms[0]whole form

images[1]second image

links[0]link

elements[0]first text field

elements[1]second text field

elements[2]button

<script type="text/javascript">. . .name = document.forms[0].elements[0].valuealert("Ciao " + name). . .

</script>

DOM: dare un nome agli oggetti per semplificare l’accesso ad un elemento (invece

di usare il riferimento gerarchico) si può assegnargli un “nome” univoco:

attributo “name” (disponibile solo per alcuni tag)

attributo “id” (disponibile per qualunque tag)

esempio (“intro” è un riferimento ad una particolare istanza del tag <h1>):

<html><body><h1 id="intro">Introduzione</h1>. . .</body></html>

Problemi di sicurezza degli script client-side codice trasmesso dal server al browser

potrebbe essere modificato dal client ...

non registrare dati riservati dentro lo script(es. verifica password, risposta giusta per un test)

script leggibile dal client ...

codice (non fidato!) eseguito sul client:

possibili azioni dannose, da semplici (es. cambio impostazioni) a complesse (es. lettura dati introdotti e trasmissione a terzi, attacchi denial-of-service)

Un attacco denial-of-service (DoS)

<html><head><title>DoS attack – apre infinite finestre</title></head><body><script type="text/javascript">

window.open("attacco.html");</script></body></html>

Funzionalità di sicurezza di JS set di comandi ristretto

il codice JavaScript NON può:

leggere o modificare file sul sistema client

lanciare in esecuzione altri programmi

usare nessuna primitiva per collegamenti in rete

attenzione! può aprire nuove finestre del browser e far scaricare al browser contenuti dal web

eseguire funzioni multithreading



Il web dinamico

browserweb

canale HTTP

1. richiesta risorsa(CGI, ASP, PHP, …)

5. invio paginaHTML / DHTML

serverweb

interprete(perl, php...)

2. inoltro richiesta all’interprete corretto

HD

file.pl .php...

3. letturafile richiesto

HDDB

4. lettura datida DB / file

6. esecuz. parte dinamica+ interpretazione HTML

Web dinamico pagina generata dal server in modo dinamico

varia il suo contenuto informativo in base a:

richieste inviate dall’utente

contenuto di un database

istante di tempo in cui avviene la richiesta

tecniche per realizzare il web dinamico:

CGI

linguaggi di script lato server (JavaScript/Jscript, VBScript, PHP, PerlScript, Python, ...)

SSI (Server Side Include)

servlet, JSP (Java Server Pages)

Il web dinamico: pro e contro adattamento delle pagine a condizioni variabili:

input fornito dal client

capacità del client

(+) massima dinamicità dei dati

(+) ottima adattabilità ai client ed alle loro capacità

(–) bassa efficienza (alto carico di CPU)

(–) impossibile fare caching delle pagine se i parametri di selezione non sono nella URL(es. sono nei cookie)

possibili errori se il caching è attivato

(–) pagine non indicizzabili dai motori di ricerca

CGI Common Gateway Interface

RFC-3875

il web server:

attiva l’applicazione CGI

le passa eventuali parametri:

tramite stdin (metodi POST, PUT)

tramite una variabile d'ambiente (metodo GET)

riceve i risultati tramite stdout

i risultati devono essere in formato web (HTML/CSS/scripting client-side)

Schema di funzionamento di CGI

client (browser)

network

interfaccia CGI

1. scelta applicazioneed invio dati del form

4. ricez. pagina HTML

2. avvio applicazione CGI e passaggio parametri

3. invio pagina HTML al server HTTP e termine applicazione

applicazione CGI(eseguibile o script da interpretare)

serverHTTP

CGI: pro metodo generale

disponibile su tutti i server web (IIS, Apache, …)

applicazione scritta in qualunque modo

file eseguibile (=più efficienza)

script interpretato (=più flessibilità)



CGI: contro ogni chiamata richiede l’attivazione di un processo:

elevato costo di inizializzazione

elevata latenza

creazione / distruzione di molti processi

occupazione di memoria proporzionale al numero di processi simultaneamente attivi

difficoltà di comunicazione tra server HTTP ed applicazione (spazi di memoria differenti)

CGI: contro (II) mancano meccanismi per la condivisione di risorse

tra programmi CGI

ogni accesso ad una risorsa richiede “apertura” e“chiusura” della risorsa

non esistono i concetti di sessione né di transazione

l’interfaccia grafica dell’applicazione web (ossia i tag HTML) è annegata nel codice

paradigma inadatto ad applicazioni con molti utenti attivi simultaneamente e che richiedono bassi tempi di risposta

CGI: possibili miglioramenti uso di variabili di ambiente per comunicare tra

server HTTP ed applicazione

inclusione di uno o più interpreti nel server HTTP:

(+) miglior velocità di attivazione

(+) miglior comunicazione con l’applicazione

(+) minor occupazione di memoria

(-) maggior dimensione del server

pre-attivazione dell’applicazione (in N copie) ed inclusione nel server di un modulo specifico per scegliere una copia libera e comunicare con essa

FastCGI

Passaggio parametri in input a CGI tre modalità per trasmettere i dati dei form:

standard input (quando si usa POST o PUT)

il body HTTP viene passato al CGI

variabile di ambiente (quando si usa GET):

la variabile di ambiente QUERY_STRINGcontiene la parte di URL dopo ‘?’

linea di comando, ossia argc/argv (quando si usaISINDEX, tag deprecato in HTML-4.01 e cancellato in HTML-5)

altre informazioni passate all’applicazione tramitevariabili di ambiente (es. REMOTE_ADDR, HTTP_USER_AGENT)

Output generato da CGI l’applicazione deve restituire HTML valido

usare à " < > …

l’applicazione deve restituire anche parte degli header HTTP; CGI/1.1 specifica i seguenti header:

Content-Type:

tipo MIME della risposta

Location:

se è una URI, il server invia un redirect al client

se è un documento, il server lo fornisce al client

Status:

il server lo usa come status code nel suo header

HTTPheader

HTTPbody

HTTP/1.0 200 OKDate: 14-apr-2010 09:02Server: Apache/1.3.19Content-Type: text/html

<HTML><HEAD></HEAD><BODY><H1>Ciao!</H1></BODY></HTML>

CGI: generazione della risposta

serverHTTP

applicazioneCGI

Server-side scripting tecnologie differenti, ma caratterizzate da avere nel

file della pagina codice di scripting mescolato con il template HTML + client-side scripting

ASP (Microsoft)

VBscript

JScript

implementazione anche per Apache (con PerlScript)

PHP (open source)

sviluppato per Apache

esiste anche per IIS

usabile sia come linguaggio generale di scripting siaattraverso CGI

Server-side scripting (2) JSP (Sun/Oracle), tecnologia ibrida

il codice è annegato nel template HTML (come per le altre tecnologie di scripting server-side)

il codice è costituito da

scripting elements (come altri linguaggi server-side)

direttive

azioni (tag proprietari XML & NS like)

le pagine vengono tradotte in servlet dal server Web

SSI (Server Side Include) introduce direttive nel codice HTML sotto forma di

commenti

se SSI non è supportato dal server HTTP, le direttive sono ignorate

se SSI è supportato, nella pagina HTML restituita al client le direttive sono sostituite con il testo risultato dell'elaborazione

aggiunge nuove variabili di environment

non sostituisce CGI/ASP/..., ma introduce la possibilità di aggiungere dinamismo alle pagine HTML effettuando semplici operazioni



SSI (2) su alcuni server le pagine che contengono direttive

SSI devono avere estensione “.shtm” o “.shtml”

è possibile configurare opportunamente i server web in modo da elaborare le direttive SSI anche per le pagine con estensioni “.htm” o “.html”

server HTTP

Apache supporta SSI (e XSSI dalla versione 1.2)

IIS supporta solo la direttiva #include di SSI

deve essere inserita nella parte di HTML

non può essere prodotta da codice ASP

altre funzionalità SSI ottenibili con oggetti ASP

LiteSpeed, nginx, lighttpd

Esempio funzionamento SSI

<html><head><title></title></head><body>...<fontface=sans-serif size=-2><br>Maintained by: <br>Last modified: </font>

<html><head><title>Esempio di SSI</title></head><body>...<fontface=sans-serif size=-2><br>Maintained by: <B>Antonio Lioy</B><br>Last modified: Thursday, 21-Feb-2002 18:53:28 MET</font>

pagina prima dell’elaborazione (come memorizzata sul server)

pagina dopo l’elaborazione (come inviata al browser)

Esempio funzionamento SSI contenuto del file title.inc

contenuto del file author.inc

NOTA: i file inclusi con la direttiva include o il risultato di esecuzione di script (direttiva exec)

possono contenere testo e HTML

devono rispettare la codifica dei caratteri prevista da HTML): es. quantità => quantità

una volta inclusi devono rispettare i requisiti HTML/CSS (posizione dei TAG, ecc.)

Esempio di SSI

<B>Antonio Lioy</B>



Server-side o client-side? server-side:

(pro) maggiore sicurezza

(con) sovraccarico del server

client-side:

(pro) elaborazione sul client (scarico il server)

(con) capacità del client (funzionalità e prestazioni)

(con) minore sicurezza (manipolabile dall’utente)

in generale:

meglio server-side per sicurezza e funzionalità

meglio client-side per migliorare le prestazioni

spesso si usano entrambi simultaneamente

Server-side e client-side talvolta non sono equivalenti

esempio (contenuto di prova.php):

<?php

$h=date("G"); // 24H hour format, no leading zero

$m=date("i"); // minutes, with leading zero

echo $h.":".$m;

?>

<script type="text/javascript">

var d=new Date();

var h=d.getHours(); // 24H hour format, no leading zero

var m=d.getMinutes(); // minutes, no leading zero

document.write(h + ":" + m);

</script>

World Wide Web (WWW) Programmazione in ambiente web

Documents

Transcript of World Wide Web (WWW) Programmazione in ambiente web