Vous êtes sur la page 1sur 81
MINISTERE DE L’ ENSEIGNEMENT SUPERIEUR DE LA RECHERCHE SCIENTIFIQUE ET DE LA TECHNOLOGIE UNIVERSITE TUNIS

MINISTERE DE L’ENSEIGNEMENT SUPERIEUR DE LA RECHERCHE SCIENTIFIQUE ET DE LA TECHNOLOGIE

UNIVERSITE TUNIS AL MANAR

SCIENTIFIQUE ET DE LA TECHNOLOGIE UNIVERSITE TUNIS AL MANAR Code : SSICE24 MEMOIRE DE MASTERE Présenté

Code : SSICE24

DE LA TECHNOLOGIE UNIVERSITE TUNIS AL MANAR Code : SSICE24 MEMOIRE DE MASTERE Présenté en vue

MEMOIRE DE MASTERE

Présenté en vue de l’obtention du Mastère Professionnel en Informatique

Spécialité :

Sécurité des Systèmes Informatiques communicants et Embarqués (SSICE)

Conception et développement d’une application web sécurisée

Réalisé par :

Marwa SFARI

Encadré par :

Monsieur Mejdi CHEBBI

Madame

Sonia BEN REJEB CHAOUCH

Société d’accueil HedylSystems

Directeur adjoint Maître-Assistante

Année Universitaire 2012/2013

Dédicaces

Avant tout, mes vifs remerciements sont destinés à DIEU qui m’a guidée et tant protégée.

A ma mère Leila

Pour tous les sacrifices qu’elle m’a prodiguée, toute la confiance qu’elle m’accordée et tout l’amour dont elle m’entoure en témoignage de mon profond amour et de mon incontestable reconnaissance.

A mon père Khaled

Qui a attendu avec patience les fruits de sa bonne éducation, Je ferais de mon mieux pour rester un sujet de fierté à ses yeux avec L’espoir de ne jamais le décevoir.

A mon frère et mes sœurs

Mohamed Ali, Manel et Malek en leurs espérant le plein succès et le bonheur dans leur vie en gage de mon grand amour et respect.

A mes très chers amis

Merci !!!

Marwa,

plein succès et le bonheur dans leur vie en gage de mon grand amour et respect.

Remerciement

Nous exprimons notre gratitude à toutes les personnes qui nous ont aidés à accomplir notre tâche dans de bonnes conditions et qui ont su nous accorder toute l’attention nécessaire pour élaborer le présent travail malgré leurs emplois de temps fort chargés.

Nous tenons à remercier notre encadreur du centre Monsieur Mejdi CHEBBI, directeur adjoint chez HedylSystems, pour son aide, ses conseils précieux, ses critiques constructives et ses suggestions pertinentes qui ont été remarquables tout au long de notre stage.

Nous adressons aussi nos remerciements les plus sincères à Madame Sonia BEN REJEB CHAOUCH, maître assistante à l’ISI, qui, malgré ses multiples engagements, a accepté de se mettre à notre service en dirigeant avec d’extrême magnanimité notre travail.

Finalement, Nous exprimons nos sincères reconnaissances à l’égard de tous ceux qui ont contribué à notre formation, particulièrement les enseignants de l’Institut Supérieur d’informatique.

Table des matières

Introduction générale

1

Chapitre I : Cadre du travail et étude de l’existant

3

I.

Introduction

4

II.

Présentation de l’organisme d’accueil

4

II.1.

Présentation

4

II.2.

Organisation générale

5

III.

Présentation du travail

5

III.1.

Description du projet

5

III.2.

Objectif de projet

6

IV.

Etude de l’existant

7

V.

Spécification des besoins

7

VI.

solution proposée

8

VII.

Conclusion

10

Chapitre II : Etude des applications web

11

I. Introduction

12

II. Les Application web

12

 

II.1.

définition

12

II.2.

Technique de base

12

III. Sécurité des applications web

13

 

III.1.

Les bases de la sécurité des applications Web

13

III.2.

Types de vulnérabilités des applications Web

13

IV. Les langages de programmation

15

 

IV.1.

Les langages serveur

15

IV.2.

Les langages clients

17

V.

Les Outils de développements

18

V.1. Les Framework

18

V.2. Les éditeurs

21

VI.

Conclusion

22

Chapitre III : Etude conceptuelle

23

II.

Choix du modèle de conception

24

III. Définition du Langage UML

24

IV. Diagramme de cas d’utilisation

25

IV.1.

Identification des acteurs du système

25

IV.2.

Cas d’utilisation

26

IV.2.1 Diagramme de cas d’utilisation

26

IV.2.2 Description textuelle

26

V. Diagramme de classe

27

V.1.

Définition

27

V.2.

Diagramme de classe

27

VI.

Diagramme de séquence

28

VI.1.

Définition

28

VI.2.

Différents diagrammes de séquence

29

VI.2.1

VI.2.2.

Authentification

29

Passage d’évaluation

30

VI.2.3.

VI.2.4.

VI.2.5.

VI.2.6.

Création d’évaluation

31

Gestion de cours

32

Gestion de groupes

33

Gestion de séances

33

VII.

Conclusion

34

Chapitre IV : Développement d’une application web sécurisée

35

I. Introduction

36

II. Choix du langage et des outils de travail

36

III. Préparation de l’environnement de travail

38

III.1.

Installation des outils de développement

38

III.1.1.

III.1.2.

III.1.3.

III.1.4.

Installation de WampServer

38

Installation de PEAR

38

Installation de Symfony2

39

Installation de Netbeans

40

III.2.

Création de notre projet Symfony2

41

III.3.

Création du Bundle

42

IV. Développement de l’application web

43

IV.1.

Préparation de la maquette et mise en œuvre

43

IV.2.

Phase du développement

44

IV.2.1.

IV.2.2.

IV.2.3.

IV.2.4.

Les routes

44

Le contrôleur

45

Les templates

46

La page de contact

48

IV.2.5.

Les formulaires

50

V.

Sécurité de l’application web « HedylSystems »

52

V.1.

V.2.

Menaces et risques applicatifs

52

Méthodes de sécurité

53

V.2.1.

V.2.2.

V.2.3.

V.2.4.

V.2.5.

V.2.6.

Attaque par injection SQL

53

Attaque CSRF

54

Attaque XSS

55

Les saisies automatisées

56

Encodage des mots de passe

57

Attaque de l’homme de milieu

59

VI.

Test et validation de l’application « HedylSystems »

61

VII.

Conclusion

66

Conclusion générale

67

Netographie

69

Table des figures

Figure 1. Organigramme de centre de formation HedylSystems

5

9

Figure 3. Diagramme de cas d'utilisations de l’application

26

Figure 4. Diagramme de classe

28

Figure 5. Diagramme de séquence : authentification

30

Figure 6. Diagramme de séquence : passage de quiz par apprenant

31

Figure 7. Diagramme de séquence: Création de quiz par un formateur

32

Figure 8. Diagramme de séquence: gestion cours par administrateur

32

Figure 9. Diagramme de séquence : gestion de groupe par administrateur

33

Figure 10. Diagramme de séquence : gestion des séances par admin/formateur

33

Figure 11. Installation de WampServer

38

Figure 12. Ajout de la variable d'environnement

39

Figure 13. Installation de Symfony

40

Figure 14. Installation de NetBeans

40

Figure 15. Implémentation de symfony2

41

Figure 16. Création du dossier de travail

41

Figure 17. Choix du Framework Symfony2

42

Figure 18. Création du bundle

42

Figure 19. Résultat de la création du bundle

43

Figure 20. Maquette du site web

43

Figure 21. Parameters.yml

44

Figure 22. Les routes

44

Figure 23. Les contrôleurs

45

Figure 24. Template de base

46

Figure 25. Template du bundle

47

Figure 26. Template de page

48

Figure 27. Route vers la page contact

48

Figure 28. L'entité contact

49

Figure 29. Paramètres du Swift Mailer

49

Figure 30. Action du template contact

50

Figure 31. Template du message contact

50

Figure 32. FormBuilder du formulaire d'inscription

51

Figure 33. Template du formulaire d'inscription

51

Figure 34. Annotation pour la validation du formulaire

52

Figure 35. Solution contre l'injection SQL

54

Figure 36. Solution contre l'attaque CSRF

54

Figure 37. Contrôle des champs non-rendus

55

Figure 38. Solution contre l'attaque XSS

56

Figure 39. Ajout du module Captcha

57

Figure 40. Paramètres du Captcha

57

Figure 41. Ajout du champ Captcha

57

Figure 42. Encodage des mots de passe

58

Figure 43. Enregistrement du mot de passe haché

58

Figure 44. Récupération de l'objet utilisateur

59

Figure 45. Connexion via HTTPS

60

Figure 46. Ajout de l'extension php_openssl

60

Figure 47. Installation d'openssl

61

Figure 48. Vérification de l'installation d'openssl

61

Figure 49. Certificat obtenu

61

Figure 50. La page contact

62

Figure 51. Message-flash

62

Figure 52. Message reçu à partir de la page contact

62

Figure 53. Test des champs vides

63

Figure 54. Validation des données de formulaire

63

Figure 55. Enregistrement d'un membre

64

Figure 56. Vérification du mot de passe haché

64

Figure 57. Authentification d’utilisateur réussi

64

Figure 58. Visionner une video

65

Figure 59. Commenter une video

65

Liste des tableaux

Tableau 1. Comparatifs des éditeurs

21

Acronymes

API

Application Programming Interface

CMS

Content Management System Cross-Site Request Forgery

CSRF

CSS

Cascading Style Sheets

HTML

HyperText Mark-Up Language HyperText Transfer Protocol

HTTP

HTTPS

Hypertext Transfer Protocol Secure

JDK

Java Development Kit

lDAP

Lightweight Directory Access Protocol

MTV

Model - Template - View Model - View Controller

MVC

ORM

Object relational mapper

PHP

