Objectif partiel

Réviser exactement ce qui peut tomber

Le sujet annoncé combine un peu de HTML/CSS, un cas de cyberattaque à traiter, et les échanges sur les attaques récentes, problèmes et solutions.

The announced exam combines basic HTML/CSS, a cyberattack case study, and recent cyber threats with problems and solutions.

Méthode générale : identifier → expliquer → protéger → conclure.

Navigation utile

^ cache le header. clair/sombre change le thème. - / + ajuste la taille. st_ENG affiche l’aide en anglais.

Use the controls to collapse the header, switch theme, scale text, and show English support text.

Flux minimal recommandé

1. Lire Cheat Sheet→2. Quiz Express→3. Corriger avec la fiche→4. Cas d’attaque→5. 10 min final

But : éviter la lecture passive. Tu dois tester ta mémoire, puis revenir seulement aux notes liées à tes erreurs.

Goal: avoid passive reading. Test recall first, then return only to notes linked to your mistakes.

Plan 75–90 min

Plan express avant partiel

Temps	Action	Objectif
10 min	Cyber cheat + Code cheat	Installer les mots-clefs.
20 min	Quiz Cyber Express	Identifier les faiblesses majeures.
15 min	Fiche liée aux erreurs	Ne réviser que ce qui bloque.
20 min	Quiz Code Express	Stabiliser HTML/CSS/formulaire.
15 min	Cas d’attaque	S’entraîner à rédiger une réponse.
10 min	10 min final	Memory dump avant épreuve.

Règle de rétention

Lire → cacher → répondre → vérifier → corriger.

Ne relis pas tout en boucle. Les quiz doivent piloter la révision.

Critère de réussite

Tu es prêt si tu peux expliquer en 5 lignes : phishing, ransomware, XSS, SQLi, RGPD, formulaire HTML, validation serveur et méthode de cas.

Quiz Cyber — 50 questions

Mode express = 20 premières questions. Mode complet = 50 questions. Les questions à choix multiples peuvent donner un score partiel.

Quiz Code — 50 questions

HTML/CSS, formulaires, responsive design et sécurité de base des entrées utilisateur.

Cheat sheet d’abord, fiche complète ensuite

Cybersecurity — Cheat sheet + fiche

Version courte prête à réviser, puis fiche détaillée sur la même page.

The short, exam-ready version appears first. The detailed revision notes are directly below on the same page.

À mémoriser

Cybersecurity — Cheat Sheet

Phishing : faux email/site pour voler identifiants. Solutions : formation, MFA, filtrage email.

Ransomware : chiffre les données et demande rançon. Solutions : sauvegardes hors ligne, mises à jour, segmentation.

XSS : script injecté dans une page. Solutions : échapper sorties, filtrer entrées, CSP.

SQL injection : entrée qui modifie une requête SQL. Solutions : requêtes préparées, validation serveur, droits limités.

RGPD : finalité, minimisation, transparence, sécurité, durée limitée, droits des personnes, CNIL.

PME : manque budget/formation, systèmes obsolètes, sauvegardes faibles, droits mal gérés.

Memorize: phishing steals credentials, ransomware encrypts data, XSS injects browser scripts, SQL injection attacks databases, GDPR protects personal data.

Phrase type cas cyber

L’attaque est probablement ____ car ____. Le vecteur d’entrée est ____. L’impact est ____. Les mesures à mettre en place sont ____ et ____. Si des données personnelles sont touchées, il faut appliquer le RGPD.

Fiche de révision complète

Utilise cette partie quand tu rates une question ou quand tu dois consolider une notion.

Méthode cas cyber

Type : phishing, ransomware, XSS, SQLi, brute force, supply chain.
Vecteur : email, pièce jointe, formulaire, mot de passe faible, prestataire, faille non corrigée.
Impact : confidentialité, intégrité, disponibilité, argent, image, RGPD.
Solutions : techniques + humaines + organisationnelles.
Conclusion : priorités et justification.

Case method: identify attack, entry vector, impact, technical/human measures, and legal duties if personal data is affected.

Protections entreprise

MFAsauvegardesmises à jourmoindre privilègesegmentationlogs

Une bonne sécurité combine outils, procédures et formation. L’antivirus seul ne suffit pas.

Good security combines tools, procedures, and training. Antivirus alone is not enough.

Phishing / BEC

Le phishing trompe l’utilisateur pour voler des identifiants ou faire exécuter une action. Le BEC/fraude au président imite un dirigeant ou partenaire.

Solutions : sensibilisation, vérification des expéditeurs, MFA, filtrage email, procédure de validation des virements.

Ransomware

Malware qui chiffre ou bloque les données. L’entreprise subit arrêt d’activité, perte financière et pression de rançon.

