Sujet première session 7 mai 2014

Vous devez répondre à ces questions en vous basant sur les technologies vues en cours : HTML, CSS, Twig, PHP, Silex, JavaScript, Node.js, JQuery, MySQL, … Lorsque plusieurs technologies permettent d’obtenir le même résultat (par exemple, Silex vs Node.js), vous êtes libres de choisir la technologie que vous préférez.

Durée 2h. Seuls documents autorisés : vos notes sur le pré-sujet.

HTML et CSS (4 points)

Donnez du code HTML et CSS permettant de générer le même affichage que dans l’encadré ci-dessous.
Liens
- A
- B
Mode d’emploi

Cliquez sur les icônes pour accéder aux documents.
Copyright 2014
Ne vous servez pas de la balise <table>. Évitez toute directive d’affichage dans le code HTML. Écrivez du code valide.

Considérez le code HTML suivant

<body>
  <ul id="menu">
    <li class="odd">One</li>
    <li class="even">Two</li>
    <li class="odd">Three</li>
  </ul>
  <div id="nav">
    <div class="nav">
      <h2>Nav 1</h2>
      <h3 class="odd">Link 1</h3>
      <h3 class="even">Link 2</h3>
      <h3 class="odd">Link 3</h3>
    </div>
    <div class="nav">
      <h2>Nav 2</h2>
    </div>
    <div class="nav">
      <form id="login">
        <input id="text" type="text" title="Insert text">
        <input id="number" type="text" title="Insert number">
        <input type="submit">
      </form>
    </div>
  </div>
  <div id="main">
    <h1>Lorem Ipsum</h1>
    <h2>dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.</h2>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
      laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit
      esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>
</body>

Indiquez à quels éléments correpondent les sélecteurs CSS suivants :

h1 > h2,
h2 + h3, h2 ~ h3,
.menu li,
li.menu,
#nav :first-child,
.nav:first-child,
h2#main,
p:first-letter.

JavaScript et DOM (4 points)

Considérez l’extrait HTML suivant

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>
<button id="Cycle">Cycle</button>

Sans toucher au code HTML, écrivez du code JavaScript qui, à chaque clic du bouton, prend le dernier élément de la liste et le met en première position.

AJAX et JSON (4 points)

Comme dans le pré-sujet, on suppose qu’on a une base de données MySQL contenant trois tables francais, english et italiano :

id	term
1	banane
2	pomme
3	poire

id	term
1	banana
3	pear
2	apple

id	term
2	mela
1	banana
3	pera

Considérez le code HTML suivant

<form id="traduction">
  Traduire : <input type="text" name="texte" id="texte" /><br />
  De :
  <input type="radio" name="from" value="en" />English
  <input type="radio" name="from" value="fr" />Français
  <input type="radio" name="from" value="it" />Italiano<br />
  Vers :
  <input type="radio" name="to" value="en" />English
  <input type="radio" name="to" value="fr" />Français
  <input type="radio" name="to" value="it" />Italiano
</form>
<div id="resultat"></div>

Écrivez un gestionnaire pour l’URL /translate qui prend en paramètre (par le querystring) un mot, une langue de départ et une langue d’arrivée, et qui répond avec la traduction du mot, ou une erreur si le mot n’est pas dans la base. La réponse doit être au format JSON.
Écrivez du code JavaScript qui, à chaque fois que l’un des champs du formulaire change (événement change), fait une requête AJAX à /translate. Si /translate envoie un résultat positif, il l’affiche dans le div resultat.

Applications multi-utilisateurs (5 points)

Concevez une simple site de bookmarking social, c’est à dire un site qui permet aux utilisateurs de poster des liens et de voter les liens postés par les autres utilisateurs. Pour simplifier, on va se passer de comptes d’utilisateurs.

Les clients doivent pouvoir :

Poster un nouveau lien (les liens sont uniquement identifiés par leur URL) ;
Voter un lien (aime/n’aime pas) posté par un utilisateur quelconque ;
Suivre en temps réel les liens postés par tous les utilisateurs, et leur score (nombre de votes positifs et négatifs).

Décrivez les routes de l’application, la structure de la base de données, et les vues (templates). Donnez ensuite les parties principales du code (i.e., pas la peine de recopier la configuration de la base de données, par contre le code des gestionnaires est intéressant).

Sécurité (5 points)

Considérez le template suivant (fichier login.html)

<head>
 <style>
   @import url("{{ userstyle | raw }}");
 </style>
</head>
<body>
  <form id='login'>
	<input type="text" name="login"/>
	<input type="password" name="pwd"/>
	<input type="submit"/>
  </form>
</body>

utilisé par le gestionnaire suivant

$app->get('/login', function(Application $app) {
  /* ... */
  return $app['twig']->render("login.html", array(
    "userstyle" => $app->request->get('userstyle');
  ));
});

Expliquez en détail comment un attaquant peut monter une attaque XSS pour récupérer le login et le mot de passe saisis par la victime.