Hypertext Preprocessor

SQL

Structured Query Language Server-Side Include Secure Sockets Layers

SSI

SSL

UML

'Unified Modeling Language Uniform Resource Locator

URL

W3C

World Wide Web Consortium

WYSIWYG What-You-See-Is-What-You-Get

XML

Extensible Markup Language Cross-Site Scripting

XSS

YAML

Yet Another Multicolumn Layout

Introduction générale

Le domaine du développement web évolue chaque année avec des nouvelles

technologies et de plusieurs manières afin de satisfaire les internautes. Selon l’organisme de normalisation W3C les applications web sont définit comme des applications basées sur le protocole http qui peuvent interagir avec d’autre applications du type Web ou autres.

Le web est un lieu qui nous permet d’échanger des données et des informations, mais il est également devenu un marché pour le commerce électronique (e-commerce). Les acteurs de ce marché ont besoin alors de la sécurité sous tous ses aspects, tels que définit par L’ ANSSI, la protection de la confidentialité, de l’intégrité et de la disponibilité de l’information.

Ces applications sont composées d’un ou plusieurs scripts qui reçoivent des données envoyées par un internaute, les traitent et produisent une réponse spécifique à la demande de l’internaute. Ces types applications sont courantes sur Internet, tels que les systèmes d’inscriptions à des conférences, les forums, les sites de formation en ligne, etc.

Dans cette perspective, le centre de formation HedylSystems nous a chargés de concevoir et de développer une application web avec un nouveau Framework PHP et en utilisant des nouvelles technologies de développement, pour permettre à leurs membres de suivre une formation en ligne, tout en assurant un niveau de sécurité suffisant pour l’application web développée.

Le présent rapport va permettre de décrire les étapes de développement de notre application. Il sera organisé sous forme de quatre chapitres.

Le premier chapitre présentera les concepts généraux de notre travail ainsi qu’une représentation de l’organisme d’accueil « HedylSystems », par la suite, nous aborderons une étude de l’existant pour mieux cerner notre problématique et dans laquelle on citera les différentes difficultés rencontrées par le centre de formation, afin de construire l’architecture de la solution.

Le second chapitre abordera une étude sur les applications web, les attaques les plus connues et les plus fréquentes propre aux applications web, Nous exposons aussi les

différentes technologies existantes concernant les langages de développement, les Frameworks et les éditeurs, pour pouvoir en choisir les mieux adaptées

Le troisième chapitre comportera une étude conceptuelle détaillée et adoptée dans le développement de l’application, tout en se basant sur la spécification des besoins présenté dans le chapitre qui précède.

Finalement, le quatrième chapitre illustrera l’approche qu’on propose pour réaliser et mettre en œuvre une application fonctionnelle dont nous détaillons les différentes astuces pour y aboutir. Nous verrons par la suite les différentes méthodes et solutions de sécurité que nous allons adopter pour protéger notre application, et on terminera par un test pour valider le bon fonctionnement de notre projet.

Cadre du travail et étude de l’existant C h  Introduction a  présentation de
Cadre du travail et étude de l’existant C h  Introduction a  présentation de
Cadre du travail et
étude de l’existant
C
h
 Introduction
a
 présentation de l’organisme d’accueil
p
 etude de l’existant
i
 Spécification des besoins
t
r
 Solution proposée
e
 Conclusion
CADRE du travail et étude de l’existant 2013 I. Introduction
CADRE du travail et étude de l’existant
2013
I.
Introduction

Dans cette partie nous allons commencer par présenter le centre de formation HedylSystems et décrire notre sujet de stage et les objectifs fixés. Par la suite nous allons faire une analyse de l’existant, et une spécification des besoins dans laquelle nous citerons les besoins fonctionnels et non fonctionnels relatifs a notre projet.

II. Présentation de l’organisme d’accueil

II.1.

Présentation

Le centre de formation privé HEDYLSYSTEMS est un établissement de formation assurant un enseignement en alternance à des apprentis de toutes les catégories. Le centre peut offrir une formation polyvalente ou spécialisée menant aussi bien aux diplômes du CAP, du BTP ou du BTS. Il assure également des formations continues à des adultes en collaboration avec des grandes sociétés (SNTRI par exemple).

Les diplômes du HEDYLSYSTEMS sont homologués dans les spécialités suivantes :

- Informatique de gestion : diplômes homologués de la 3ème et 4ème catégorie

- Secrétariat : diplômes homologués de la 3ème catégorie

- Comptabilité d’entreprise : diplômes homologués de la 3ème catégorie

Le centre assure également des formations accélérées dans les domaines suivants :

- Informatique de base

- Langues

- Création site web

- Multimédia

- Création des logiciels

- Maintenance en informatique

- Maintenance des réseaux

- Fibre optique

- Réparation GSM

Projet Fin d’Etude – SFARI Marwa

4
4
2013 CADRE du travail et étude de l’existant II.2. Organisation générale L’organigramme de HedylSystems est
2013
2013

CADRE du travail et étude de l’existant

II.2.

Organisation générale

L’organigramme de HedylSystems est illustré par la figure suivante :

Directeur Général Walid Bellagha Directeur Adjoint Mejdi Chebbi Direction Responsable administratif et financier
Directeur Général
Walid Bellagha
Directeur Adjoint
Mejdi Chebbi
Direction
Responsable administratif et financier
Amira Fadhli
Formateurs Vacataires
Formateurs permanents
Zied Moujahed
Mejdi Chebbi
Amira Fadhli
Secrétariat
Hela Ferchichi
Adjoint de direction
Zied Moujahed

Figure 1. Organigramme de centre de formation HedylSystems

III. Présentation du travail

Le présent projet, intitulé « Développements d’une application web sécurisé » vient conclure notre formation de mastère professionnel en Sécurité des Systèmes Informatiques communicants et Embarqués. (SSICE). Il nous a été proposé par le centre de formation « Hedyl System ».

III.1.

Description du projet

Le développement web est un domaine très vaste comprenant tout les aspects de conception, et impliquant aussi plusieurs œuvres tels que, le développement du contenu du site, la connexion au serveur web, la gestion de la base de donnée et la sécurité du site.

Dans le cadre du stage de fin d’étude on se propose de réaliser une application web de formation en ligne présentant le centre de formation « hedylSystem » et assurant à un

Projet Fin d’Etude – SFARI Marwa

5
5
2013 CADRE du travail et étude de l’existant internaute qui veut suivre sa formation de
2013
2013

CADRE du travail et étude de l’existant

internaute qui veut suivre sa formation de s’inscrire à ce centre en toute sécurité et de choisir son type de formation, soit en local ou a distance.

III.2.

Objectif de projet

Afin d’améliorer l’image du centre, il est demandé de chercher des outils qui vont nous aider à développer une application web permettant de :

-offrir une formation a distance pour des internautes voulons se former en ligne. -autoriser les membres du centre de télécharger des cours, de contacter leurs formateurs et d’avoir un espace contenant leurs profils. -Assurer une bonne sécurité pour l’application.

Principales orientations du site

Site de formation : Ce site permet aux membres du centre de suivre une formation en local ou à distance, et d’avoir un espace membre contenant des supports de cours.

Principaux résultats attendues

- Améliorer l’image du centre.

- Apprentissage en ligne.

- Assurer une bonne sécurité du site.

- Inscription a distance fiable et sécurisé.

Les cibles visées

- Élèves,

- Etudiants

- Employés

- Retraités, etc.

Contenus

- Images,

- Vidéos,

- Photos,

Projet Fin d’Etude – SFARI Marwa

6
6
2013 CADRE du travail et étude de l’existant - Texte, - Fichier .doc, .PDF, etc.
2013
2013

CADRE du travail et étude de l’existant

- Texte,

- Fichier .doc, .PDF, etc.

IV. Etude de l’existant

Pas de maintenance de site site web vulnérable et non contrôle des données

Utilisation des outils simples comme les éditeurs de texte pour modifier les paramètres et absence des interfaces graphiques fonctionnels : Difficulté lors d’administration Perte de temps et possibilité d’erreurs.

Pas de contrôle d’accès à la base de données : Non contrôle des données Non fiabilité, possibilité de défaillance et perte de temps.

La formation est seulement en local.

V. Spécification des besoins

Dans cette partie nous allons nous intéresser à l’analyse des besoins et des objectifs de notre projet. C’est en tenant compte de ces besoins que nous allons faire la modélisation tout au long de la partie conceptuelle du projet, qui est la phase la plus importante dans le cycle de vie d’un projet.

Besoin Fonctionnels

C’est l’ensemble des actions effectuées par le système suite à une demande. Les besoins fonctionnels relatifs à notre projet sont :

Consultation de l’application web.

Gestion des membres inscrit dans le centre et des formateurs.

Vérification des comptes des utilisateurs.

Gestion de contenu de l’application (fichiers, vidéos, images, etc.) et de la base

de données.

Gestion des utilisateurs de l’application.

Contrôle de session.

Projet Fin d’Etude – SFARI Marwa

7
7
2013 CADRE du travail et étude de l’existant  Sécurité de l’application. Besoin non Fonctionnels
2013
2013

CADRE du travail et étude de l’existant

Sécurité de l’application.

Besoin non Fonctionnels

C’est l’ensemble des besoins d’utilisation, d’administration, de performance ou de sécurité

Les besoins non fonctionnels relatifs à notre projet sont :

Convivialité : l’internaute doit trouver une application élégante d’une part et simple à manipuler d’autre part.

Simplicité : le moindre de clics pour réaliser une action.

Sécurité : l’application doit fournir un maximum de sécurité au niveau de l’administration et des comptes utilisateurs. Le système doit être sécurisé, dans le sens d’assurer l’intégrité, la non-répudiation de l’information et la gestion fine des droits. Le système doit également assurer la sécurité des informations et du contenu de l’application.

Contrainte temporelle : la réalisation du projet doit être acheminée pendant trois mois.

Résultats attendus

