Skip to content

Lab - Web Server

Gli esempi qui indicati fanno riferimento al contenuto del folder Esempi Web disponibile nel folder delle slides. Scaricare l'intero folder sul proprio PC.

Installazione Web server locale

L'ambiente di programmazione Python contiene un semplice web server.

  • Installare Python.
  • Lanciare un interprete di comandi (shell).
  • Spostare la shell nella directory in cui si trovano i file html di esempio.
  • Lanciare il web server Python python -m http.server. Di default questo web server è in ascolto sulla porta 8000. Il web server rimane in esecuzione fino a quando è in esecuzione la shell dalla quale lo si è lanciato.
  • Lanciare un'altra shell. Eseguire netstat -an per elencare l'insieme di porte attualmente utilizzate. Deve comparire nell'elenco la porta 8000 associata al protocollo TCP e nello stato LISTENING, cioè in attesa di richieste di connessione. Ciò conferma che il web server è effettivamente in esecuzione.

Riferimento utile

Il riferimento indicato più sotto suggerisce di lanciare il web server con il comando python3 e di collegare il browser all'URL http:0.0.0.0:8000. A seconda della configurazione e dell'ambiente specifico, questi "dettagli" non funzionano, nel mio ambiente funzionano python e localhost. Provate e non vi arrendete.

