Failles des applications web

**K3rb3r0s** 5ème année 3647

Failles des applications web

Je rappelle que cette partie du cours est réservée à l'apprentissage des pré-requis en vue de pouvoir effectuer, dans quelques cours, plusieurs attaques contre des applications web. Après avoir étudié les rudiments d'HTML au cours précédent, nous continuons notre petit bonhomme de chemin par l'apprentissage du langage CSS.

Je rappelle aussi que chaque sujet de cours sera traité à la fois sur le forum, sur Habbo, puis évalué lors d'un devoir.

II - CSS pour rendre ses sites kawaii

Le langage CSS (Cascading Style Sheets) est le langage permettant de décorer des pages web. Là où HTML est utilisé pour dire à l’ordinateur « Je veux un titre », CSS permettra de lui dire « Je veux que ce titre soit rose fluo, souligné et super grand !!!!! ».

Le CSS peut être inclus dans une page web de différentes manières :
- au sein même de son code HTML, entre les balises style ;
- au sein même d'une balise (si on souhaite décorer seulement son contenu), grâce à l'attribut style ;
- dans un autre fichier, d'extension .css, on indique alors dans le code HTML quel fichier l'on doit inclure.

Les fichiers contenant du code CSS sont de simples fichiers texte, que l’on peut donc ouvrir avec Notepad par exemple sans problème.
Même remarque cependant que pour HTML, le CSS est bien plus compréhensible avec un éditeur de texte spécialisé !

Reprenons l'exemple du code HTML du cours précédent légèrement modifié, et ajoutons-y du code CSS pour embellir notre page web.

Code:: <html>
<header>
<title>Nom de la page</title>
</header>
<body>
<h1 class="super-titre">Gros titre</h1> // ajout de l'attribut class avec la valeur super-titre
<p id="super-paragraphe">Paragraphe</p> // ajout de l'attribut id avec la valeur super-paragraphe
<h1>Autre gros titre</h1>
<p>Autre paragraphe</p>
</body>
</html>

Le code suivant est commenté à chaque ligne par les textes après "//" afin de vous expliquer ce que fait précisément ladite ligne. Pour une meilleure lisibilité, je vous invite à copier/coller le code dans l'éditeur de texte que vous aurez choisi.

Code:: h1 { // "toutes les balises h1"
width: 500px; // propriété définissant la largeur du bloc
font-size: 25px; // propriété définissant la taille de l'écriture
text-align: center; // propriété définissant l'alignement du texte dans le bloc
color: blue; // propriété définissant la couleur du texte
}

p { // "toutes les balises p"
color: red;
}

.super-titre { // "tous les éléments HTML ayant la classe super-titre"
color: white;
}

#super-paragraphe { // "l'élément HTML ayant l'id super-paragraphe"
color: black;
}

On observe donc que le langage CSS affecte aux éléments du code HTML un ensemble de propriétés défini entre crochets. La syntaxe générique est la suivante :

Code:: sélecteur CSS {
propriété1: valeur1;
propriété2: valeur2;
}

Les sélecteurs CSS peuvent être de plusieurs formes, ils peuvent être :
- un nom de balise, pour appliquer des propriétés à un type particulier de balise : h1, p, img... ;
- un nom de classe ou un nom d'id pour appliquer des propriétés à des éléments en particulier : .classe, #id.

Pour ajouter une classe ou un id à un élément HTML, on la/le précise dans sa balise ouvrante comme dans l'exemple. Les sélecteurs CSS de ces éléments seront ainsi : .super-titre pour la classe et #super-paragraphe pour l'id.
Important : Plusieurs éléments HTML peuvent avoir la même classe, mais un id est unique et ne concerne donc qu'un unique élément de la page.

Il existe des sélecteurs plus complexes que l'on ne verra pas dans ce cours (par manque de temps).

Attention

Une fois ce cours maîtrisé, je vous encourage vivement à aller plus loin : la dextérité que vous gagnerez dans ces domaines vous sera extrêmement utile pour la suite. Ne vous contentez donc pas des balises HTML, sélecteurs CSS, et propriétés CSS appris durant ce cours : amusez-vous à faire de jolies pages web en élargissant vos connaissances :

Exemples d'autres balises HTML :
https://developer.mozilla.org/fr/docs/Apprendre/HTML/Balises_HTML

Exemples d'autres sélecteurs CSS :
https://developer.mozilla.org/fr/docs/Web/CSS/Sélecteurs_CSS

Exemples d'autres propriétés CSS :
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1608902-memento-des-proprietes-css

En informatique, et encore plus en hacking, il ne faut pas hésiter à aller plus loin que les cours que l'on vous donne.

Si vous avez la moindre question, je suis disponible sur Habbo, par MP forum et MP Discord.
Enfin, si vous avez une idée de sujet de cours concernant la cybersécurité ou même l'informatique en général, n'hésitez pas à m'en parler.

K3rb3r0s-s3ns3ii.

**AiledAlouette** 5ème année 476

Super cours dommage que je n y etais pas present
Par contre quelle est la difference entre un CSS inclu entre les balises et un CSS inclu au sein d'une balise?

**K3rb3r0s** 5ème année 3647

Le cours où tu n'étais pas présent était celui sur HTML.
Celui sur CSS interviendra ce week-end !

Pour répondre à ta question, considérons l'élément HTML suivant :

Code:: <p>Un paragraphe</p>

Si nous souhaitons conserver tout le code de notre page dans le même fichier HTML, nous avons effectivement deux manières à notre disposition pour styliser cet élément.

1) Définir le CSS entre les balises <style></style> (ces balises sont généralement imbriquées dans les balises <head></head>).

Code:: <style>
p {
color: red;
}
</style>

2) Définir le CSS au sein même de la balise <p> que l'on souhaite styliser grâce à l'attribut style.

Code:: <p style="color: red;">Un paragraphe</p>

Quelles différences ?

Avec la seconde méthode, seul ce paragraphe précisément aura son texte en rouge. L'attribut style est donc à utiliser lorsque l'on a un besoin de styliser un élément HTML très précis. En outre, si la couleur de texte d'un paragraphe est définie en blanc entre les balises <style></style>, mais que l'attribut style d'un paragraphe définit sa couleur de texte comme étant rouge, celui-ci aura son texte en rouge.

**Contenu sponsorisé**

[Informatique] Ethical Hacking 2/8 - Failles web

Failles des applications web

II - CSS pour rendre ses sites kawaii