Bon fonctionnement de l’application

Une bonne accessibilité pour les bénéficiaires

Une interface graphique convenable

VI. solution proposée

Nous

Structure de la solution

avons

présenté

dans

la

figure

ci-dessous

notre

développement de l’application de «HedylSystems».

Projet Fin d’Etude – SFARI Marwa

solution

proposée

pour

le

8
8
2013 CADRE du travail et étude de l’existant Acceuil Formulaire Présentation Formation Formation Formation
2013
2013

CADRE du travail et étude de l’existant

Acceuil Formulaire Présentation Formation Formation Formation Inscription Contact HTML5 HTML5 + HTML5 HTML5
Acceuil
Formulaire
Présentation
Formation
Formation
Formation
Inscription
Contact
HTML5
HTML5 +
HTML5
HTML5
PHP
twig
Swift Mailer
Script
Page administrateur
Base de
données
Page membre
Figure 2. Architecture globale de l'application

Présentation des éléments

Présentation : une page contenant toute les informations du centre « HedylSystems » et les formations qu’il offre.

Formation (Diplômantes, continues, pâtisserie) : Ce sont trois pages qui contiennent les spécialités offertes pour chaque type de diplôme.

Inscription : Ce menu est divisé en deux sous-menus :

Inscription homologué : Pour ceux qui désirent avoir une formation dans le local.

Inscription a distance : Pour ceux qui veulent suivre une formation en ligne.

Contact : Page contenant un formulaire de contact, pour les internautes qui veulent contacter l’administrateur.

Formulaire d’authentification : Un petit formulaire contenant deux champs de saisie :

login et mot de passe. Après la saisie du nom d’utilisateur et du mot de passe, l’utilisateur va être redirigé selon son rôle (administrateur ou membre), vers la page correspondante à son profil.

Page Administrateur : c’est une page d’administration permettant aux administrateurs du site de faire des modifications dans la base de données :

Projet Fin d’Etude – SFARI Marwa

9
9
2013 CADRE du travail et étude de l’existant  Ajouter, supprimer ou modifier des cours.
2013
2013

CADRE du travail et étude de l’existant

Ajouter, supprimer ou modifier des cours.

Ajouter ou supprimer des vidéos.

Activer ou désactiver des comptes utilisateurs.

Page membre : C’est l’espace pour les membres désirant suivre une formation à distance, cette page contient toutes les vidéos qui correspond a la formation dont le membre est inscrit et les cours à télécharger.

VII.

Conclusion

Ce chapitre nous a permis de connaître notre organisme d’accueil « HedylSystems» qui représente l’établissement bénéficiaire du projet.

Après avoir présenté le projet qui nous a été proposé par cette dernière, nous nous somme lancés dans l’étude de l’existant dans laquelle nous avons fait une description des problèmes et une représentation du système effectif et de ses limites. En se fondant sur la description du système actuel et l’analyse de ses points faibles, nous avons proposé une solution et des améliorations possibles, qui seront traiter et modéliser dans les chapitre qui suivent.

Projet Fin d’Etude – SFARI Marwa

10
10
Etude des applications web C h  Introduction a  Les applications web p 
Etude des applications web
C
h
 Introduction
a
 Les applications web
p
 Sécurité des applications web
i
t
 Les langages de programmation
r
 Les outils de développement
e
 Conclusion
Etude des applications web 2013 I. Introduction
Etude des applications web
2013
I.
Introduction

Un site web est un ensemble de pages liées entre elles, il peut être statique (page web simple) ou dynamique (lié a une base de donnée), et accessible via une adresse web (nom de domaine). De la même manière que les sites Web, une application Web est généralement placée sur un serveur et se manipule en actionnant des composants d'interface graphique à l’aide du navigateur.

II. Les Application web

II.1.

définition

applicatif manipulable grâce à un navigateur Web. De la même manière que les sites Web, une application Web est généralement placée sur un serveur et se manipule en actionnant des widgets à l'aide d'un navigateur Web, via un réseau informatique (Internet, intranet, réseau local, etc.).

une application

Web (aussi

appelée WebApp)

est

Les messageries web, les systèmes de gestion de contenu, les wikis, les blogs sont des applications Web.

Les moteurs de recherches, les logiciels de commerce électronique, les jeux en ligne, les logiciels de forum peuvent être sous forme d'application Web.

Les applications Web font partie de l'évolution des usages et de la technologie du Web appelée Web 2.0 [11].

II.2.

Technique de base

Dans la technologie client-serveur, utilisée pour le World Wide Web, le navigateur Web envoie au serveur des requêtes relatives à des pages Web. Le serveur répond aux demandes en envoyant les pages au navigateur Web. Le navigateur affiche alors les pages à l'utilisateur.

Les applications Web utilisent cette technique pour mettre en œuvre leur interface graphique. Celle-ci est composée de pages créées de toutes pièces par le logiciel lors de chaque requête. Chaque hyperlien contenu dans la page provoque l'envoi d'une nouvelle

Projet Fin d’Etude – SFARI Marwa

12
12
2013 Etude des applications web requête, qui donnera en résultat une nouvelle page. À la
2013
2013

Etude des applications web

requête, qui donnera en résultat une nouvelle page. À la différence d'un site web statique où les pages sont des fichiers préalablement enregistrés.

Les pages Web contiennent divers widgets tels des boutons poussoirs, des icônes et des zones de texte, permettant la manipulation de l'application. Chaque manipulation d'un bouton poussoir provoque l'envoi d'une nouvelle requête. Les pages Web peuvent contenir des applets.

Contrairement à d'autres logiciels, une application Web mise en place sur un serveur est immédiatement utilisable par le consommateur sans procédure d'achat et d'installation sur son propre ordinateur, du moment que l'ordinateur du consommateur est équipé d'un navigateur Web et d'une connexion réseau. Ceci évite des interventions des administrateurs système, interventions qui sont souvent plus coûteuses que le logiciel lui-même. L'application Web est souvent mise à disposition du consommateur par l'éditeur du logiciel sur ses propres serveurs2 - technique appelée Software as a Service [11].

III. Sécurité des applications web

III.1.

Les bases de la sécurité des applications Web

Les attaques contre les vulnérabilités des applications Web ont commencé à voir le jour en même temps qu’émergeait le Web, c’est-à-dire au milieu des années 1990. Ces attaques s’appuient généralement sur l’injection de fautes, une technique permettant d’exploiter les vulnérabilités de la syntaxe et de la sémantique d’une application Web. Avec un navigateur Web standard et une connaissance de base du protocole HTTP et du langage HTML, un pirate tente un exploit particulier en modifiant automatiquement un lien URI qui, à son tour, est capable de déclencher un exploit tel qu’une injection de code SQL ou du script intersites.

III.2.

Types de vulnérabilités des applications Web

Authentification vol des identités de compte utilisateur :

L’attaque par Force brute (ou Brute Force) automatise un processus d’essais et d’erreurs destiné à deviner le nom d’utilisateur, le mot de passe, le numéro de carte de crédit ou la clé cryptographique d’une personne.

Projet Fin d’Etude – SFARI Marwa

13
13
2013 Etude des applications web  L ’attaque par authentification insuffisante (ou Insufficient Authentication)
2013
2013

Etude des applications web

L’attaque par authentification insuffisante (ou Insufficient Authentication) permet

à un pirate d’accéder

authentification appropriée.

à

du

contenu ou

à

une

fonctionnalité sensible sans

La faiblesse de la validation de restauration du mot de passe (ou Weak Password

Recovery Validation) permet à un pirate d’obtenir, de modifier ou de récupérer de manière illégale le mot de passe d’un autre utilisateur.

Autorisation accès illégal à des applications

La prédiction de certificat/session (ou Credential/Session Prediction) est une méthode pour pirater ou dépersonnaliser un utilisateur.

L’attaque par expiration de session insuffisante (ou Insufficient Session Expiration) permet à un pirate de réutiliser des certificats ou des identifiants de session périmés pour bénéficier d’une autorisation.

Attaques côté client exécution illégale de code étranger

L’usurpation de contenu (ou Content Spoofing) leurre un utilisateur en lui faisant croire qu’un certain contenu s’affichant sur un site Web est légitime et qu’il ne provient pas d’une source externe.

Le script intersites (ou Cross-site Scripting - XSS) force un site Web à relayer le code exécutable fourni par un pirate et à le charger dans le navigateur Web de l’utilisateur.

Exécution de commandes prise de contrôle d’une application Web

Les attaques par débordement de la mémoire tampon (ou Buffer Overflow) altèrent le flux d’une application en écrasant certaines parties de la mémoire.

Les attaques par injection LDAP exploitent les sites Web en construisant des instructions LDAP à partir des informations saisies par l’utilisateur.

L’injection de code SQL construit des instructions SQL sur une application de site Web à partir des informations saisies par l’utilisateur.

L’injection SSI (Server-Side Include) envoie du code dans une application Web qui est ensuite exécutée localement par le serveur Web.

Projet Fin d’Etude – SFARI Marwa

14
14
2013 Etude des applications web IV. Les langages de programmation Tout site web, ou toutes
2013
2013

Etude des applications web

IV. Les langages de programmation

Tout site web, ou toutes pages web est conçue par un web master via un langage de

programmation adapté à l’internet. Les sites web évoluent chaque année avec des nouvelles

technologies et de plusieurs manières à fin de satisfaire les besoins des internautes.

Les langages utilisés sur le web sont nombreuses, mais chacun ayant ces utilités, ces

avantages et ces inconvénients, ils peuvent naturellement se séparer en deux grandes

catégories :

Les langages côté serveur

Les langages côté client

IV.1.

Les langages serveur

Ces langages servent à traiter la requête du client et préparer la réponse à envoyer, cette

réponse est sous forme d’une vue.

Il existe

de nombreux langages côté serveur mais nous allons citer seulement les plus

utilisés et présenter leurs avantages et inconvénients.

PHP