Solutions : sauvegardes 3-2-1, copies hors ligne, mises à jour, EDR/antivirus, segmentation, plan de reprise.

XSS

Un script malveillant est injecté dans une page consultée par d’autres utilisateurs.

Impact : vol de session, redirection, modification d’affichage, récupération de données.

Solutions : validation, échappement des sorties, filtrage, CSP, éviter d’afficher du HTML utilisateur brut.

SQL injection

Une saisie utilisateur modifie la logique d’une requête SQL.

Impact : lecture, modification ou suppression de données.

Solutions : requêtes préparées, validation serveur, compte SQL avec droits limités, logs.

Sécurité web

Un formulaire public doit être protégé : HTTPS, validation serveur, échappement, requêtes préparées, captcha/rate limiting, WAF si possible, logs.

A public form requires HTTPS, server-side validation, escaping, prepared statements, anti-spam controls, WAF if possible, and logs.

Supply chain

Le pirate passe par un fournisseur, un prestataire, une dépendance logicielle ou un accès externe.

Solutions : clauses sécurité, MFA, droits limités, revue des accès, mises à jour, surveillance.

RGPD

Principe	Application simple
Finalité	Dire pourquoi les données sont collectées.
Minimisation	Collecter seulement le nécessaire.
Transparence	Informer les personnes.
Sécurité	Protéger accès, stockage, transmission.
Durée limitée	Ne pas conserver indéfiniment.
CNIL	Autorité française compétente.

Cheat sheet d’abord, fiche complète ensuite

Code révision — Cheat sheet + fiche BTS SIO

Version courte prête à réviser, puis fiche détaillée avec contexte et exemples d’usage. Les bases HTML/CSS passent en priorité, puis JavaScript, PHP et SQL en rappel.

Short exam-ready notes first, then detailed examples with context. HTML/CSS are the priority; JavaScript, PHP and SQL are included as first-year reminders.

À mémoriser en premier

Code — Cheat Sheet

HTML : structure et contenu de la page : titres, paragraphes, liens, images, listes, tableaux, formulaires.

CSS : présentation : couleur, police, taille, marges, bordures, alignement, responsive.

Formulaire : form, label, input, textarea, button, method="post".

Class vs ID : .classe réutilisable ; #id unique.

Box model : contenu → padding → border → margin.

Sécurité : validation serveur, échappement contre XSS, requêtes préparées contre SQLi, HTTPS.

Memorize: HTML structures content, CSS styles it, forms collect user input, classes are reusable, IDs are unique, and server-side validation is mandatory for security.

Mini page type partiel

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Contact</title> <link rel="stylesheet" href="style.css"> </head> <body> <header><h1>Contact</h1></header> <main> <form action="traitement.php" method="post"> <label for="email">Email :</label> <input type="email" id="email" name="email" required> <label for="message">Message :</label> <textarea id="message" name="message" required></textarea> <button type="submit">Envoyer</button> </form> </main> </body> </html>

À savoir expliquer : viewport pour mobile, link pour CSS, label for relié à id, name envoyé au serveur.

CSS minimal responsive

body { font-family: Arial, sans-serif; margin: 20px; } form { max-width: 420px; } input, textarea { width: 100%; padding: 8px; margin-bottom: 10px; } img { max-width: 100%; height: auto; } @media (max-width: 600px) { body { margin: 10px; } }

À savoir expliquer : largeurs adaptables, images qui ne débordent pas, media query pour mobile.

Fiche de révision complète — 21 codes courants BTS SIO 1ère année

Chaque bloc contient le contexte, le code et un exemple d’usage. Révise d’abord HTML/CSS/formulaires ; JavaScript, PHP et SQL servent surtout à reconnaître la logique de base.

1. Structure de base HTML

Contexte : c’est le squelette minimal d’une page. À utiliser dès qu’on te demande de créer une page web simple.

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Ma page</title> </head> <body> <h1>Bienvenue</h1> <p>Ceci est ma première page web.</p> </body> </html>

Usage : Exemple BTS : créer une page “Accueil” ou “Contact” proprement structurée.

2. Titres et paragraphes

Contexte : structurer le contenu visible. Un seul h1 principal est recommandé, puis h2/h3 pour organiser.

<h1>Titre principal</h1> <h2>Sous-titre</h2> <p>Ceci est un paragraphe.</p>

Usage : Utilisation : titre de page, sous-parties, texte explicatif.

3. Liens

Contexte : relier une page externe ou une autre page du site.

<a href="https://example.com">Visiter le site</a> <a href="page2.html">Aller à la page 2</a>

Usage : Exemple : menu Accueil / Contact / Services. Le lien local pointe vers un fichier HTML du même dossier.

