IUT d Orléans. Département Informatique. Année 2015-2016 Dévelopement Web Licence Professionnelle Web et Mobile TD-TP Serveurs Web, HTTP et autres protocoles - Formulaires HTML5 - PHP 1 Exercice 1 Le protocole SMTP Utilisation du protocole Simple Mail Transfert Protocol : Envoi d un message. Envoyer manuellement un mail en utilisant la commande telnet ou netcat pour se connecter au port 25 de le serveur smtp.univ-orleans.fr Ecrire un petit programme en Java vous permettant d envoyer un mail. i m p o r t getpass, p o p l i b Code 1 Connexion à POP3 SSL Mailbox = p o p l i b. POP3 SSL ( m a i l e t u. univ o r l e a n s. f r, 9 9 5 ) Mailbox. user ( login ) passwd = getpass. getpass ( Password : ) Mailbox. pass ( passwd ) nummessages = l e n ( Mailbox. l i s t ( ) [ 1 ] ) f o r i i n range ( nummessages ) : f o r msg i n Mailbox. r e t r ( i + 1 ) [ 1 ] : p r i n t ( msg ) Mailbox. q u i t ( ) Exercice 2 Le protocole POP3 Utilisation du protocole PostOffice Protocol. On va maintenant récupérer un mail sur mailetu.univ-orleans.fr ou sur toute autre messagerie POP3 accessible. Assurez-vous d avoir au moins un message en attente sur cette messagerie. Quel serait l échange si cette connexion n était pas sécurisée? En utilisant POP3 SSL dans la librairie poplib tapez le code Python ci-dessus qui vous permet de récupérer vos messages. Mettez comme login la lettre o suivie de votre numéro d étudiant. 1
Exercice 3 Apache Sur chaque machine de l IUT tourne un serveur Web Apache Connectez-vous sur http ://localhost pour vous en assurer Créez un répertoire www à la racine de votre HOME contenant une page Web simple de test. Procédez à sa publication en vérifiant que tous les contenus de ce dossier son accessibles à tout le monde en lecture. Attention, les répertoires doivent aussi être traversables ce qui inclus votre HOME. Les commandes à faire sont donc généralement : chmod -R a+rx /www et chmod a+x. Ces commandes sont à faire une seule fois et dépendent de la configuration spécifique du serveur. Si les modules suexec et suphp d Apache sont activés, les droits sont plus simples à configurer! Attention : Les fichiers n ont pas à être exécutables! C est une faille de sécurité que de rendre tout exécutable ou de tout mettre en écriture pour tout le monde. Ne le faites pas! Visualisez votre site dans un navigateur à l adresse http ://localhost/ vous où vous est votre nom de login. Consultez les fichiers de configuration d Apache dans /etc/apache2/. En cas de souci avec Apache, testez le serveur Web intégré de Python 3 : python3 -m http.server Exercice 4 Le protocole HTTP Utilisation du protocole HyperText Transfer Protocol. On va maintenant se connecter directement sur un serveur Web. Faire un telnet ou un netcat sur le port 80 d une machine sur laquelle tourne un serveur web et essayez de communiquer avec le serveur par le protocole HTTP. Essayez essentiellement GET / Que constatez-vous? Que se passe-t-il si vous demandez une page qui n existe pas (par exemple GET /toto)? Observez les échanges entre le navigateur et le serveur Web en utilisant l onglet réseau des outils de developpement. Exercice 5 Espionnage du protocole HTTP. 1. Lancez le programme fourni java ServeurProxyMiroir sur un port autorisé. 2. Comment utiliser ce programme pour espionner la communication HTTP entre votre navigateur et le proxy de l Université? 3. Lancez le sur le port 5555 par exemple 4. Faites les réglages nécéssaires sur votre navigateur Chrome pour que cela devienne le proxy : chromium-browser --proxy-server=localhost:5555 5. Ouvrez une page Web de votre choix puis observez les fichiers miroir.xx créés. Ils contiennent les traces des échanges entre votre navigateur et le serveur. 6. Que veut dire le paramètre q=0.x observé dans certains échanges? Le protocole HTTP Code 2 Hello World en CGI 2
#! / bin / bash # s h e l l s c r i p t c a t <<EOF Content type : t e x t / p l a i n h e l l o world! EOF Exercice 6 CGI La configuration d Apache ne vous permettant pas d utiliser les CGI dans votre HOME, on peut utiliser le serveur CGI fourni par Python 3 : python3 -m http.server --cgi 8000 à partir du répertoire www contenant un dossier cgi-bin dans lequel vous aurez placé hello.cgi ci-dessus. Le fichier hello.cgi doit être rendu exécutable. Puis pointez votre navigateur sur http://localhost:8000/cgi-bin/hello.cgi Exercice 7 1. Ecrivez un formulaire simple avec saisie d un nom et d un prénom dans des champs texte 2. Ecrivez un script bash qui récupérera les valeurs de ces champs et qui affichera les variables d environnement concernant le client. Le script cgi doit se trouver dans www/cgi-bin et le formulaire dans www. 3. Testez la validation du formulaire par un POST ou un GET Formulaires en CGI 4. Comment faire un formulaire permettant d uploader une photo et un CGI qui la transforme en niveau de gris avant de l afficher? On pourra utiliser l utilitaire convert d Imagemagick. daemon o f f ; w o r k e r p r o c e s s e s 1 ; pid tmp / run / nginx. pid ; e r r o r l o g tmp / log / e r r o r l o g i n f o ; e v e n t s { w o r k e r c o n n e c t i o n s 1024; Code 3 fichier ngninx.conf h t t p { i n c l u d e / e t c / nginx / mime. types ; d e f a u l t t y p e a p p l i c a t i o n / o c t e t stream ; c l i e n t b o d y t e m p p a t h tmp / c l i e n t ; p r o x y t e m p p a t h tmp / proxy ; f a s t c g i t e m p p a t h tmp / f a s t c g i 1 2 ; uwsgi temp path tmp / uwsgi ; s c g i t e m p p a t h tmp / s c g i ; 3
s e n d f i l e on ; i g n o r e i n v a l i d h e a d e r s on ; i n d e x i n d e x. html ; s e r v e r { l i s t e n 1 2 7. 0. 0. 1 : 8 0 8 0 ; server name l o c a l h o s t ; a c c e s s l o g tmp / log / a c c e s s l o g ; e r r o r l o g tmp / log / e r r o r l o g i n f o ; r o o t www; l o c a t i o n \. cgi$ { i n c l u d e / e t c / nginx / f a s t c g i p a r a m s ; f a s t c g i p a s s u n i x : tmp / run / f c g i. sock ; Exercice 8 Fonctionnement avec nginx On peut aussi utiliser le serveur Web NGINX pour lancer des CGI avec le module fcgiwrap : Dans le répertoire du projet web, /www, ajoutez le fichier nginx.conf précédent. il faut aussi créer les répertoires suivants : tmp tmp/run tmp/log placer un script cgi dans www, par exemple hello.cgi vu ci-dessus. le rendre exécutable. ensuite, dans un terminal, lancez fcgiwrap : fcgiwrap -s unix:tmp/run/fcgi.sock et dans un autre nginx -c nginx.conf -p $PWD testez dans un troisième : wget -O - http://localhost:8000/hello.cgi 2>/dev/null Exercice 9 Les Formulaires HTML5 et JS Mettre en place un petit formulaire interrogeant une personne sur son identité, son adresse mail, son téléphone, les langues maitrisées, etc. avec des zones de texte, des listes déroulantes, radio et cases à cocher, et si possible un slider, une date. Utiliser un tableau et des checkboxs pour saisir la liste des langues parlées. On utilisera la méthode GET de soumission du formulaire. Expérimentez-là avec un bouton Submit. Utilisez les principaux nouveaux champs HTML5 comme email, tel, et des attributs comme required ou pattern pour effectuer des vérifications simples de validité des entrées. On effectuera les vérifications plus complexes (comme vérifier qu une date est valide ou ne tombe pas un dimanche) en JavaScript. 4
Exercice 10 Les Formulaires HTML5 et leur réponse en PHP Programmez à présent la réponse à ce formulaire en PHP. Faites d abord un simple récapitulatif des données saisies par l utilisateur. Dans un second temps procédez côté serveur à toutes vérifications déjà faites côté client. Utilisez pour cela des expressions régulières ou des filtres PHP. Le formulaire avec toutes ses vérifications côté client, un CSS agréable, si possible responsive et sa réponse en PHP avec toutes ses vérifications côté serveur est à rendre pour le 18 Septembre à votre enseignant de TD via le dépôt Celene prévu à cet effet. 5