Langage utilisé par les plus grands CMS (wordpress, joomla, drupal, magento,…).

Avantages:

Maîtrise du fonctionnement et du code.

Le code source n'est pas visible.

Nombreuses interactions avec le serveur (bases de données, fonctions avancées d'images, de génération de pdf, d'exécution de scripts) [1].

Inconvénients:

Nécessite un serveur qui accepte le PHP.

Nombreuses failles de sécurité [1].

Projet Fin d’Etude – SFARI Marwa

15
15
 JAVA 2013 Etude des applications web Le langage de programmation Java surgit sur la

JAVA

2013
2013

Etude des applications web

Le langage de programmation Java surgit sur la grande scène d'Internet et obtient immédiatement un énorme succès. La prétention de Java est de constituer la colle universelle capable de connecter les utilisateurs aux informations, que celles-ci proviennent de serveurs Web de bases de données, de fournisseurs d'informations ou de toute autre source imaginable.

[2].

Avantages:

Bibliothèque d'exécution qui se veut indépendante de la plateforme.

Permet de faire des sites et applications web rapides et sécurisés.

Inconvénients:

Consommation еn ressourcеs assеz aléatoire.

L'application est n’еst pas forcément stable.

Il n’est pas simple de trouvеr un hébergeur accеptant autrе chose que le PHP.

ASP.net

ASP.NET a été développé par Microsoft et il est synonyme de pages de serveur actives. Il est utilisé pour créer des pages Web et des technologies. Il est une partie importante de Microsoft. Vision NET. Il est un instrument important pour les programmeurs car il construit des sites Web riches et dynamiques ainsi que des applications. [3]

Avantages:

Un code plus structuré grâce à la séparation du contenu HTML et de la cinématique.

séparation du contenu graphique et du code en deux fichiers distincts

Faciliter la réutilisation avec les contrôles utilisateur

Inconvénients:

Assеz compliqué à faire tourner sur Linux, et que la majorité des sеrvеurs tournent

sous linux.

Projet Fin d’Etude – SFARI Marwa

16
16
IV.2.  HTML 2013 Etude des applications web Les langages clients L’Hypertext Markup Language, généralement

IV.2.

HTML

2013
2013

Etude des applications web

Les langages clients

L’Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C’est un langage de balisage permettant d’écrire de lhypertexte, d’où son nom. [4]

Sans conteste le langage client phare pour les sites web, le HTML gère tout ce qui est mise en forme d'information (bien que le HTML5 tende à faire plus que de l'affichage). Il est composé d'un ensemble de balises, et qui ressemble au XML. Il est assez particulier car il n'est en réalité qu'un ensemble de règles énoncées par le W3C.

CSS

Le langage CSS (ou feuilles de style en cascade) est le format utilisé pour décrire la présentation de documents HTML.

Le CSS est donc un langage de présentation, permettant de créer un vrai design sur chaque page de votre site. Vous pourrez par exemple changer la taille, le positionnement, le style et la couleur de chaque élément de vos pages comme les titres, images, etc.

Tout en étant complémentaire au langage HTML, le CSS devient donc très vite indispensable si l'on veut réussir un design clair et personnalisé de ses pages web. [5]

JavaScript

Comme pour les deux précédents, le JavaScript est une interprétation de l'ECMAScript maintenu par le W3C. C'est le moyen de rendre dynamique des pages, en modifiant les propriétés HTML avec des transitions (pour faire de jolies animations, par exemple), effectuant des requêtes vers le serveur, discutant avec des éléments embarqués tels du flash, et autres. [6]

XML et JSON

Ces deux langages sont très éloignés l'un de l'autre dans la forme, mais ont des buts identiques: transmission d'informations et stockage.

Projet Fin d’Etude – SFARI Marwa

17
17
2013 Etude des applications web V. Les Outils de développements V.1. Les Framework  Django
2013
2013

Etude des applications web

V. Les Outils de développements

V.1.

Les Framework

Django

Django est un Framework open-source de développement web en Python. Il s'inspire du principe MVC ou MTV (la vue est gérée par un template) composé de 3 parties distinctes :

1) Un langage de templates flexible qui permet de générer du HTML, XML ou tout autre format texte ; 2) Un contrôleur fourni sous la forme d'un "remapping" d'URL à base d'expressions rationnelles ; 3) Une API d’accès aux données est automatiquement générée par le Framework compatible CRUD. Inutile d’écrire des requêtes SQL associées à des formulaires, les requêtes SQL sont générées automatiquement par l’ORM. [7]

Avantages:

Les vues génériques : il s'agit de vues permettant de traiter les cas les plus courants du développement web de manière très simple. Elles permettent par exemple de lister des objets avec une gestion de la pagination, de lister des objets organisés par date avec des URL du type (année)/(mois)/(jour)/élément à afficher.

Le système d'authentification

Les exceptions : les exceptions et backtraces Python sont bien gérées dans Django et apparaissent dans les pages d'erreur 500, en mode débogage. On peut avoir une bonne idée des variables d'environnement et du code ayant provoqué l'exception. Des efforts sont menés pour inclure d'autres outils comme par exemple la barre de débogage de Symfony (Django Debug Toolbar).

Inconvénients :

L'AJAX : Django en tant que framework ne permet pas, seul, l'intégration d'AJAX côté client web. Ceci est un choix de l'équipe de développement qui préfère laisser à

Projet Fin d’Etude – SFARI Marwa

18
18
2013 Etude des applications web l'utilisateur le choix de la bibliothèque AJAX à combiner avec
2013
2013

Etude des applications web

l'utilisateur le choix de la bibliothèque AJAX à combiner avec Django (MooTools,

Prototype, Mochikit, jQuery, dojo, ext, etc.).

Migrations : Il n'y a pas d'outil intégré au Framework pour gérer les migrations lors des

modifications des modèles.

Zend

Zend est un framework pour PHP 5 créé en mars 2006 par Zend Technologies. Il est

distribué sous la Licence BSD Modifiée. Le Zend Framework, aussi nommé ZF, a été

développé dans le but de simplifier le développement Web tout en recommandant les bonnes

pratiques et la conception orientée objets en offrant des outils aux développeurs. ZF permet

aussi d'utiliser nativement le principe de MVC (Modèle-Vue-Contrôleur) mais ne l'oblige pas

[8].

Avantages :

Librairie stable, simple et fiable

Un effort considérable a été produit sur les tests unitaires du Framework. Le Zend

Framework est une brique solide sur laquelle on peut baser ses développements

Le ZF a été conçu dans le souci d'extensibilité et de flexibilité

Inconvénients :

Bien que le Zend Framework soit un Framework complet, il possède cependant quelques limites :

- L'impact de l'utilisation de Zend Framework sur un serveur n'est pas négligeable

- Relativement compliqué à appréhender et bien comprendre son fonctionnement [9]

Prado

PRADO (PHP

Rapid

Application

un Framework libre écrit en PHP 5.

Development

Object-oriented)

est

PRADO redéfinit les applications Web en termes d'objets, d'évènements et de propriétés,

à la place de procédures, URL et requêtes. Développer une application Web PRADO

représente l'instanciation de composants de types précis, puis la configuration de leurs

Projet Fin d’Etude – SFARI Marwa

19
19
2013 Etude des applications web propriétés, et leur assemblage pour remplir une tâche. La liste
2013
2013

Etude des applications web

propriétés, et leur assemblage pour remplir une tâche. La liste suivante est un rapide résumé des principales fonctionnalités de PRADO :

Réutilisation : Le code provenant du protocole de composant PRADO est réellement

réutilisable. Cela bénéficie à l'équipe de développement dans le sens où ils peuvent réutiliser leur travail précédent afin de l'intégrer dans d'autres parties de façon aisée.

Facilité d'utilisation : Création et utilisation des composants sont extrêmement simples. Habituellement, ils impliquent simplement la configuration des propriétés des composants.

Performance : PRADO utilise une technique de cache pour garantir la performance des applications sur cette base. La performance est en fait comparable à ceux basés sur des moteurs de modèles couramment utilisés.

Symfony

Symfony est un Framework MVC libre écrit en PHP 5. En tant que Framework, il facilite et accélère le développement de sites et d'applications Internet et Intranet.

La qualité du code de Symfony le rend très adaptable :

le code est découplé

La séparation application / module permet de personnaliser facilement de nombreux paramètres

Symfony possède une importante communauté d'utilisateurs et de développeurs. De nombreux sites sont développés avec Symfony. Prévue fin 2013, se développe sous Symfony2.

L'équipe de développeurs Drupal justifie son choix par les éléments suivants :

Meilleure lisibilité du code induite par les règles Symfony 2,

Gestion directe des espaces de noms, dont l'absence jusqu'à Drupal 7 obligeait à l'usage

de noms préfixés et donc incommodes,

Projet Fin d’Etude – SFARI Marwa

20
20
2013 Etude des applications web  Importante communauté d'utilisateurs de Symfony 2, vivier de développeurs
2013
2013

Etude des applications web

Importante communauté d'utilisateurs de Symfony 2, vivier de développeurs Drupal

potentiels.

V.2.

Les éditeurs

Il existe plusieurs éditeurs de développement web, en mode code ou en mode WYSIWYG, bon ou moins bon. Ils existent également des éditeurs qui ne sont pas efficace en codage, ils font du code n’importe comment. Pour éviter ce genre d’éditeurs, On va commencer à faire une étude comparative pour éviter ce genre d’outils et prendre a la place des éditeurs plus efficaces et qui font du code propre, valide et lisible. Certains sont gratuits, d’autres payants, certain open source et d’autres non, le tableau ci-dessous illustre une étude comparative de tous ces éditeurs.

Editeur

Débogage

Vérification en

FTP

Support

Frameworks

Systèmes

Prix

temps réel

SQL/BDD

aptana

aptana    CodePhp Win/Linux Gratuit

 
aptana     CodePhp Win/Linux Gratuit

CodePhp

