Skip to content

Latest commit

 

History

History
212 lines (174 loc) · 5.26 KB

exam-2014-2.md

File metadata and controls

212 lines (174 loc) · 5.26 KB
Raw
layout title subtitle
tutorial
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)

  1. Donnez du code HTML et CSS permettant de générer le même affichage que dans l'encadré ci-dessous.

    <style> #html-page { width: 90%; margin: auto; border: solid thin black; border-radius: 5px; padding: 1em; } #html-page nav ul { list-style-type: none; } #html-page nav li { display: inline-block; border-bottom: solid thick black; margin: 0 10x; padding: 1px 20px; } #html-page footer { border-top: solid thin black; text-align: center; margin: 0; } </style>
    * [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.

  2. 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 :

<style> table.inline { display: inline-table; margin: 0 2em; } </style>

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

  1. É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.

  2. 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';
});
  1. Expliquer pourquoi il est vulnérable aux attaques CSRF.
  2. Expliquer quel est l'impact de la politique CORS sur ces attaques.
  3. Expliquer quelles contre-mesures permettent de mitiger ces attaques, et montrer comment les mettre en œuvre.