Accesso a sito web localhost

  • Lanciare un browser e scrivere nella barra degli URL http://localhost:8000.

    • La parte :8000 è una componente opzionale nella sintassi degli URL; se presente, indica il numero di porta del server al quale dovrà collegarsi il browser (il codice del browser non eseguirà connect(IP-server, 80) bensì connect(IP-server, 8000), dove IP-server sarà stato ottenuto traducendo il nome contenuto nella seconda parte dell'URL, in questo caso localhost)

  • Il browser deve mostrare l'elenco dei file presenti nella directory del web server. Cliccare su un file html di esempio e verificarne la corretta visualizzazione.

Risorse prelevate dal browser

  • Aprire i Developer tools del browser e localizzare la funzione per vedere l'elenco delle risorse prelevate dal browser:

    • quante sono?
    • quali sono?
    • il nome dei file sul disco è identico alla terza parte dell'URL o no? Che legame c'è tra nomi di file e terza parte degli URL?

  • Modificare il file html (o crearne uno identico e lavorare su quest'ultimo) in modo da:

    • aggiungere un'immagine (scaricata da Internet e memorizzata nella directory del file di esempio);
    • modificare lo IFRAME inserendovi un URL diverso.

  • Visualizzare nuovamente il documento html con il browser ed analizzare le risorse prelevate dal browser, come sopra.

  • Provare a modificare nuovamente il documento html aggiungendovi una immagine non scaricata da Internet. Occorre cercare una immagine su Internet, trovarne l'URL (tasto destro del mouse) ed usarlo come attributo src del nuovo elemento img.

Connessioni TCP e numeri di porta

  • Eseguire netstat -an mentre il browser sta visualizzando il documento. L'elenco dovrebbe contenere almeno una connessione con protocollo TCP nello stato ESTABLISHED e numero di porta 8000 ad una delle due estremità. Questa è la connessione che il browser ha con il web server; il numero di porta 8000 è all'estremità che corrisponde al web server:

    • Qual è il numero di porta all'altra estremità, cioè a quella che corrisponde al browser? E' 8000, cioè uguale a quello sull'estremità del web server? Oppure è un numero diverso, "molto grande"?

  • Se l'elenco non contiene nessuna connessione con le caratteristiche sopra indicate, il motivo è che il browser o il server hanno deciso di chiudere la connessione TCP ed al momento in cui è stato eseguito netstat la connessione era già stata chiusa. In questo caso, premere il tasto di reload sul browser e generare l'elenco nuovamente. L'elenco dovrebbe adesso contenere la connessione.

Ripetere quanto segue fino a che non lo si è capito:

  • Premere reload sul browser, eseguire netstat -an, identificare la connessione tra browser e web server,cercare il numero di porta all'estremità del browser.
  • Stamparsi in testa che quel numero di porta è diverso da quello all'estremità del server: è un numero "molto grande" ed "ogni volta diverso"
  • Stamparsi in testa che il punto precedente non è qualcosa da imparare a memoria. E' stato detto a lezione: cercare nelle slide il punto in cui è stato detto.

Osservazione

Le connessioni tra browser e server non sono di facile interpretazione, per due motivi:

  1. Quando il browser è collegato ad un web server in esecuzione sulla stessa macchina in cui è in esecuzione il browser, come in questo caso, l'esecuzione di netstat -an mostrerà due righe per ogni connessione esistente invece di una: una riga in cui considera il browser locale ed il server remoto, un'altra in cui considera il server locale ed il browser remoto.
  2. Il browser può usare più connessioni in parallelo verso lo stesso web server: se il browser si accorge che deve prelevare più risorse dallo stesso web server, allora il browser può decidere di aprire più connessioni verso quel web server ed inviare più richieste in parallelo, una su ogni connessioni.

Negli esercizi, per semplicità, assumeremo sempre che il punto 2 non accade mai: ad ogni istante:

  • un browser può avere più connessioni aperte, ma verso web server diversi;
  • un browser non ha più connessioni aperte in parallelo verso lo stesso web server.

Accesso a sito web con nome

  • Modificare il file hosts sul proprio PC in modo da assegnare l'indirizzo IP locale cosiddetto loopback (127.0.0.1) ad un nome a piacere.

    • Ad esempio, su Windows aggiungere al file hosts la riga 127.0.0.1 parlamento.it implica che nel PC nel cui file hosts è stata aggiunta quella riga il nome parlamento.it sarà tradotto in 127.0.0.1.
    • Notare che la sintassi del file hosts è diversa da quella dei RR DNS.
    • Questa conversazione con ChatGPT dovrebbe riassumere le operazioni da fare su Windows, Linux, Mac per modificare il file hosts.

  • Scrivere nella barra degli URL del browser http://parlamento.it:8000 e verificare la corretta visualizzazione.

E' possibile aggiungere più righe al file hosts che mappino più nomi sullo stesso indirizzo IP locale. In questo modo tutti i nomi aggiunti saranno associati allo stesso web server locale.

Il web server Python però non è in grado di ospitare più siti web diversi e fornire contenuti diversi a seconda del sito web richiesto dal browser.

  • Ad esempio, se parlamento.it e realmadrid.es fossero associati a quel web server, richieste per http://parlamento.it/index.html e http://realmadrid.es otterrebbero la stessa risposta, cioè il contenuto del file index.html nella directory del web server.

Per gestire più siti web con un unico web server occorre un web server leggermente più complesso, ad esempio Abyss o Apache. Il primo è un web server "molto completo", relativamente semplice da installare e configurare. Il secondo è un web server professionale tra i più diffusi, più complesso da installare e configurare.

ATTENZIONE VirusTotal segnala che Abyss ha al proprio interno del malware. Questa indicazione di VirusTotal potrebbe essere un falso positivo (cioè avvisa della presenza di un malware ma non c'è effettivamente un malware) ma non ne ho la certezza quindi non posso consigliarne l'uso.

CSS

  • Lancia il web server locale come indicato sopra e preleva il documento esempio_1-css.html (con il nome di sito localhost o con il nome di sito eventualmente inserito nel file hosts)
  • Click con il tasto destro in una delle scritte colorate e seleziona inspect. Cerca di capire la descrizione delle proprietà CSS fornita dal browser.
  • Prova a modificare il valore di qualche proprietà CSS direttamente nei developer tools del browser (ad esempio, modifica color o font-family di qualche regola CSS). Il browser modifica la visualizzazione.
  • Al reload tornerà la visualizzazione specificata nelle risorse inviate dal web server.

Riferimento utile

JavaScript

  • Lancia il web server locale come indicato sopra e preleva il documento esempio_javascript.html (con il nome di sito localhost o con il nome di sito eventualmente inserito nel file hosts)
  • Click sulle immagini come indicato nel documento visualizzato e verifica il cambio di visualizzazione.
  • Click con il tasto destro e View page source. Cerca di farti un'idea di cosa accade cliccando sulle immagini.

  • Reload e apri i Developer tools del browser. Ripeti i click:

  • Osserva le sezioni Sources e Network. Il browser genera traffico per modificare la visualizzazione? Sempre, mai, in qualche caso?

  • Osserva il Render tree (sezione Elements dei Developer tools). Cerca di individuare le parti modificate dall'esecuzione di JavaScript.

Riferimento utile

Contenuto dinamico

  • Crea una directory di nome cgi-bin
  • Crea in quella directory un file di nome hello.py e contenuto identico a quello del secondo esempio nella sezione "Execute a Script Remotely Through the Common Gateway Interface (CGI)" del riferimento indicato più sotto.
  • Lanciare il web server Python e mandarlo nuovamente in esecuzione con l'opzione "esegui programmi specificati con lo standard CGI": python -m http.server --cgi (se era già in esecuzione, fermarlo con ctrl-C o chiudendo la shell).
  • Visualizzare con il browser il documento http://localhost:8000/cgi-bin/hello.py

Verificata la corretta visualizzazione:

  • Premere il pulsante reload del browser più volte. Ogni volta sfondo e testo del documento visualizzato saranno diversi, nonostante ogni volta il browser richieda lo stesso URL.
  • Cliccare con il tasto destro del mouse sul documento e selezionare "inspect page source". Dare un'occhiata al codice HTML. I file nei folder accessibili al web server contengono un file HTML con quel contenuto?

  • Aprire i Developer tools del browser e localizzare la funzione per vedere l'elenco delle risorse prelevate dal browser.

    • Quante sono?
    • Quali sono?
    • Cosa cambia tra un prelievo ed il successivo?

Cosa accade sul web server

Dare un'occhiata al contenuto di hello.py per cercare di avere un'idea di ciò che accade (spiegato in estrema sintesi più sotto). La programmazione Python non è parte di questo corso. La scrittura di programmi per web server nemmeno. Ci basta solo avere un'idea molto a grandi linee di cosa sia accaduto.

In questo caso il web server ha capito dalla forma dell'URL richiesto (/cgi-bin/hello.py) che non deve costruire una risposta HTTP che trasporta il file identificato da quell'URL. Deve invece:

  1. mandare in esecuzione il programma python hello.py, permettendo al programma di accedere al contenuto della HTTP Request che ne ha provocato l'esecuzione (funzioni os.getenv());
  2. trasformare l'output dell'esecuzione del programma (stringa stampata con print()) in una HTTP Response da tornare al browser.

La regola con la quale il web server ha preso questa decisione è, in parole povere, questa: la terza parte dell'URL inizia con cgi-bin e il web server è stato mandato in esecuzione con l'opzione --cgi.

Riferimento utile