Win/Linux

Gratuit

Code Igniter

 

Smarty

codeLobster

codeLobster       Win Payant

 

 

Win

Payant

Dreamweaver

Dreamweaver     Win Payant

Dreamweaver     Win Payant
 

Win

Payant

Eclipse

 

 
Eclipse        Win/Linux Gratuit

 

Win/Linux

Gratuit

komodo

 

 

 

Win/Linux

Payant

Netbeans

 

 

Netbeans      Zend Win/Linux Gratuit

Zend

Win/Linux

Gratuit

Symfony

Notepad++

Notepad++     Win Gratuit

Notepad++     Win Gratuit
 

Win

Gratuit

PHPEdit

 

Symfony

Win

Payant

Prado

Zend Studio

 

Zend

Win/Linux

Payant

Tableau 1. Comparatifs des éditeurs

Projet Fin d’Etude – SFARI Marwa

21
21
VI. Conclusion 2013 Etude des applications web Au cours de ce chapitre nous avons fait

VI.

Conclusion

2013
2013

Etude des applications web

Au cours de ce chapitre nous avons fait une étude approfondie sur les applications web et leurs types de vulnérabilités.

Ensuite, nous avons menés une recherche sur les langages de programmations et les outils de développements existants qui peuvent nous être utiles pour le déploiement de notre solution.

Nous nous intéresserons dans ce qui va suivre à la spécification des besoins et la partie conceptuelle de ce projet.

Projet Fin d’Etude – SFARI Marwa

22
22
Etude conceptuelle C  Introduction h  Choix du modèle de conception a  Définition
Etude conceptuelle
C
Introduction
h
Choix du modèle de conception
a
Définition du Langage UML
p
i
diagramme de cas d’utilisation
t
Diagramme de classe
r
Diagramme de séquence
e
Conclusion
I. Introduction Etude conceptuelle 2013 Nous nous intéresserons dans ce chapitre à la partie conceptuelle

I.

Introduction

Etude conceptuelle

2013
2013

Nous nous intéresserons dans ce chapitre à la partie conceptuelle du projet. Nous allons modéliser notre système d’information respectant les règles et les contraintes fixées.

Nous allons procéder au choix de la méthode de conception adéquate permettant de modéliser au mieux le système d’information, il s’agit ensuite de déterminer les différents langages, techniques et outils à utiliser à fin de construire une solution sécurisée et avec minimum de risque.

II. Choix du modèle de conception

Après plusieurs recherches et études, nous avons constaté qu’il faut disposer d’un outil qui donne une dimension méthodologique à l’approche objet et qui permette de mieux maîtriser sa richesse. Notre choix était donc orienté vers une modélisation avec le standard« UML».

Par rapport à toutes les méthodes orientées objets qui sont en utilisation, seul UML a la capacité de satisfaire tous les besoins de conceptions requises par les entreprises et les boîtes informatiques.

En effet, il unifie les notations nécessaires aux différentes activités d’un processus de développement et offre en plus le moyen d’établir le suivi des décisions prises, depuis la spécification jusqu’au codage.

III. Définition du Langage UML

UML est une méthode de conception, de développement et de réalisation de projets informatiques, son but est d’arriver à concevoir un système d’information.

Elle est basée sur la séparation des données et des traitements à effectuer en plusieurs modèles conceptuels et physiques. La séparation des données et des traitements assure une longévité aux données. En effet, l’agencement des données n’a pas été souvent remanié, tandis que les traitements sont le plus fréquemment.

Projet Fin d’Etude – SFARI Marwa

24
24
Etude conceptuelle IV. Diagramme de cas d’utilisation 2013 Le diagramme de cas d’utilisation décrit le

Etude conceptuelle

IV. Diagramme de cas d’utilisation

2013
2013

Le diagramme de cas d’utilisation décrit le comportement au système appelé aussi use cases. Il sert à modéliser les fonctionnalités du système ayant une interface externe.

L’intérêt des Uses Cases est de traiter l’interaction des acteurs avec le système d’une manière formelle. Selon les cas d’utilisation, on peut déduire plusieurs scénarios dont leur détermination dépend essentiellement de ce qu’attend l’utilisateur du système.

IV.1.

Identification des acteurs du système

Le but de ce modèle est de présenter les différents besoins et facettes de l’application d’une façon formelle. Dans la modélisation, pour les cas d’utilisation, on distingue deux concepts fondamentaux : les acteurs et les cas d’utilisation.

Les acteurs sont les utilisateurs du système. Ils constituent les éléments extérieurs.

Les administrateurs

L’administrateur a pour rôle de gérer la base de données, de contrôler les compte des membres et de modifier le contenue de l’application.

Les formateurs

Le rôle des formateurs est de gérer les séances, faire des quiz et répondre aux messages des membres.

Les membres

Il existe deux types de membres :

- Les membres qui souhaitent faire une formation en local.

- Les apprenants qui veulent suivre une formation en ligne.

Les utilisateurs

Ce sont les internautes visitant le site du centre ou voulant contacter les administrateurs.

Projet Fin d’Etude – SFARI Marwa

25
25
IV.2. Etude conceptuelle Cas d’u tilisation IV.2.1 Diagramme de cas d’utilisation 2013 Dans ce qui

IV.2.

Etude conceptuelle

Cas d’utilisation

IV.2.1

Diagramme de cas d’utilisation

2013
2013

Dans ce qui suit nous allons modéliser les besoins étudiés par des diagrammes de cas d'utilisation traduisant en une représentation le comportement de notre application, telle qu’illustré à la figure 3.

de notre application, telle qu’illustré à la figure 3. Figure 3. Diagramme de cas d'utilisations de

Figure 3. Diagramme de cas d'utilisations de lapplication

IV.2.2

Description textuelle

Description textuelle du Diagramme cas d'utilisation général :

Acteur principale : Le visiteur

Projet Fin d’Etude – SFARI Marwa

26
26
Etude conceptuelle 2013 Objectif : Le visiteur doit connaître toutes les informations à propos du

Etude conceptuelle

2013
2013

Objectif : Le visiteur doit connaître toutes les informations à propos du centre, les formations offertes, et pouvoir contacter cet établissement.

Pré condition : Le site est accessible à tous les visiteurs.

Post condition : s’inscrire au centre.

V. Diagramme de classe

Le

diagramme de classes

représente

un

modèle UML très

important

puisqu’il

comporte les différentes classes composant le système.

V.1.

Définition

Un diagramme de classes est une collection d'éléments de modélisation statique

(classes, paquetages

),

qui montre la structure d'un modèle.

Le diagramme de classes exprime la structure statique du système. Il décrit l’ensemble des classes et leurs associations. Une classe décrit un ensemble d’objets (instances de la classe). Une association exprime une connexion sémantique bidirectionnelle entre classes. Elle décrit un ensemble de liens (instances de l’association). Le rôle décrit une extrémité d’une association. Les cardinalités (ou multiplicités) indiquent le nombre d’instances d’une classe pour chaque instance de l’autre classe.

V.2.

Diagramme de classe

Dans la figure présentée en titre précédent nous avons montré les étapes de conception de notre projet. Nous allons passer dans cette partie à une explication des étapes citées dans le schéma conceptuel ainsi qu'à une indication de leur succession dans l'algorithme de travail que nous avons envisagé, notre diagramme de classe est représenté par la figure ci-dessous.

Projet Fin d’Etude – SFARI Marwa

27
27
Etude conceptuelle 2013 Figure 4. Diagramme de classe VI. Diagramme de séquence Dans cette partie

Etude conceptuelle

2013
2013
Etude conceptuelle 2013 Figure 4. Diagramme de classe VI. Diagramme de séquence Dans cette partie nous

Figure 4. Diagramme de classe

VI. Diagramme de séquence

Dans cette partie nous allons présenter toutes les séquences déclenchées dans ce projet, la quantité de diagrammes à réaliser pouvait atteindre un nombre élevé dès lors que l'on souhaitait décrire avec un peu de détail les différentes branches comportementales d'une fonctionnalité.

VI.1.

Définition

Ce diagramme permet de représenter des collaborations entre objets selon un point de vue temporel, on y met l'accent sur la chronologie des envois de messages. Dans ce diagramme, on ne décrit ni le contexte ni l'état des objets, mais la représentation se concentre

Projet Fin d’Etude – SFARI Marwa

28
28
Etude conceptuelle 2013 sur l'expression des interactions. Il y a autant de diagrammes de séquences

Etude conceptuelle

2013
2013

sur l'expression des interactions. Il y a autant de diagrammes de séquences qu’il y a de scénarios. Un Scénario montre une séquence particulière d’interactions entre les objets, dans un seul contexte d’exécution du système. Un scénario peut être vu comme une des instances possibles des cas d’utilisation. On y fait intervenir des objets, des messages et des événements.

Les diagrammes de séquences peuvent servir à illustrer un cas d'utilisation.

L'ordre d'envoi d'un message est déterminé par sa position sur l'axe vertical du diagramme, le temps s'écoule "de haut en bas" de cet axe. La disposition des objets sur l'axe horizontal n'a pas de conséquence pour la sémantique du diagramme.

Un message définit une communication particulière entre des lignes de vie. Plusieurs types de messages existent, les plus communs sont :

L’envoi d’un signal

L’invocation d’une opération

La création ou la destruction d’une instance

VI.2.

Différents diagrammes de séquence

VI.2.1

Authentification

La figure ci-dessous montre la séquence d'authentification. C'est la première séquence déclenchée dans ce projet. L'utilisateur entrain de se connecter attend la réponse pour être redirigé vers la page d'accueil correspondante à son profil.

Projet Fin d’Etude – SFARI Marwa

29
29
Etude conceptuelle 2013 Figure 5. Diagramme de séquence : authentification VI.2.2. Passage d’évaluation Cette figure

Etude conceptuelle

2013
2013
Etude conceptuelle 2013 Figure 5. Diagramme de séquence : authentification VI.2.2. Passage d’évaluation Cette figure

