LOG4420 Conception de sites web dynamiques et transactionnels Contrôle périodique Automne 2009 28 octobre 2009 Directives : Durée de l examen : 2h30 ; Le questionnaire comporte 5 questions sur 8 pages (excluant celle-ci); La pondération de cet examen est de 25% ; Cellulaires, agendas, ordinateurs ou téléavertisseurs sont interdits ; Toute documentation papier est permise ; Les calculatrices ne sont pas permises. Répondez sur le cahier d examen ; Remettez le questionnaire à la fin de l examen.
Question 1) HTML/CSS/Requêtes HTTP/JavaScript (9 points) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/tr/1999/rechtml401-19991224/loose.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"><head> <META http-equiv=content-type content="text/html; charset=utf-8"> <STYLE type=text/css>body { BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 12px; BACKGROUND: url(http://s1.tanoth.co.uk/img/mailtemplate/bg.jpg) #000 repeat-x 0px 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 45px 0px 0px; COLOR: white; PADDING- TOP: 0px; FONT-FAMILY: Verdana, Arial, sans-serif; TEXT-ALIGN: center; BORDER-RIGHT-WIDTH: 0px A { COLOR: #fff H1 { FONT-SIZE: 15px H2 { FONT-SIZE: 30px DIV#container { BORDER-RIGHT: #fff 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 0px; BACKGROUND: url(http://s1.tanoth.co.uk/img/mailtemplate/content.jpg) repeat-y 0px 0px; PADDING- BOTTOM: 0px; MARGIN: 0px auto; BORDER-LEFT: #fff 1px solid; WIDTH: 850px; PADDING-TOP: 0px; BORDER- BOTTOM: #fff 1px solid; TEXT-ALIGN: left DIV#bgContainer { BACKGROUND: url(http://s1.tanoth.co.uk/img/mailtemplate/top_tanoth.jpg) no-repeat 0px 0px H1#header { PADDING-RIGHT: 30px; PADDING-LEFT: 220px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING- TOP: 160px DIV#main { PADDING-RIGHT: 50px; PADDING-LEFT: 220px; MIN-HEIGHT: 185px; PADDING-BOTTOM: 20px; MARGIN: 0px; PADDING-TOP: 20px DIV#rickroll { BACKGROUND: url(http://yougotrickrolled.com/background.jpg) no-repeat 0px 0px H2 { PADDING-RIGHT: 0px; PADDING-LEFT: 265px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING- TOP: 6px; HEIGHT: 51px H2 SPAN { PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 460px; LINE-HEIGHT: 40px; PADDING-TOP: 0px; HEIGHT: 40px; TEXT-ALIGN: center P#footer { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 9px; BACKGROUND: #000; PADDING- BOTTOM: 0px; MARGIN: 10px auto 0px; WIDTH: 850px; PADDING-TOP: 0px; TEXT-ALIGN: center TABLE TD { COLOR: white; Page 1 de 8
</STYLE> <META content="mshtml 6.00.6001.18294" name=generator></head> <BODY> <DIV id=container> <DIV id=bgcontainer> <H1 id=header></h1> <DIV id=main><br><br>statistiques de combat:<br><br> <TABLE class=combatreport border="1"> <TBODY> <TR> <TD class=firstcolumn><br>force<br>dextérité<br>constitution<br>intelligence<br>points de vie</td> <TD class=secondcolumn>juliengsamson (Niveau 100)<BR><BR>1<BR>1<BR>90<BR>1200<BR>1988 / 20000<BR><BR></TD> <TD class=thirdcolumn></td> <TD class=fourthcolumn>oligagnon (Niveau 100)<BR><BR>1<BR>10<BR>100<BR>1000<BR>0 / 26000<BR><BR></TD></TR></TBODY></TABLE><BR><BR>Oligagnon a perdu le combat et 10 pièces d'or. <BR></div> <div id="divintra1" style="width:200px;height:200px"> <div style="position:relative;top:50%;left:50%;"> <form id ="form1" action="soumettre.php" method="post"> <input type="button" value="ajouter Colonne" /> </form> </div> </div> <H2><SPAN><a href="http://www.polymtl.ca/cours/log4420">log4420</a></span></h2></div> </DIV> <BR><BR> <P id=footer>olivier Gagnon : Intra A2009</P> </BODY></HTML> a) (3 pts) Dessinez cette page web telle qu elle apparaît dans un fureteur web. Fournissez une référence en pixels pour les dimensions que vous utiliserez.(note IMPORTANTE : IGNOREZ LES IMAGES DE TANOTH.CO.UK POUR CETTE QUESTION UNIQUEMENT, NE CHERCHEZ PAS A LES DESSINER) b) (1 pt) Donnez les en-têtes http requises pour afficher la page complète (images, code, etc ). Vous pouvez ne mettre que les parties importantes de la requête pour sauver du temps, comme dans le mini-quiz 2 vu en classe. Si vous ne vous rappelez pas des parties importantes, mettez tout. 4 requêtes en tout : 1) GET (PAGE.HTML) ou nom de votre choix HOST (SERVEUR) ou serveur de votre choix 2) GET (http://s1.tanoth.co.uk/img/mailtemplate/bg.jpg) Page 2 de 8
HOST : S1.TANOTH.CO.UK 3) GET (http://s1.tanoth.co.uk/img/mailtemplate/content.jpg) HOST : S1.TANOTH.CO.UK 4) GET (http://s1.tanoth.co.uk/img/mailtemplate/top_tanoth.jpg) HOST : S1.TANOTH.CO.UK Pièges : Pas de requêtes pour le formulaire, le lien, et la <DIV> inexistante *rickroll* c) (1 pt) Dessinez l arbre DOM de la page web, seulement les noeuds (IGNOREZ LES ATTRIBUTS). d) (4 pts) Faites un code JavaScript qui, dynamiquement, ajoutera une colonne au tableau (TABLE) de la page web si on clique sur le bouton *AjoutColonne*. Dans cette nouvelle colonne, le script devra y insérer un numéro «X» où X est le numéro de la nouvelle colonne. Exemple... 1 2 3 4 Etc... <script type="text/javascript"> function AjouterColonne() { Page 3 de 8
var lignesdutableau = document.getelementsbytagname("tr"); var lignetab = lignesdutableau[0]; var nbcol = document.getelementsbytagname("td").length; var cell = document.createelement("td"); var txt = document.createtextnode(nbcol-3); cell.appendchild(txt); lignetab.appendchild(cell); </script> <script type="text/javascript"> var bouton = document.getelementsbytagname('input'); btn = bouton[0]; btn.onclick = AjouterColonne; </script> Question 2) Sécurité web (3 points) a) (1 pt) Votre tante Yolande vient de s acheter son premier ordinateur et commence à apprivoiser l internet. Étant son neveu/nièce ayant le plus de talent avec l informatique, vous l avez conseillée durant tout son processus de magasinage d ordinateur. Vous lui avez également montré les bienfaits du site internet sécurisé de Desjardins (https://accesd.desjardins.com) pour ses transactions bancaires. Un beau jour d octobre, votre tante reçoit un courriel : Bonjour Madame Caouette, Desjardins offre un programme de récompense pour ses fidèles clients, en allant vous authentifier sur notre site sécurisé http://www.accesd.desjardins.com, vous pouvez vous inscrire au concours officiel pour l année 2009. Nos plus sincères salutations, René Levéreux, Conseiller financier de Desjardins. Page 4 de 8
Votre tante clique sur le lien et entre ses coordonnées, et apprend deux jours plus tard que son compte a été vidé. Vous avez oublié de prévenir votre tante des dangers de l internet. Que s est-il passé? Cas classique de «Phishing», un site non sécurisé ressemblant à Desjardins a volé les infos à notre tante. b) (1 pt) Après s être battue avec les représentants de Desjardins, votre tante fut remboursée. Une semaine plus tard, un nouveau courriel parvient à votre tante : Bonjour Madame Caouette, La sécurité de votre compte a été compromise dernièrement et nous vous demandons de vous authentifier sur votre compte à l adresse habituelle (https://accesd.desjardins.com) afin de modifier votre mot de passe. Merci de votre compréhension, E.S. Croc Chef de la sécurité de AccesD Votre tante clique sur le lien, s authentifie, entre ses coordonnées, change son mot de passe, et apprend deux jours plus tard que son compte a été vidé a nouveau! Vous n y comprenez rien, le lien semble correct, mais vous l étudiez de plus près et vous vous frappez le front en vous exclamant «Mais bien sur!». Que s est-il passé? Faux lien, la tag <a> ne pointe pas nécessairement vers ce qui est écrit dans le courriel. «Phishing» déguisé. Autre réponses acceptées : DNS hacking, etc... c) (1 pt) Vous donnez à tante Yolande un cours sur la sécurité et les pièges a éviter. Vous la renseignez sur le protocole https et lui recommandez de se fier au cadenas qui apparait dans la barre d adresse. Tante Yolande reçoit un nouveau courriel Bonjour madame Caouette, Votre compte AccesD a été suspendu suite aux 2 récents cas de fraude dont vous avez été victime. Pour réactiver votre compte, veuillez vous authentifier sur le site sécurisé https://accesd.desjardins.com. Merci de votre compréhension, Vincent Lacroix Conseiller financier de Norbourg-Desjardins Page 5 de 8
Votre tante est méfiante et clique sur le lien, elle vérifie que le petit cadenas apparait dans la barre d adresse. Il y est, et pour vérifier l authenticité du site selon vos instructions, elle vérifie la signature https et voit *Signed by Verisign Inc.*. Votre tante peut donc faire confiance à ce site. Elle entre ses coordonnées, et apprend deux jours plus tard que son compte a encore été vidé! Vous n y comprenez plus rien. (0.5 pt) Que s est-il passé? Certificat frauduleux, faux site a été certifié Vérisign! Autres réponses acceptées : Employé de la banque corrompu... (0.5 pt) Quelle est la prochaine action que votre tante doit poser? (Indice : Un avocat est impliqué) Poursuivre Verisign ou Desjardins ou fraudeur selon votre réponse. Question 3) Technologies Web (6 points) Parmi les technologies web suivantes vues en classe : CSS PHP Requêtes HTTPS Certificats JavaScript Sessions Requêtes HTTP Requêtes SQL Cookies Déterminez laquelle/lesquelles sont impliquées dans les scénarios suivants. Justifiez votre réponse pour chaque scénario (1-4 phrases). N oubliez aucune technologie même si elle vous semble trop évidente. Pour tous les cas, le CSS est suggéré pour l affichage mais non obligatoire (les styles peuvent être imbriqués dans les tags) Page 6 de 8
a) (0.5 pt) Olivier tape http://www.erepublik.com dans la barre d adresse de son fureteur web. Il est automatiquement redirigé vers http://www.erepublik.com/en. Une page web s affiche avec une barre de menu, 3 colonnes, et du texte formaté. Strict minimum : HTTP + mention de la redirection Suggéré : système d affichage de la page (php, css, etc..) b) (0.5 pt) Olivier est sur la page d inscription du site. Il entre ses coordonnées personnelles, clique sur le bouton *S inscrire* et une fenêtre pop-up apparaît : *Votre mot de passe doit contenir au moins 1 chiffre*. Strict minimum : Javascript ou expliquer le mécanisme de validation d une bonne façon. c) (1 pt) Olivier entre son nom d utilisateur et son mot de passe dans le formulaire d authentification du site. Il clique sur le bouton *S authentifier* et est automatiquement redirigé vers sa page personnelle avec ses statistiques et les nouvelles du jour de son pays. Strict minimum : HTTP + mention de la redirection, mécanisme pour les données du pays a Olivier. Suggeré : Sessions pour personnaliser la page d) (1 pt) Olivier veut acheter de l or avec sa carte de crédit sur le site de erepublik. Il clique sur le lien et est dirigé vers une section sécurisée et encryptée du site où on lui demande les informations de sa carte de crédit. Un petit cadenas avec un *tooltip* qui dit *Signed by Thawte Inc.* apparait dans un coin de son fureteur. Strict minimum : HTTPS pour sécurité et requête pour la section sécurisée, Certificats pour la signature web. e) (1 pt) Olivier s éloigne de son ordinateur pendant 30 minutes pour se faire un sandwich au pain. À son retour, il clique sur un bouton et est automatiquement redirigé vers la page d accueil de erepublik et on lui demande de s authentifier à nouveau. Strict minimum : HTTP et mention de la redirection sous une technologie de votre choix, Sessions pour l expiration. Suggeré : Cookies pour vraiment bien faire fonctionner les sessions, PHP pour gérer le code de la session... f) (1 pt) Olivier veut acheter un pistolet sur la place du marché de erepublik. Il clique sur le lien *Marché* de la page, et une routine s exécute pour afficher tous les pistolets en vente dans son pays (voir image). Page 7 de 8
g) (1 pt) Olivier tape http://moodle.polymtl.ca dans son fureteur web pour mettre à jour les informations de l examen intra de LOG4420 sur le site. Il est automatiquement redirigé vers une version sécurisée du serveur Moodle de Polytechnique avec un petit cadenas *Signed by Entrust Inc* dans un coin du fureteur. Il s authentifie sur le site, accède à la page de LOG4420 où la liste des semaines du cours s affiche. Olivier ayant droit aux actions d administrateur du site, des liens spéciaux uniquement pour lui s affichent sur la page. En cliquant sur *Ajouter un fichier*, une nouvelle page est chargée où Olivier pourra téléverser son fichier sur le serveur. Strict minimum : HTTP pour requête initiale + redirection, HTTPS pour la sécurité et requêtes sur le site subséquentes, Certificats pour la signature Entrust, Sessions pour le contenu personnalisé. Suggéré : Cookies et PHP pour bien entourer la session Page 8 de 8
Question 4) Compréhension générale (2 points) Pascal utilise fréquemment le site www.google.com. Afin d en analyser le code source, il enregistre la page complète sur son disque dur local. Il remarque que le répertoire de la page, sur son disque, a une taille de 402K. En analysant son trafic web, Pascal est étonné de remarquer que, lorsqu il accède au site www.google.com à nouveau, que seulement 7K de données lui sont transmises par le serveur web. Donnez DEUX raisons pour expliquer ce phénomène (2-3 phrases par raison seront suffisantes). 1) contenu de la page (images, JS, CSS) en cache, pas téléchargé lors de requêtes subséquentes. 2) La réponse HTTP est compressée en GZIP Page 9 de 8
Autres réponses acceptées : contenu d un site tiers téléchargé non surveillé par l analyseur de trafic google.com Page 10 de 8