4. Images

Contexte : afficher une image. L’attribut alt décrit l’image si elle ne charge pas et aide l’accessibilité.

Usage : Exemple : logo du site, illustration d’un article, photo d’un produit.

5. Liste non ordonnée

Contexte : liste à puces, quand l’ordre n’a pas d’importance.

<ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul>

Usage : Exemple : compétences, services, avantages.

6. Liste ordonnée

Contexte : liste numérotée, quand l’ordre des étapes compte.

<ol> <li>Créer la page HTML</li> <li>Ajouter le CSS</li> <li>Tester la page</li> </ol>

Usage : Exemple : procédure d’installation ou étapes de correction.

7. Tableau

Contexte : présenter des données en lignes/colonnes, pas faire la mise en page générale du site.

<table> <tr> <th>Nom</th> <th>Note</th> </tr> <tr> <td>Dupont</td> <td>15</td> </tr> </table>

Usage : Exemple : notes, planning, comparaison d’offres.

8. Formulaire

Contexte : collecter des informations utilisateur. Important pour le lien avec la cybersécurité : entrée utilisateur = risque.

<form action="traitement.php" method="post"> <label for="nom">Nom :</label> <input type="text" id="nom" name="nom"> <label for="email">Email :</label> <input type="email" id="email" name="email"> <input type="submit" value="Envoyer"> </form>

Usage : Exemple : formulaire de contact. name est envoyé au serveur ; id sert au label/CSS/JS.

9. Relier CSS à HTML

Contexte : charger un fichier CSS externe depuis la partie head.

Usage : Exemple : la page index.html utilise style.css pour les couleurs, espacements et mises en page.

10. CSS de base

Contexte : modifier l’apparence générale du site : police, fond, couleur, alignement, taille.