Figure 5. Diagramme de séquence : authentification

VI.2.2.

Passage d’évaluation

Cette figure démontre le processus suivi par l'apprenant pour passer une évaluation (quiz). Ce processus ne se déclenche si, et seulement si, une évaluation est programmée pour le cours en question.

Projet Fin d’Etude – SFARI Marwa

30
30
Etude conceptuelle 2013 Figure 6. Diagramme de séquence : passage de quiz par apprenant VI.2.3.

Etude conceptuelle

2013
2013
Etude conceptuelle 2013 Figure 6. Diagramme de séquence : passage de quiz par apprenant VI.2.3. Création

Figure 6. Diagramme de séquence : passage de quiz par apprenant

VI.2.3.

Création d’évaluation

Cette séquence expose la manière avec laquelle un formateur crée un quiz. Il doit spécifier les questions, les propositions pour chaque question, et les bonnes réponses, ce scénario est illustré par la figure ci-dessous.

Projet Fin d’Etude – SFARI Marwa

31
31
Etude conceptuelle 2013 Figure 7. Diagramme de séquence: Création de quiz par un formateur VI.2.4.

Etude conceptuelle

2013
2013
Etude conceptuelle 2013 Figure 7. Diagramme de séquence: Création de quiz par un formateur VI.2.4. Gestion

Figure 7. Diagramme de séquence: Création de quiz par un formateur

VI.2.4.

Gestion de cours

Ce diagramme retrace le déroulement de la création des cours. Un cours contient plusieurs chapitres, et un chapitre contient plusieurs exercices.

chapitres, et un chapitre contient plusieurs exercices. Figure 8. Diagramme de séquence: gestion cours par

Figure 8. Diagramme de séquence: gestion cours par administrateur

Projet Fin d’Etude – SFARI Marwa

32
32
VI.2.5. Etude conceptuelle Gestion de groupes 2013 Cette séquence représente la procédure d’insertion des apprenants

VI.2.5.

Etude conceptuelle

Gestion de groupes

2013
2013

Cette séquence représente la procédure d’insertion des apprenants dans des groupes spécifiés. Cette tâche est effectuée par les administrateurs.

Cette tâche est effectuée par les administrateurs. Figure 9. Diagramme de séquence : gestion de groupe

Figure 9. Diagramme de séquence : gestion de groupe par administrateur

VI.2.6.

Gestion de séances

Ce diagramme explique comment est ce que les formateurs ou les administrateurs programment une séance. La disponibilité d’au moins un groupe, et au moins un cours est indispensable pour pouvoir créer une séance.

un cours est indispensable pour pouvoir créer une séance. Figure 10. Diagramme de séquence : gestion

Figure 10. Diagramme de séquence : gestion des séances par admin/formateur

Projet Fin d’Etude – SFARI Marwa

33
33
VII. Conclusion Etude conceptuelle 2013 Après avoir spécifié les besoins et les ensembles d’actions qui

VII.

Conclusion

Etude conceptuelle

2013
2013

Après avoir spécifié les besoins et les ensembles d’actions qui devrons être effectuées par notre système. Nous avons fait une étude approfondie de la solution comprenant une représentation de l'architecture globale du projet ainsi que la description des différentes étapes pour la réalisation de l’application, nous allons par la suite expliquer les différent tâches que nous allons appliquées dans un travail décrivant la mise en pratique des étapes citées.

Projet Fin d’Etude – SFARI Marwa

34
34
Développement d’une application web sécurisée C  Introduction h  Choix du langage et des
Développement d’une
application web sécurisée
C
 Introduction
h
 Choix du langage et des outils de travail
a
 préparation de l’environnement de travail
p
 développement de l’application web
i
t
 sécurité de l’application web « HedylSystems »
r
 test et validation de l’application
e
 Conclusion
I. Développement d ’ une application web sécurisée Introduction 2013 Ce chapitre comprendra deux parties,

I.

Développement dune application web sécurisée

Introduction

2013
2013

Ce chapitre comprendra deux parties, la première phase intègrera toutes les actions et les tests effectués pendant la réalisation du projet. Nous allons détailler la mise en pratique des différentes étapes que nous avons étudiées antérieurement. La seconde phase de ce chapitre relèvera de la mise en œuvre de la partie sécurité de notre application. Nous allons donc détailler les solutions et les méthodes appliquées pour aboutir à une application bien sécurisée.

II. Choix du langage et des outils de travail

Nous allons essayer d’expliquer pourquoi nous avons choisi de faire confiance à Symfony2 pour notre développement. Comme d’habitude dans ce genre de choix, les raisons sont bien évidemment multiples.

Voici néanmoins les principaux motifs qui ont guidé notre décision :

Les performances

En termes de performances, le monde PHP est bien évidemment en retard par rapport aux mondes Java et .Net. Néanmoins, Sensio semble avoir fait quelques choix très intéressants en termes de performances :

Tout est caché, même certaines parties de code (les annotations par exemple) sont cachées. Ce mécanisme permet une amélioration significative à la fois des performances brutes (temps de réponse) mais aussi de la montée en charge. Moins la machine passe de temps à répéter des calculs simples (lire un fichier de configuration), plus elle a de temps à passer à répondre à d’autres requêtes. Les templates Twig eux-mêmes sont “compilés” en PHP et cachés pour améliorer les performances du moteur de template dans lequel réside souvent, dans beaucoup de frameworks, la majorité des problèmes de performance.

Template

Une des autres forces de Symfony 2 est la présence d’un moteur de template. En plus d’être bien intégré au Framework sous la forme d’un service, il présente de nombreux avantages :

Projet Fin d’Etude – SFARI Marwa

36
36
Développement d ’ une application web sécurisée 2013  E n ne permettant pas au

Développement dune application web sécurisée

2013
2013

En ne permettant pas au développeur d’appeler du code natif, il permet de tester plus facilement les templates en moquant leurs dépendances. L’impossibilité d’appeler du code natif oblige aussi le développeur à laisser le logique métier dans la partie “Contrôleur” du MVC.

Puisque nous avons choisi d’utiliser symfony2 qui est un Framework PHP5, nous allons choisir un éditeur qui supporte ce Framework, donc nous avons choisis Netbeans puisqu’il est gratuit.

Concernant les langages clients, il y en a beaucoup qui sont indispensables et complémentaires au HTML, on va donc utiliser les dernières révisions pour ces langages, qui sont :

HTML5 : qui est la prochaine révision majeure d’HTML, et son nouveau standard. CSS3 :
HTML5
: qui est la prochaine révision majeure d’HTML, et son nouveau standard.
CSS3
: qui contient des nouveaux effets à appliquer sur nos éléments HTML.
JavaScript
: qui va rendre nos pages web plus dynamique et animé
Json
: pour la transmission de données
Twig
: qui est un langage de template très puissante, et qui nous permet d’écrire des

template simple et lisible, et dans bien des aspects il est plus puissant que le template PHP.

Nous allons utilisеr Twig comme motеur de tеmplate pour un cеrtain nombrе dе

raisons.

Rapide: Les tеmplatеs Twig sont compilés еn classеs PHP, il y a donc très pеu de

surchargе lors de l’utilisation des templatеs Twig.

Concis: Twig nous permеt de réalisеr les fonctionnalités liéеs au templatеs en très pеu de

codе. C’еst à comparеr avеc lе PHP, qui peut parfois s’avérеr très vеrbеux.

Supportes l’héritage de template: Lеs tеmplatеs ont la capacité d’étendrе еt surchargеr

d’autrеs templatеs, ce qui pеrmеt aux tеmplatеs еnfants de rеmplacеr cе qui été proposé par

défaut par lеs parents.

Projet Fin d’Etude – SFARI Marwa

37
37
Développement d ’ une application web sécurisée III. Préparation de l’environnement de travail III.1.

Développement dune application web sécurisée

III. Préparation de l’environnement de travail

III.1.

Installation des outils de développement

2013
2013

Les outils utilisés dans ce projet sont aux nombres de trois : Netbeans, WampServer, et

Symfony2.

III.1.1.

Installation de WampServer

L’installation de WampServer est très facile d’accès, il suffit de se rendre sur la page

officielle de WampServer, et télécharger la version adaptée a notre machine. Dans notre cas

nous allons télécharger la version 64bit et qui contient les dernières versions de PHP et

apache.

Au cours de l’installation nous allons laisser les configurations par défaut, comme c’est

montré dans la figure ci-dessous.

défaut, comme c’est montré dans la figure ci-dessous. Figure 11. Installation de WampServer III.1.2. Installation

Figure 11. Installation de WampServer

III.1.2.

Installation de PEAR

PEAR est une extension de PHP qui permet d’automatiser l’installation, la mise à jour

et la suppression de librairies PHP.

Nous allons procéder à l’installation de PEAR via l’invite de commande de Windows.

Projet Fin d’Etude – SFARI Marwa

38
38
Développement d ’ une application web sécurisée 2013 $cd C:\wamp\bin\php\ php5.3.13 $go-pear.bat Ensuite , nous

Développement dune application web sécurisée

2013
2013

$cd C:\wamp\bin\php\ php5.3.13 $go-pear.bat

Ensuite, nous allons configurer la variable d’environnement PATH de Windows. Cette variable, nous permettra dans ce cas présent d’exécuter symfony.bat en ligne de commande dans n’importe quel sous-dossier. La figure 12 montre la modification de la valeur de variable PATH:

;C:\wamp\bin\php\php5.2.8

de la valeur de variable PATH: ;C:\wamp\bin\php\php5.2.8 Figure 12. Ajout de la variable d'environnement

Figure 12. Ajout de la variable d'environnement

III.1.3.

Installation de Symfony2

L’installation de Symfony s’effectue aussi en ligne de commande :

Nous allons tout d’abord ajouter le canal Symfony en utilisant « channel-discover », et après on lancera l’installation de Symfony.

