Sujet deuxième session 17 juin 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.
- Home
- About
- Contact
Bienvenue

Cliquez sur les pour exécuter les actions.

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>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
  <nav>
    <div class="nav">
      <h2>Nav 1</h2>
      <p><a href="1">Link 1</a></p>
      <p><a href="2">Link 2</a></p>
      <p><a href="3">Link 3</a></p>
    </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>
  </nav>
  <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 :

ul li,
div.nav > a,
nav, .nav,
#nav,
a[href],
[type="input"],
input#login,
h1 ~ *.

JavaScript et DOM (4 points)

Considérez l’extrait HTML suivant

<dl id="dict">
  <dt>A</dt><dd>Lorem Ipsum</dd>
  <dt>B</dt><dd>Lorem Ipsum</dd>
  <dt>C</dt><dd>Lorem Ipsum</dd>
  <dt>D</dt><dd>Lorem Ipsum</dd>
</dl>
<button id="toggle">Toggle</button>

Sans toucher au code HTML, écrivez du code JavaScript qui, à chaque clic du bouton, affiche ou cache alternativement les balises <dd>.

AJAX et JSON (5 points)

On suppose qu’on a une base de données MySQL contenant la table matchs :

id	date	lieu	hote	adversaire	arbitre
1000	2014-05-10T20:30:00+02:00	CSS Arena	Olympique Json	AFC Ajax	Charles REST

Écrivez un gestionnaire pour l’URL /equipe/{x} qui prend en paramètre une chaîne x, et qui répond avec la liste au format JSON de tous les matchs de l’équipe x, ordonnés par date.

Considérez le code HTML suivant

<ul id="equipes">
  <li><a href="/equipe/Olympique JSON">Olympique JSON</a></li>
  <li><a href="/equipe/AFC Ajax">AFC Ajax</a></li>
  ...
</ul>
<table id="calendrier">
  <thead>
    <th><td>Adversaire</td><td>Date</td><td>Arbitre</td></th>
  </thead>
  <tbody></tbody>
</table>

Écrivez du code JavaScript qui, lorsque on clique sur l’un des liens de la liste, envoie une requête AJAX à l’URL correspondante et affiche le résultat dans le corps du tableau calendrier.

Applications multi-utilisateurs (5 points)

Concevez une simple application de vote électronique. Le clients doivent être authentifiés et ont droit à un seul vote. Les clients doivent pouvoir :

se connecter avec leurs identifiants ;
visualiser la liste des candidats et leur score ;
voter pour un candidat, s’ils n’ont pas déjà exprimé leur préférence.

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 ce gestionnaire

app->post('/url/{x}/{y}', function(Application $app, $x, $y) {
	if ($app['db']->execute('UPDATE table SET y=? WHERE x=?', array($x, $y)))
		return 'OK';
	else
		return 'Error';
});

Expliquer pourquoi il est vulnérable aux attaques CSRF.
Expliquer quel est l’impact de la politique CORS sur ces attaques.
Expliquer quelles contre-mesures permettent de mitiger ces attaques, et montrer comment les mettre en œuvre.