body { font-family: Arial, sans-serif; background-color: #f2f2f2; } h1 { color: blue; text-align: center; } p { font-size: 16px; }

Usage : Utilisation : style global du body, titre centré, paragraphes lisibles.

11. Classe CSS

Contexte : appliquer le même style à plusieurs éléments. Une classe se note avec un point en CSS.

<p class="important">Texte important</p>

Usage : HTML

11. Classe CSS — style

Le même style peut être réutilisé sur plusieurs paragraphes, blocs ou boutons.

.important { color: red; font-weight: bold; }

Usage : Exemple : alerte, information importante, bouton principal.

12. ID CSS

Contexte : identifier un élément unique dans la page. Un id se note avec # en CSS.

<div id="container"> Contenu de la page </div>

Usage : HTML

12. ID CSS — style

Un id doit normalement être unique sur la page. Pour plusieurs éléments, préfère class.

#container { width: 80%; margin: auto; }

Usage : Exemple : conteneur principal centré.

13. Margin, padding, border

Contexte : comprendre le box model. margin = espace extérieur ; padding = espace intérieur ; border = contour.

.box { margin: 20px; padding: 15px; border: 1px solid black; }

Usage : Exemple : carte, encadré, zone de formulaire.

14. Balises de mise en page

Contexte : organiser sémantiquement une page moderne : en-tête, navigation, contenu principal, pied de page.

<header> <h1>Mon site</h1> </header> <nav> <a href="index.html">Accueil</a> <a href="contact.html">Contact</a> </nav> <main> <p>Contenu principal de la page.</p> </main> <footer> <p>Pied de page</p> </footer>

Usage : Exemple : structure d’un mini-site BTS avec plusieurs pages.

15. Flexbox

Contexte : aligner des blocs sur une ligne ou gérer des colonnes. Très utile pour une mise en page responsive simple.

.container { display: flex; gap: 20px; } .box { width: 200px; padding: 10px; border: 1px solid black; }

Usage : Exemple : cartes de services côte à côte sur PC. Sur mobile, on peut les empiler avec une media query.

16. Bouton JavaScript

Contexte : déclencher une action simple dans le navigateur après un clic.

<button onclick="direBonjour()">Clique ici</button> <script> function direBonjour() { alert("Bonjour !"); } </script>

Usage : Exemple : afficher un message, masquer/afficher une zone, changer un thème.

17. Condition JavaScript

Contexte : exécuter un code différent selon une condition.

let age = 18; if (age >= 18) { console.log("Majeur"); } else { console.log("Mineur"); }

Usage : Exemple : vérifier une valeur, afficher un message selon une note ou un âge.

18. PHP de base

Contexte : PHP s’exécute côté serveur. Il peut générer du HTML ou traiter un formulaire.

<?php echo "Bonjour"; ?>

Usage : Exemple : afficher un message renvoyé par le serveur.

19. Variable PHP

Contexte : stocker une valeur côté serveur pour la réutiliser.

<?php $nom = "Dupont"; echo $nom; ?>

Usage : Exemple : afficher le nom reçu depuis une base ou un formulaire, après validation/échappement.

20. Requête SQL de base

Contexte : interroger une table dans une base de données.

SELECT * FROM utilisateurs;

Usage : Exemple : récupérer tous les utilisateurs. En pratique, on limite souvent les colonnes et les résultats.

21. Requête SQL avec condition

Contexte : filtrer les résultats avec WHERE.

SELECT nom, email FROM utilisateurs WHERE ville = 'Paris';

Usage : Exemple : afficher seulement les utilisateurs d’une ville. Attention : avec une saisie utilisateur, utiliser une requête préparée.

Note liée quiz — Structure HTML

Une page contient DOCTYPE, html, head pour les métadonnées et body pour le contenu visible. Balises utiles : h1, p, a, img, ul/ol/li, table/tr/th/td, header/nav/main/footer.

Note liée quiz — Formulaires

Un formulaire utilise form, label, input, textarea, button. L’attribut name est envoyé au serveur. Le couple label for + input id améliore l’accessibilité.

Note liée quiz — CSS de base

.classe cible une classe, #id cible un identifiant, p cible toutes les balises p. Propriétés : color, background-color, font-size, font-family, border-radius.

Note liée quiz — Box model

Chaque élément est une boîte : contenu → padding → border → margin. padding = espace intérieur. margin = espace extérieur.

Note liée quiz — Responsive design

Pour PC et mobile : meta viewport, largeurs flexibles, max-width, images adaptables, media queries.

Note liée quiz — Code sécurisé

La sécurité d’un formulaire ne repose pas sur HTML seul. Il faut valider côté serveur, échapper les sorties contre XSS, utiliser des requêtes préparées contre SQLi, protéger les sessions, activer HTTPS et limiter les droits.

Cas d’attaque — entraînement

Lis le cas, rédige une réponse courte, puis compare avec le modèle.

Cas : Une PME de 80 employés utilise un site vitrine avec formulaire de contact et base SQL. Plusieurs salariés ont reçu de faux emails Microsoft. Un compte a été compromis, puis des fichiers partagés ont été chiffrés. Des données clients sont peut-être accessibles.

Modèle : Le cas combine phishing et ransomware. Le vecteur d’entrée probable est un faux email Microsoft ayant permis le vol d’identifiants. L’impact est important : compromission d’un compte, chiffrement de fichiers, arrêt d’activité possible, perte de confidentialité et risque RGPD si des données clients sont concernées. Les mesures prioritaires sont : isoler les postes touchés, conserver les logs, restaurer depuis sauvegardes hors ligne, réinitialiser les mots de passe, activer MFA, former les salariés, filtrer les emails, mettre à jour les systèmes et segmenter le réseau. Si une violation de données personnelles est confirmée, l’entreprise doit documenter l’incident et respecter les obligations RGPD auprès de la CNIL et des personnes concernées selon la gravité.

Plan réponse en 6 lignes

Type d’attaque.
Vecteur d’entrée.
Impact DIC : disponibilité, intégrité, confidentialité.
Mesures immédiates.
Mesures préventives.
RGPD si données personnelles.

Barème mental

Pour viser haut, ne donne pas seulement des mots-clefs. Relie chaque solution au problème : phishing → formation/MFA ; ransomware → sauvegardes/segmentation ; base SQL → requêtes préparées ; données clients → RGPD.

Anti-confusion

Ne pas confondre	Différence
XSS vs SQL injection	XSS vise le navigateur via script ; SQLi vise la base via requête SQL.
Phishing vs ransomware	Phishing trompe l’utilisateur ; ransomware chiffre les fichiers. Le phishing peut déclencher un ransomware.
Validation client vs serveur	Client = confort, contournable ; serveur = sécurité indispensable.
GET vs POST	GET met les données dans l’URL ; POST envoie dans le corps de requête.
HTML vs CSS	HTML structure le contenu ; CSS gère l’apparence.
Confidentialité vs intégrité vs disponibilité	Confidentialité = accès non autorisé ; intégrité = modification ; disponibilité = service accessible.

Dernières minutes

10 min final

Cyber : phishing, ransomware, XSS, SQLi, fuite de données, supply chain.

Solutions : MFA, sauvegardes hors ligne, mises à jour, WAF, HTTPS, validation serveur, requêtes préparées, échappement, droits minimum, logs, formation.

RGPD : finalité, minimisation, transparence, sécurité, durée limitée, CNIL.

Code : structure HTML, formulaire POST, label/input, required, type email, CSS selectors, responsive viewport/media query.

Réponse cas : type → vecteur → impact → solutions → RGPD → conclusion.