La figure ci-dessous présente les étapes d’installation de symfony2.

Projet Fin d’Etude – SFARI Marwa

39
39
Développement d ’ une application web sécurisée 2013 Figure 13. Installation de Symfony2 III.1.4. Installation

Développement dune application web sécurisée

2013
2013
Développement d ’ une application web sécurisée 2013 Figure 13. Installation de Symfony2 III.1.4. Installation de

Figure 13. Installation de Symfony2

III.1.4.

Installation de Netbeans

Maintenant que Wamp est installé, nous pouvons nous lancer dans celle de Netbeans. Pour cela, il est indispensable qu’un JDK de Java soit préalablement installé. Nous allons donc installer le dernier JDK disponible. Lors de l’installation du Netbeans on peut distinguer trois étapes importantes :

- Accepter les termes du contrat tel qu’illustré à la figure suivante :

du contrat tel qu’illustré à la figure suivante : Figure 14. Installation de NetBeans Projet Fin

Figure 14. Installation de NetBeans

Projet Fin d’Etude – SFARI Marwa

40
40
Développement d ’ une application web sécurisée - Choisir le dossier de destination de Netbeans

Développement dune application web sécurisée

- Choisir le dossier de destination de Netbeans

- Spécifier le chemin d’accès vers notre JDK java.

III.2.

Création de notre projet Symfony2

2013
2013

Pour créer un projet symfony2 sous NetBeans, il faut d’abord l’implémenter. Pour cela, commençant par télécharger une archive de la dernière version de symfony2, après nous allons intégrer cette archive a NetBeans, comme le montre la figure 15.

cette archive a NetBeans, comme le montre la figure 15. Figure 15. Implémentation de symfony2 Après

Figure 15. Implémentation de symfony2

Après cette étape, nous pouvons maintenant créer notre dossier de travail sous WampServer.

maintenant créer notre dossier de travail sous WampServer. Figure 16. Création du dossier de travail Enfin,

Figure 16. Création du dossier de travail

Enfin, choisir le Framework à appliquer : On choisit donc « Symfony2 PHP Web Framework », tel qu’illustré dans la figure ci-dessous.

Projet Fin d’Etude – SFARI Marwa

41
41
Développement d ’ une application web sécurisée 2013 Figure 17. Choix du Framework Symfony2 Voila,

Développement dune application web sécurisée

2013
2013
Développement d ’ une application web sécurisée 2013 Figure 17. Choix du Framework Symfony2 Voila, notre

Figure 17. Choix du Framework Symfony2

Voila, notre projet est maintenant créé, il ne reste plus qu’a créé le Bundle, c’est un élément essentiel dans l’utilisation de symfony2.

III.3.

Création du Bundle

Un bundle est un ensemble de dossiers et de fichiers qui représentent une fonction applicable à un site ou une application Web. En effet, comme nous l’avons vu, Symfony2 est un Framework modulable. Pour créer un bundle, nous allons passer par l’invite de commande, et saisir quelques lignes, comme c’est illustré dans les figures 18 et 19.

lignes, comme c’est illustré dans les figures 18 et 19. Figure 18. Création du bundle Projet

Figure 18. Création du bundle

Projet Fin d’Etude – SFARI Marwa

42
42
Développement d ’ une application web sécurisée 2013 Figure 19. Résultat de la création du

Développement dune application web sécurisée

2013
2013
Développement d ’ une application web sécurisée 2013 Figure 19. Résultat de la création du bundle

Figure 19. Résultat de la création du bundle

IV. Développement de l’application web

IV.1.

Préparation de la maquette et mise en œuvre

Après avoir réalisé l’arborescence de notre site web, nous avons commencé la phase de maquettage.

La figure ci-dessous présente l’utilisation de l’outil Photoshop pour le design de l’interface web.

de l’outil Photoshop pour le design de l’interface web. Figure 20. Maquette du site web Projet

Figure 20. Maquette du site web

Projet Fin d’Etude – SFARI Marwa

43
43
Développement d ’ une application web sécurisée 2013 Ensuite, nous avons passé à la phase

Développement dune application web sécurisée

2013
2013

Ensuite, nous avons passé à la phase de découpage, et pour cela nous avons utilisé du code HTML5, CSS3 pour le style de notre page, et du JavaScript pour les animations.

IV.2.

Phase du développement

Symfony2 propose une interface web pour configurer divers aspects du site web tel que la base de données. Pour ce projet nous allons avoir besoin d’une base de données. Nous avons choisi d’utiliser MySQL. La configuration est sauvegarder dans un fichier YAML «parameters.yml », tel qu’illustré dans la figure ci-dessous.

», tel qu’illustré dans la figure ci -dessous. Figure 21. Parameters.yml IV.2.1. Les routes L е

Figure 21. Parameters.yml

IV.2.1.

Les routes

Lе routagе est cе qui permet de faire lе lien entre un URL défini dans le navigatеur du

cliеnt et le contrôleur Bundle à appelеr. Il centralisе les différents liеns autorisés sur lе site et

retournе un code d'erreur 404 si le lien proposé n'y еst pas configuré.

Notre fichier de routage situé dans

/Resources/config/routing.yml

contient tout les

règles de routage, La figure 22 montre quelques routes ainsi que leur structure.

figure 22 montre quelques routes ainsi que leur structure. Projet Fin d’Etude – SFARI Marwa Figure

Projet Fin d’Etude – SFARI Marwa

Figure 22. Les routes

44
44
Développement d ’ une application web sécurisée 2013 Le routag е est composé d’un motif

Développement dune application web sécurisée

2013
2013

Le routagе est composé d’un motif et de paramètrеs par défaut. Le motif est comparé à

l’URL, les paramètrеs désignent quel contrôleur exécutеr lorsque la route est éligiblе.

Si une adressе valide tous les critèrеs précisés par une route, alors elle sera exécutée par

le contrôleur décrit dans l’option _controllеr. Cette option contient le nom logique du

contrôleur qui permеt à Symfony2 de l’associеr à un fichiеr spécifique.

IV.2.2.

Le contrôleur

Un contrôleur est une fonction PHP qui prend l'information provenant de la requête HTTP et construit puis retourne une réponse HTTP (sous forme d'un objet Symfony2). La réponse peut être une page HTML, un document XML, une image, une redirection, une erreur

404.

Le contrôleur contient n'importe quelle logique arbitraire, dont notre application a besoin pour retourner le contenu d'une page.

Dans notre projet nous avons utilisé plusieurs contrôleurs pour nos pages, tel qu’illustré dans la figure ci-dessous.

nos pages , tel qu’illustré dans la figure ci-dessous. Projet Fin d’Etude – SFARI Marwa Figure

Projet Fin d’Etude – SFARI Marwa

Figure 23. Les contrôleurs

45
45
Développement d ’ une application web sécurisée Comm е IV.2.3. Les templates Twig support е

Développement dune application web sécurisée

Commе

IV.2.3.

Les templates

Twig

supportе

l’héritagе

de

templatе,

nous

allons

mеttre

en

2013 place
2013
place

l’approche d’héritagе. Cette approche nous pеrmet de modifier la vue a plusieurs niveaux

distincts à l’intérieur dе l’application, ce qui pеrmet pas mal de pеrsonnalisation.

Template principale Nous allons commencer par créer le bloc de base du template pour notre application. Comme Nous allons commencer par créer le bloc de base du template pour notre application. Comme c’est montré dans la figure ci-dessous, nous avons utilisé trois fichiers, le template, son fichier « css » associée et le fichier « .js » qui contient le code JavaScript. Comme symfony2 supporte le HTML5, nous allons également nous en servir.

supporte le HTML5, nous allons également nous en servir. Figure 24. Template de base Template du

Figure 24. Template de base

Template du Bundleégalement nous en servir. Figure 24. Template de base Nous allons maint е nant avancer vers

Nous allons maintеnant avancer vers la création de la présentation pour lе bundle du

site.

Tout d’abord, il étеnd le template de base de notre application. Ensuite, il remplace le

bloc de la barre latérale «sidebar » avec un contenu factice, puisque cette barre va paraître

dans toutеs les pagеs.

Projet Fin d’Etude – SFARI Marwa

46
46
Développement d ’ une application web sécurisée 2013 Le bundl е devrait cont е nir

Développement dune application web sécurisée

2013
2013

Le bundlе devrait contеnir toutes ses fonctionnalités et affichеr la barre latérale fait

partie d’une de cеs fonctionnalités. Plus loin ce template du sеcond étage va nous donner de

la flexibilité pour ajoutеr de la pеrsonnalisation pour des bеsoins futurs et tous les templates

enfants en hériteront. Par exemple, nous pourrions vouloir afficher le piеd de page « footer »

sur toutеs les pages, et ce serait l’endroit idéal pour faire cеci.

Cette figure présente l’héritage du template « base.html.twig », en utilisant la balise extends.

« base.html.twig », en utilisant la balise extends. Figure 25. Template du bundle Template de page

Figure 25. Template du bundle

utilisant la balise extends. Figure 25. Template du bundle Template de page Ces templates vont étendre

Template de page

Ces templates vont étendre le template du bundle, ils représenteront le contenu de chaque page de notre site. L’appelle à ces pages se fait bien sûr grâce aux actions définis dans les contrôleurs spécifique à eux.

La figure ci-dessous, illustre l’utilisation de plusieurs templates qui seront appelé par des contrôleurs.

Projet Fin d’Etude – SFARI Marwa

47
47
Développement d ’ une application web sécurisée 2013 Figure 26. Template de page IV.2.4. La

Développement dune application web sécurisée

2013
2013
Développement d ’ une application web sécurisée 2013 Figure 26. Template de page IV.2.4. La page

Figure 26. Template de page

IV.2.4.

La page de contact

Nous allons commencer par définir la route vers la page de contact, comme le montre la figure suivante.

vers la page de contact, comme le montre la figure suivante. Figure 27. Route vers la

Figure 27. Route vers la page contact

La

règle associe le lien /contact

pour la méthode HTTP GET

| POST

et

exécute

l’action contact du contrôleur Contact dans le « HedylHedylBundle ».

du contrôleur Contact dans le « HedylHedylBundle ». L’entité contact Dans cette parti е nous allons

L’entité contact

Dans cette partiе nous allons créer notrе classе contact qui représente une requête de

contact. Nous voulons récupérеr des informations de basе telles que le nom, le sujеt de la

requête ainsi que le message que l’utilisateur souhaite envoyer.

Projet Fin d’Etude – SFARI Marwa

48
48
Développement d ’ une application web sécurisée Figure 28. L'entité contact Envoie d’email 2013 Symfony2

Développement dune application web sécurisée

Développement d ’ une application web sécurisée Figure 28. L'entité contact Envoie d’email 2013 Symfony2 est

Figure 28. L'entité contact

Envoie d’email

2013
2013

Symfony2 est livré avеc la librairie d’еnvoi d’email « Swift Mailer ». Il s’agit d’une

librairiе très puissantе, donc nous allons fairе les configurations nécessairеs.

Configuration des paramètres de Swift Mailer :

е s. Configuration des paramètres de Swift Mailer : Figure 29. Paramètres du Swift Mailer Modification

Figure 29. Paramètres du Swift Mailer

Modification du contrôleur :

Après la configuration du Swift Mailer, nous allons créer une action dans le contrôleur qui va permettre à l’utilisateur d’envoyer un mail au webmaster ou l’administrateur.

Projet Fin d’Etude – SFARI Marwa

49
49
Développement d ’ une application web sécurisée 2013 Figure 30. Action du template contact Création

Développement dune application web sécurisée

2013
2013
Développement d ’ une application web sécurisée 2013 Figure 30. Action du template contact Création du

Figure 30. Action du template contact

Création du template pour les emails :

Nous allons maintenant décrire le corps de l’email dans un template.

maintenant décrire le corps de l’email dans un template. Figure 31. Template du message contact Le

Figure 31. Template du message contact

Le contеnu de l’еmail est celui que l’utilisateur viеnt de soumettre.

IV.2.5.

Les formulaires

Dans notre application nous avons créé deux formulaires, un pour la page contact et l’autres pour l’inscription. Dans cette partie nous détaillerons un peu plus les étapes que nous avons suivies pour leur création.

les étapes que nous avons suivies pour leur création. EnquiryType Après avoir créé les deux entités

EnquiryType

Après avoir créé les deux entités correspondantes aux deux formulaires, nous avons passé à la classe EnquiryType qui va nous permettre de présenter la classe « FormBuilder ».

Projet Fin d’Etude – SFARI Marwa

50
50
Développement d ’ une application web sécurisée 2013 La classe « FormBuild е r »

Développement dune application web sécurisée

2013
2013

La classe « FormBuildеr »

est capable de simplifiеr le procеssus de définition des

champs à partir des métadonnées qu’un champ possède.

champs à partir des métadonnées qu’un champ possède. Figure 32. FormBuilder du formulaire d'inscription

Figure 32. FormBuilder du formulaire d'inscription

Figure 32. FormBuilder du formulaire d'inscription Affichage du formulaire Grâce à Twig, l’affichag е de

Affichage du formulaire

Grâce à Twig, l’affichagе de formulairеs est très simplе. Twig proposе en effet un

système par couchеs pour l’affichage de formulairеs qui pеrmеt soit d’affichеr un formulaire

comme unе unique entité, soit commе des éléments individuеls, sеlon le bеsoin de

pеrsonnalisation nécessaire.

s е lon le b е soin de p е rsonnalisation nécessaire. Figure 33. Template du

Figure 33. Template du formulaire d'inscription

Projet Fin d’Etude – SFARI Marwa

51
51
Développement d ’ une application web sécurisée 2013  La fonction form_errors affich е ra

Développement dune application web sécurisée

2013
2013

La fonction form_errors affichеra les erreurs du formulaire dans le cas où la validation

échoie.

La fonction form_row affiche lеs éléments liés à un champ. Cеla comporte toutеs les

erreurs associées au champ, l’étiquеttе liée au champ ainsi que l’élémеnt du champ de

formulaire lui même.

ainsi que l’élém е nt du champ de formulaire lui même. Les validateurs Les validat е

Les validateurs

Les validatеurs de Symfony2 pеrmеttеnt de validеr lеs données. La validation est une

tâchе courantе lorsqu’il est quеstion de validеr lеs données de formulaire. Cеttе tâche doit

être réalisée avant que lеs données ne soiеnt envoyées vеrs une base de données.

Ils nous pеrmеttеnt aussi de séparеr notre logique de validation dеs composants qui

pourraiеnt s’en servir, tеls que les composants de formulaire ou de base de données.

Ils existent plusieurs méthodes pour la validation comme les « metadata », mais nous, nous avons utilisé les annotations.

», mais nous, nous avons utilisé les annotations. Figure 34. Annotation pour la validation du formulaire

Figure 34. Annotation pour la validation du formulaire

V. Sécurité de l’application web « HedylSystems »

V.1.

Projet Fin d’Etude – SFARI Marwa

Menaces et risques applicatifs

52
52
Développement d ’ une application web sécurisée 2013 Il est possible de se protéger de

Développement dune application web sécurisée

2013
2013

Il est possible de se protéger de la plupart des attaques expliquées précédemment dans le deuxième chapitre en suivant quelques règles de développement :

Toutes les données doivent être vérifiées.

Privilégier l’utilisation des requêtes POST.

Utiliser les requêtes paramétrées.

Sécuriser l’accès aux données.

Ces règles de base ne suffisent plus à sécuriser une application web, car comme les technologies du développement évoluent, les attaques évoluent aussi. Nous allons donc essayer d’appliquer plusieurs méthodes de sécurité et d’inventer d’autre, pour mieux sécuriser notre application.

V.2.

Méthodes de sécurité

Dans cette partie nous allons expliquer les différentes solutions de sécurité appliquées pour chaque menace.

V.2.1.

Attaque par injection SQL

Le code malicieux le plus répandu est d’ajouter une instruction pour faire en sorte que la requête sous-jacente soit toujours positive. Cela permet par exemple d’usurper une identité pour se connecter à une application Web, de rendre l’application inutilisable ou de supprimer toutes les données de la table visée, voire même de la base de données complète.

Solution

si on utilise les méthodes adéquates pour générer les requêtes

SQL, telles que « setParameter ». Cette méthode, présentée dans la figure ci-dessous, permet

de renseigner de façon sécurisée les paramètres d’une requête SQL :

La protection est active

Projet Fin d’Etude – SFARI Marwa

53
53
Développement d ’ une application web sécurisée 2013 Figure 35. Solution contre l'injection SQL Quel

Développement dune application web sécurisée

2013
2013
Développement d ’ une application web sécurisée 2013 Figure 35. Solution contre l'injection SQL Quel que

Figure 35. Solution contre l'injection SQL

Quel que soit le contenu de la variable « $username », il n’y a pas ici de risque d’injection de code. En effet, les caractères spéciaux sont échappés de façon à n’exécuter aucun code frauduleux au moment de l’envoie de requête en base.

V.2.2.

Attaque CSRF

Ces attaques ciblent des utilisateurs authentifiés d’une application et leur font exécuter des actions et à leur insu.

Généralement ce type d’attaque vise les formulaires, ce sont des requêtes http d’attaque envoyés par un utilisateur. Donc, nous allons devoir mettre en place la sécurité au niveau des formulaires.

Solution

Les attaques CSRF peuvent être évitées en utilisant un jeton CSRF dans nos formulaires.

Le serveur génère un jeton qui est inclus dans le formulaire et qui lui permet de vérifier que ce formulaire a bien été requis par l’utilisateur avant d’en accepter le contenu. Aucun formulaire sans jeton valide n’est accepté.

Aucun formulaire sans jeton valide n’est accepté. Figure 36. Solution contre l'attaque CSRF Projet Fin

Figure 36. Solution contre l'attaque CSRF

Projet Fin d’Etude – SFARI Marwa

54
54
Développement d ’ une application web sécurisée 2013 La protection CSRF fonctionne par l'ajout d'un

Développement dune application web sécurisée

2013
2013

La protection CSRF fonctionne par l'ajout d'un champ caché à notre formulaire, appelé jeton qui contient une valeur que seuls l’utilisateur et l’administrateur sait. Cela garantit que l'utilisateur et non une autre entité soumet les données indiquées. Symfony valide automatiquement la présence et l'exactitude de ce jeton.

la présence et l'exactitude de ce jeton. Figure 37. Contrôle des champs non-rendus Le champ jeton

Figure 37. Contrôle des champs non-rendus

Le champ jeton est un champ caché et sera rendue automatiquement si nous incluons la fonction form_rest () dans notre modèle, ce qui garantit que tous les champs non-rendus sont transmis.

V.2.3.

Attaque XSS

C’est un type dе faillе de sécurité des sitеs web, permettant d’injecter du contenu dans

une page. L’attaquant peut utiliser des langages pris en charge par le navigateur, et avec l’arrivé de nouvelle technologies comme HTML5, il peut également faire la redirection vers un autre site pour du hameçonnage ou encore de voler la session en récupérant les cookies.

Solution

Ne pas autoriser les caractères spéciaux.

Rendre les cookies utilisables uniquement par l’application.

Avec Symfony 2, c’est « Twig », le moteur de template, qui en a la charge. Pour cela, tous les caractères spéciaux des variables affichées dans la page sont échappés.

Projet Fin d’Etude – SFARI Marwa

55
55
Développement d ’ une application web sécurisée 2013 Figure 38. Solution contre l'attaque XSS V.2.4.

Développement dune application web sécurisée

2013
2013
Développement d ’ une application web sécurisée 2013 Figure 38. Solution contre l'attaque XSS V.2.4. Les