chore: update README

.gitlab-ci.yml

@@ -17,9 +17,6 @@ prepare_folders:
   cache:
     paths:
       - .public
-  artifacts:
-    paths:
-      - .public
   rules:
     - if: $CI_COMMIT_BRANCH =~ /^make/
 
@@ -38,10 +35,12 @@ render_pdf:
   artifacts:
     paths:
       - .public/docs
+    expire_in: 2 week
   rules:
     - if: $CI_COMMIT_BRANCH =~ /^make/
 
 render_ppt:
+  needs: [render_pdf]
   environment: $CI_COMMIT_BRANCH
   stage: build
   when: manual
@@ -56,10 +55,10 @@ render_ppt:
   artifacts:
     paths:
       - .public/docs
+    expire_in: 2 week
   rules:
     - if: $CI_COMMIT_BRANCH =~ /^make/
 
-
 pages:
   environment: $CI_COMMIT_BRANCH
   stage: deploy
@@ -72,9 +71,5 @@ pages:
     paths:
       - .public
       - public
-  artifacts:
-    paths:
-      - public
   rules:
     - if: $CI_COMMIT_BRANCH =~ /^make/
-

README.md

@@ -1,2 +1,42 @@
 # Alex Presentations
-Here you'l find various presentations done with Revealjs or any new shiny tool I've found.
+
+Here you'l find various presentations done with Revealjs or any new shiny tool I've found.  
+Currently, small adjustments were made to provide a to the reveal.js submodule all the configuration needed to serve files located in the parent folder.
+
+# Usage
+
+## Writing your slide
+
+- Use the reveal.js `index.html` template located in the submodule.
+- You can see your presentation by going to the `index.html` file with ~~Firefox~~ your favorite browser
+- Remember to set the correct path to plugins eg. `custom_plugins/my_super_plugin/plugin.js`
+
+## Gitlab CI/CD
+
+A sample `.gitlab-ci.yml` is provided, currently (and quite dirtily FTM) providing a way to:
+
+- Generate a PDF from `index.html` via [decktape](https://github.com/astefanutti/decktape) (containerized)
+- Generate a Powerpoint (.pptx) file via [linuxserver/libreoffice](https://hub.docker.com/r/linuxserver/libreoffice) (containerized)
+- A job to prepare all of this
+- Serve said presentation/files via Gitlab Pages.
+
+## URLs
+
+Didn't tested anywhere else but it should be:  
+https://<username>.gitlab.io/<repo-name>/<branch>[/slide.{pptx,pdf}].  
+For example:  
+https://john-doe.gitlab.io/alex-presentations/make/notion/
+
+## TODO
+
+- Better CI, currently jobs are manual only
+- Cleaner code
+- Better templating
+- Auto-upload to google-drive
+- PDF/PPTX/Pages CI when tag
+- ~~Find a cure to earth's suffering~~
+
+## Disclaimer
+
+Yeah, it's dirty, could be better, not optimal, yadah yadah.  
+Will try to do better, don't roast me too much :)

custom_plugins/chalkboard/README.md

@@ -0,0 +1,163 @@
+# Chalkboard
+
+With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:
+
+- you can make notes directly on the slides, e.g. to comment on certain aspects,
+- you can open a chalkboard or whiteboard on which you can make notes.
+
+The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.
+
+The plugin records all drawings made so that they can be play backed using the `autoSlide` feature or the `audio-slideshow` plugin.
+
+
+[Check out the demo](https://rajgoel.github.io/reveal.js-demos/?topic=chalkboard)
+
+## Setup
+
+To use the plugin include
+```html
+<!-- Font awesome is required for the chalkboard plugin -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+<!-- Custom controls plugin is used to for opening and closing annotation modes. -->
+<script src="https://cdn.jsdelivr.net/npm/reveal.js-plugins@latest/customcontrols/plugin.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js-plugins@latest/customcontrols/style.css">
+<!-- Chalkboard plugin -->
+<script src="https://cdn.jsdelivr.net/npm/reveal.js-plugins@latest/chalkboard/plugin.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js-plugins@latest/chalkboard/style.css">
+```
+to the header of your presentation and configure reveal.js and the plugin by
+
+```js
+Reveal.initialize({
+  customcontrols: {
+    controls: [
+      { icon: '<i class="fa fa-pen-square"></i>',
+        title: 'Toggle chalkboard (B)',
+        action: 'RevealChalkboard.toggleChalkboard();'
+      },
+      { icon: '<i class="fa fa-pen"></i>',
+        title: 'Toggle notes canvas (C)',
+        action: 'RevealChalkboard.toggleNotesCanvas();'
+      }
+    ]
+  },
+  chalkboard: {
+    // add configuration here
+  },
+  // ...
+  plugins: [ RevealChalkboard, RevealCustomControls ],
+  // ...
+});
+```
+
+In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that `font-awesome` is available. The easiest way is to include
+```
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js-plugins/menu/font-awesome/css/fontawesome.css">
+```
+to the ```head``` section of you HTML-file.
+
+## Usage
+
+### Mouse or touch
+- Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
+- Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
+- Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
+- Click the left mouse button and drag to write on notes canvas or chalkboard
+- Click the right mouse button and drag to wipe away previous drawings
+- Touch and move to write on notes canvas or chalkboard
+
+### Keyboard
+- Press the 'BACKSPACE' key to delete all chalkboard drawings
+- Press the 'DEL' key to clear the notes canvas or chalkboard
+- Press the 'c' key to toggle the notes canvas
+- Press the 'b' key to toggle the chalkboard
+- Press the 'd' key to download drawings
+- Press the 'x' key to cycle colors forward
+- Press the 'y' key to cycle colors backward
+
+## Playback
+
+If the `autoSlide` feature is set or if the `audio-slideshow` plugin is used, pre-recorded chalkboard drawings can be played. The slideshow plays back the user interaction with the chalkboard in the same way as it was conducted when recording the data.
+
+## Multiplexing
+
+The plugin supports multiplexing via the [`multiplex` plugin](https://github.com/reveal/multiplex) or the [`seminar` plugin](https://github.com/rajgoel/reveal.js-plugins/tree/master/seminar).
+
+## PDF-Export
+
+If the slideshow is opened in [print mode](https://revealjs.com/pdf-export/), the chalkboard drawings in the session storage (see `storage` option - print version must be opened in the same tab or window as the original slideshow) or provided in a file (see `src` option) are included in the PDF-file. Each drawing on the chalkboard is added after the slide that was shown when opening the chalkboard. Drawings on the notes canvas are not included in the PDF-file.
+
+
+## Configuration
+
+The plugin has several configuration options:
+
+- ```boardmarkerWidth```: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
+- ```chalkWidth```: an integer, the drawing width of the chalk; larger values draw thicker lines.
+- ```chalkEffect```: a float in the range ```[0.0, 1.0]```, the intesity of the chalk effect on the chalk board. Full effect (default) ```1.0```, no effect ```0.0```.
+- ```storage```: Optional variable name for session storage of drawings.
+- ```src```: Optional filename for pre-recorded drawings.
+- ```readOnly```: Configuation option allowing to prevent changes to existing drawings. If set to ```true``` no changes can be made, if set to false ```false``` changes can be made, if unset or set to ```undefined``` no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the 'DEL' key (i.e. by using the ```RevealChalkboard.clear()``` function).
+- ```transition```: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
+- ```theme```: Can be set to either ```"chalkboard"``` or ```"whiteboard"```.
+
+The following configuration options allow to change the appearance of the notes canvas and the chalkboard. All of these options require two values, the first gives the value for the notes canvas, the second for the chalkboard.
+
+- ```background```: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
+- ```grid```: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. ```{ color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}```. Alternatively, the grid can be removed by setting the value to ```false```.
+- ```eraser```: An image path and radius for the eraser.
+- ```boardmarkers```: A list of boardmarkers with given color and cursor.
+- ```chalks```: A list of chalks with given color and cursor.
+- ```rememberColor```: Whether to remember the last selected color for the slide canvas or the board.
+
+All of the configurations are optional and the default values shown below are used if the options are not provided.
+
+```javascript
+Reveal.initialize({
+	// ...
+    chalkboard: {
+        boardmarkerWidth: 3,
+        chalkWidth: 7,
+        chalkEffect: 1.0,
+        storage: null,
+        src: null,
+        readOnly: undefined,
+        transition: 800,
+        theme: "chalkboard",
+        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
+        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
+        eraser: { src: path + 'img/sponge.png', radius: 20},
+        boardmarkers : [
+                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
+                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
+                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
+                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
+                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
+                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
+                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
+        ],
+        chalks: [
+                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
+                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
+                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
+                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
+                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
+                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
+                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
+        ]
+    },
+    // ...
+
+});
+```
+
+## Credits
+
+The chalkboard effect is based on [Chalkboard](https://github.com/mmoustafa/Chalkboard) by Mohamed Moustafa.
+
+## License
+
+MIT licensed
+
+Copyright (C) 2023 Asvin Goel

custom_plugins/chalkboard/style.css

@@ -0,0 +1,44 @@
+div.palette, div.boardhandle {
+  position: absolute;
+/*
+  height: 260px;
+  margin: -130px 0 0 0px;
+*/  
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 24px;
+  border-radius: 10px;
+  border-top:    4px solid #222; 
+  border-right:  4px solid #222; 
+  border-bottom: 4px solid #222;
+  background: black;
+  transition: transform 0.3s;
+}
+
+div.palette  {
+  left: -10px;
+  padding-left:10px;
+}
+
+div.boardhandle {
+  right: -10px;
+  padding-right:10px;
+}
+
+div.palette > ul,
+div.boardhandle > ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+div.palette > ul > li,
+div.boardhandle > ul > li {
+  margin: 10px;
+}
+
+@media print {
+	div.palette, div.boardhandle { 
+		display: none!important; 
+	}
+}

index.html

@@ -4,7 +4,7 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
-		<title>Sécurité informatique</title>
+		<title>Your presentation title</title>
 
 		<link rel="stylesheet" href="reveal.js/dist/reset.css">
 		<link rel="stylesheet" href="reveal.js/dist/reveal.css">
@@ -12,533 +12,24 @@
 
 		<!-- Theme used for syntax highlighted code -->
 		<link rel="stylesheet" href="reveal.js/plugin/highlight/monokai.css">
+    <!-- Font awesome is required for the chalkboard plugin -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- Custom controls plugin is used to for opening and closing annotation modes. -->
+    <script src="https://cdn.jsdelivr.net/npm/reveal.js-plugins@latest/customcontrols/plugin.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js-plugins@latest/customcontrols/style.css">
+    <!-- Chalkboard plugin -->
+    <script src="https://cdn.jsdelivr.net/npm/reveal.js-plugins@latest/chalkboard/plugin.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js-plugins@latest/chalkboard/style.css">
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js-plugins/menu/font-awesome/css/fontawesome.css">
 	</head>
 	<body>
 		<div class="reveal">
 			<div class="slides">
         <section data-markdown data-separator="^\n---\n$" data-separator-vertical="^\n--\n$">
           <script type="text/template">
-          # Sécurité informatique
-          ### Comprendre les enjeux et déjouer les pièges
-          Ou comment être (un peu) parano peut parfois aider  
-          ![make_logo](images/make_logo.png)<!-- .element height="15%" width="15%"
-          position="absolute" bottom="0" right="0"-->
-          ![make__foundation_logo](images/make_foundation_logo.png)<!-- .element height="15%" width="15%"
-          position="absolute" bottom="0" right="0"-->
-
-          ---
-
-          ## Sommaire
-          <span style="font-size:70%">
-
-          1. Contexte
-          2. Types d'attaque les plus courantes
-             * Social Engineering
-             * Exploitation d'absence de chiffrement
-             * Fichier malicieux
-          3. Bonnes pratiques et astuces
-             * Identifiants et MFA
-             * Connection aux services
-             * Protection des données
-             * Sécurité des postes informatiques
-          4. Potentiels impacts
-          5. Ressources
-              * En amont
-              * Après une attaque
-
-          </span>
-
-          ---
-
-          ## Contexte
-
-          --
-
-          * ~ 90 comptes Make.org actifs
-          * Autant d'ordinateurs en service
-          * ~ 1000 mails reçus/jour
-          * \> 1,2 To de données sur le Drive
-          * Travail en itinérance majoritaire
-
-          --
-
-          <img src="images/recipe_disaster.gif" >
-
-          ---
-
-          ## Types d'attaque
-          À quoi vous attendre</br>
-          <img src="images/hacker.gif">           
-
-          ---
-
-          ### Social Engineering
-          Art de convaincre les personnes de révéler des informations confidentielles sans qu'elles s'en aperçoivent
-          * Phishing (email)
-          * Vishing (téléphone)
-          * Impersonation (Usurpation d'identité)
-
-          --
-
-          #### Phishing
-          * Email semblant provenir d'une source légitime (banque, institution, partenaire commerciaux...)  
-          * Souvent envoyé à un large panel de potentielles victime (hormis "spear-fishing")  
-          * Peut être **très crédible**
-
-          --
-
-          #### Cas classiques
-
-          --
-
-          <img src="images/phishing_example_0.png">
-
-          --
-
-          <img src="images/phishing_example_1.png">
-
-          --
-
-          <img src="images/phishing_example_2.png">
-
-          --
-
-          <img src="images/phishing_example_3.png">
-
-          --
-
-          <img src="images/phishing_example_4.png">
-
-          --
-
-          <img src="images/phishing_example_5.png">
-
-          --
-
-          #### Risques
-          * Usurpation d'identité
-          * Accès à des comptes en ligne/informations sensibles
-          * Accès à d'autres comptes via l'exploitation de données sensibles
-          * Transactions banquaires non-sollicités
-          * ...
-          
-          Notes:
-          * Documents d'identité pour récupération compte (carte ID, quittance EDF)
-          * Découverte de réponse question secrète (nom du chien, du petit etc)
-
-          --
-
-          #### Exemple de pishing chez Make.org
-          <a href="./html_files/phishing_full_clean.html">Exemple de mail reçu</a> 
-          ##### (clic clic !) 
-          Notes:
-          * Charte graphique semblable à Facebook
-          * Mail véritablement en provenance de Facebook
-          * Mail de l'utilisateur affiché
-
-          --
-
-          <img src="images/mail_0.png" height="300em"></br>
-          Le lien semble pointer vers Facebook, mais n'est qu'une redirection
-
-          --
-
-          <img src="images/mail_1.png" height="550em"></br>
-          Les ennuis commencent
-
-          --
-
-          <img src="images/mail_2a.png" height="500em"></br>
-          Voyez-vous ce qui pose souci ?
-
-          --
-
-          <img src="images/mail_2ca.png" width="500em" style="float:center;">
-          <img src="images/mail_2cb.png" style="float:center;"></br>
-          Communication en HTTP et non HTTPS -> Communication non-chiffrée
-          ⚠️ Danger⚠️
-
-          --
-
-          <img src="images/mail_2d.png" height="500em"></br>
-          URL "artisanale", .gd -> Grenade
-
-          --
-
-          Pour être sûr:  
-          <a href="https://www.whois.com/whois/facebook.com">Whois de Facebook</a>  
-          <a href="https://www.whois.com/whois/request-appeal-page.rf.gd">Whois du site</a>
-
-          --
-
-          <img src="images/mail_2e.png" height="500em"></br>
-          URL bidon
-
-          --
-
-          <img src="images/mail_2f.png" height="500em"></br>
-          Changement de langue surprise  
-          Affichage de la page "artisanal"
-
-          --
-
-          <img src="images/mail_3.png" height="500em"></br>
-          Mise en page, "Google Traduction", champs demandés... 
-
-          --
-
-          #### Objectif de ce phishing
-          * Obtention des cookies de session
-          * Vol du compte et des potentielles informations banquaires ou confidentielles
-
-          ---
-
-          ### Exploitation d'absence de chiffrement
-          * **Le chiffrement assure le transit d'information exploitable seulement par les personnes ayant les clefs de chiffrement**  
-          ➡ Vous, les tiers de confiance
-          * Identité des tiers assuré par institution de confiance
-          * Garantie la redirection vers sites légitimes
-
-          --
-
-          #### Cas classiques
-          * Connection en HTTP à des services sensibles
-          * Bornes WiFi public (Fast-food, hôtels...)
-          * Box avec chiffrements/protocoles WiFi faibles (WEP, WPA)
-          * Acteurs malicieux introduits dans le réseau
-          * Borne de recharge USB
-          Notes:
-          Borne recharge USB: accès aux données nom chiffrées du tel possible, même avec "encryption at rest"
-
-          --
-
-          #### Risques
-          * Usurpation d'identité
-          * Accès à des comptes en ligne/informations sensibles
-          * Accès à d'autres comptes via l'exploitation de données sensibles
-          * Transactions banquaires non-sollicités
-          * ...
-
-          ---
-
-          ### Attaque par fichier malicieux
-          * Peut prendre plusieurs formes: Fichiers PDF, exécutables (.exe), fichiers Office (.doc, .xls...) et plein d'autres
-          * Pas nécessaire de lancer le fichier ou d'aller sur des sites douteux (régie de pub, code arbitraire...)
-          * Peut entrainer des dommages graves et visibles (ransomwares) ou plus insidieux et parfois indétéctables (troyens, cryptominers, hijackers, rootkits...)
-
-          --
-
-          #### Cas classiques
-          * L'email d'un contact inconnu (ou pas!) contenant un fichier excel au nom énigmatique
-          * Le site internet louche demandant d'installer un logiciel pour avoir accès à une ressource
-          * Le logiciel piraté provenant d'une source plus que discutable
-          * Le site louche demandant l'accès aux notifications de navigateur
-          * La clef USB au passé douteux
-          ** Ceci est également applicable à vos smartphones ! **
-
-          --
-
-          ### Risques
-          Large spectre possible:
-          * Vol de données
-          * Modification du comportement de l'ordinateur
-          * Chiffrement malicieux de l'ordinateur +/- de l'infrastructure informatique  
-            
-          ⚠️**Ordinateur infecté -> potentielle propagation à d'autres postes**⚠️
-
-          ---
-
-          ## Bonnes pratiques et astuces
-          <img src="images/hacking_in_progress.gif" >
-
-          ---
-
-          ### Identifiants et MFA
-
-          --
-
-          Selon vous, quel est le mot de passe le plus sûr ?  
-          ``h7AiIauMj#``  
-          ou  
-          ``franchement j'adore la raclette`` ?
-
-          --
-
-          #### ``h7AiIauMj#``
-          * Relativement court (10 caractères)
-          * Difficile à retenir
-          => ~ 12 jours pour le cracker (source: Bitwarden.com)
-
-          --
-
-          #### ``franchement j'adore la raclette``
-          * Long (30 caractères)
-          * Facile à retenir
-          => Plusieurs siècles pour le cracker (source: Bitwarden.com)
-
-          --
-
-          |Précautions|Luttre contre...|
-          |---|---|
-          |Privilégier les mots de passe longs|Attaques par brute-force|
-          |Éviter les mots, citations, phrases connues|Attaques par dictionnaire|
-          |Éviter les références personnelles et les patterns basés dessus|Déduction de mot de passe|
-          |Utiliser un mot de passe différent/service|Compromission de l'ensemble des comptes|
-          |Usage de la MFA|Augmentation significative de la sécurité des comptes|
-
-          --
-
-          #### À retenir
-          * Allonger le mot de passe > complexifier le mot de passe (symboles, chiffres...)
-          * Un mot de passe par accès
-          * Favoriser la MFA et ne pas garder d'historique de SMS si utilisé
-          
-          ---
-
-          ## Connection aux services
-
-          --
-
-          * S'assurer que les connections soient chiffrées (HTTP vs HTTPS)
-          * Éviter les points d'accès publics -> Multiples risques
-          * Si besoin, utiliser un VPN **de confiance**
-
-          --
-
-          <img src="images/mail_2ca.png" width="500em" style="float:center;">
-          <img src="images/https_1.png" width="500em" style="float:center;">
-
-          --
-
-          <img src="images/https_2.png" width="500em" style="float:center;">
-          <img src="images/https_3.png" width="500em" style="float:center;">
-
-          ---
-
-          ## Protection des données
-
-          --
-          
-          ### Qu'est-ce qu'une donnée personnelle ?
-          **Toute information se rapportant à une personne physique identifiée ou identifiable**
-
-          --
-
-          * Vaste spectre de données personnelles exploitables
-          * Réseau sociaux => Recoupement des informations facile
-          * Informations personnelles = Mine d'or => Soyez pingre !
-
-          --
-          
-          Il faut toujours se questionner !
-          * La demande provient-elle d'un tiers de confiance ?
-          * Dans quel but ? À quoi serviront ces informations ?
-          * Le tiers n'a t'il pas déjà celles-ci ?
-          * La demande fait-elle suite à une démarche de ma part ?
-          * Est-ce une démarche habituelle ?
-          * Par quel moyen il m'est demandé de fournir les informations ?
-          * Puis-je vérifier le bien fondé de la démarche ?
-          * Vers quoi dirigent les liens qui me sont présentés ?
-
-          --
-
-          Soyez vigilants
-          * Assurez vous que la demande vous est bien destinée
-          * Identifiez de manière sûre l'identité de l'interlocuteur -> adresse mail, site web peuvent être traffiqués
-          * Méfiez-vous des interlocuteurs inconnus
-          * Prêtez attention au niveau de language
-          * Attention au caractère urgent des demandes
-          * Sur Internet, si c'est trop beau pour être vrai, c'est que ça ne l'est pas !
-
-          ---
-
-          ## Sécurité des postes informatiques
-
-          --
-
-          Si un acteur malicieux à accès à votre machine, que pensez-vous qu'il pourrait récupérer ?
-
-          --
-
-          Supposons que vous n'ayez qu'un mot de passe sur votre session, sont récupérables:
-
-          * Documents (et même ceux supprimés !)
-          * Historique de navigation
-          * Mots de passe enregistrés
-          * Vie professionnelle et personnelle
-            
-          ⚠️Les fichiers effacés peuvent souvent êtres récupérés !⚠️
-
-          --
-
-          #### Pour réduire les risques
-          * Mettez à jour votre système d'exploitation
-          * Prenez garde aux sites que vous visitez et au logiciels que vous utilisez
-          * Sous Windows, l'utilisation d'un antivirus est fortement recommandé
-          * Protégez votre session utilisateur avec une authentification forte
-          * Chiffrez votre disque dur
-          * Activez le verrouillage de session automatique et ne laissez pas votre session ouverte quand vous n'êtes pas devant votre PC
-          * Attention aux "regard au dessus de l'épaule"
-          * ~~N'utilisez pas Windows~~
-
-          --
-
-          ## Potentiels impacts
-
-          --
-
-          ### Pour vous
-          * Vol de compte
-          * Fraude banquaire
-          * Chantage
-          * Achats frauduleux
-          * Spam
-          * Surveillance
-          * ...
-
-          --
-
-          ### Pour l'entreprise
-          Même risques, mais en sus:
-          * Mise en péril des moyens de communications
-          * Mise en péril de l'infrastructure informatique
-          * Révélation de secrets commerciaux
-          **=> Peut mettre en péril la survie d'une entreprise**
-
-          ---
-
-          #### Dans une coquille de noix
-          * Toutes les protections sont utiles **mais contournables**
-          * Le risque zéro n'existe pas  
-          * C'est vos précautions qui vous protégerons le plus
-          Vous êtes acteur de votre sécurité informatique et de celle des autres...  
-          Et l'inverse est valable :)  
-          **Et n'oubliez pas que vos gentils informaticiens sont là pour vous accompagner !**  
-          <img src="images/doing_my_part.gif" >
-
-          ---
-
-          ## Après une attaque...
-          C'est arrivé à tout le monde, ne vous en voulez pas trop.  
-          Mais il faut maintenant réagir !  
-          <img src="images/burning_computer.gif" >
-
-          --
-
-          ### Alerter et vérifier
-          Contactez **sans délai** l'équipe SRE et ensuite fournissez-nous le plus d'informations possible: 
-          * Ce que vous faisiez, ce qui vous fait suspecter une attaque
-          * Les symptômes 
-          * Des captures d'écran, copie de mail...
-          * Ce qui a été fait depuis
-          Même en cas de doute !  
-          => Diagnostic et solution plus rapides/efficientes
-
-          --
-
-          ### Réagir
-          <img src="images/counterhack.gif" >
-
-          --
-
-          #### Attaque par phishing:  
-          * Cessez toute communication avec les tiers suspectés
-          * Changez immédiatement les mots de passe des sites concernés
-          * Ne cédez pas aux potentiels chantages
-          * Déconnectez-vous des sessions aux services concernés
-
-          --
-
-          #### Attaque par virus informatique:
-          * Déconnectez immédiatement votre appareil d'internet ou d'un quelconque réseau  
-            **Et tout particulièrement lors d'une attaque par ransomware**   
-          * N'effectuez plus de manipulation sur la machine sauf avis SRE
-          Notes:
-          Touche mode avion
-
-          ---
-
-          #### Mince, c'est pas évident quand même...
-          N'ayez crainte, l'équipe SRE est là !  
-          Au moindre doute, à la moindre interrogation => SRE/IT  
-          **Nous sommes également là pour vous accompagner sur ces sujets**  
-          (Et on le fera avec plaisir !)  
-          Et pour les pragmatiques, il est mieux d'avoir une fausse alerte que de tout réparer :)
-
-          ---
-
-          ## Ressources, astuces
-
-          --
-          
-          #### Vérifier qu'un site est légitime 
-          * "Who is"
-              * https://www.whois.com/whois/
-              * https://whois.domaintools.com/
-          * "Website security check"
-              * https://www.ssltrust.com.au/ssl-tools/website-security-check
-              * https://transparencyreport.google.com/safe-browsing
-          * Moteurs de recherche -> Ne pas se fier uniquement aux avis utilisateurs
-          * Certificats SSL (HTTPS)
-          * Alertes navigateur
-
-          --
-
-          #### Protéger mon ordinateur
-          * Antivirus
-              * Windows Defender
-              * Éviter les antivirus gratuits
-          * Comparatifs et test d'antivirus
-              * https://www.av-comparatives.org/
-              * https://www.av-test.org/en/
-          * Scan en ligne
-              * https://www.virustotal.com/gui/home/upload
-          * Utilisez un firewall ([Configuration du firewall Windows](https://learn.microsoft.com/en-us/windows/security/threat-protection/windows-firewall/best-practices-configuring))
-          ** Veillez à n'avoir qu'un seul antivirus installé **
-
-          --
-
-          #### Chiffrer mes données
-          * Chiffrement des mails
-              * https://mailvelope.com/en
-              * [GPG4Win](https://www.gpg4win.org/)
-          * Système de fichiers
-              * [Bitlocker](https://support.microsoft.com/en-us/windows/turn-on-device-encryption-0c453637-bc88-5f74-5105-741561aae838)
-              * [Veracrypt](https://www.veracrypt.fr/en/Downloads.html)
-
-          --
-
-          #### Gérer des mots de passe forts
-          * Gestionnaires de mot de passe en ligne
-             * [Bitwarden](https://bitwarden.com/products/personal/)
-             * [1password](https://1password.com/fr/)
-          * Gestionnaires de mot de passe hors-ligne
-             * [KeepassXC](https://keepassxc.org/)
-             * [Keeweb](https://keeweb.info/)
-
-          --
-
-          #### Sauvegarder mes données
-          Pensez à sauvegarder vos données critiques !
-          * Stockage en ligne (Google Drive, DropBox, OneDrive et consorts)
-          * Stocker vos données sur d'autres supports (Disque dur, clef USB...) en prenant garde aux limitations
-          * Si possible, chiffrez ces données !
-            
-          Astuce: Vous pouvez vous envoyer des documents sur votre propre boîte mail :)
-
-          --
-
-          #### Se renseigner
-          * https://www.cnil.fr/fr/cybersecurite
-          * https://www.ssi.gouv.fr/
-              * [Les dix règles d'or préventives](https://www.ssi.gouv.fr/particulier/precautions-elementaires/dix-regles-de-base/)
-              * [5 reflexes à avoir lors de la réception de courriel](https://www.ssi.gouv.fr/particulier/precautions-elementaires/5-reflexes-a-avoir-lors-de-la-reception-dun-courriel/)
-              * [Bonnes pratiques de navigation sur Internet](https://www.ssi.gouv.fr/particulier/precautions-elementaires/bonnes-pratiques-de-navigation-sur-linternet/)
-              * [La sécurité pour les TPE/PME](https://www.ssi.gouv.fr/guide/la-cybersecurite-pour-les-tpepme-en-treize-questions/)
-              * [Infographie des 12 bonnes pratiques](https://www.ssi.gouv.fr/uploads/2016/06/bonnes_pratiques_secinfo_poster_a1_anssi.pdf)
-              * [Rapport de l'ENISA](https://www.enisa.europa.eu/publications/enisa-threat-landscape-2022/@@download/fullReport)
-          
-          --
+            Your presentation here
           </script>
         </section>
 			</div>
@@ -566,6 +57,18 @@
         width: 1280,
         heigth: 960,
         margin: 0.04,
+        customcontrols: {
+          controls: [
+            { icon: '<i class="fa fa-pen-square"></i>',
+              title: 'Toggle chalkboard (B)',
+              action: 'RevealChalkboard.toggleChalkboard();'
+            },
+            { icon: '<i class="fa fa-pen"></i>',
+              title: 'Toggle notes canvas (C)',
+              action: 'RevealChalkboard.toggleNotesCanvas();'
+            }
+          ]
+        },
 
         // mermaid initialize config
         mermaid: {
@@ -575,7 +78,7 @@
         },
 
 				// Learn about reveal.js/plugins: https://revealjs.com/reveal.js/plugins/
-				plugins: [ RevealMarkdown, RevealMermaid, RevealHighlight, RevealNotes, RevealZoom, PdfExport ],
+				plugins: [ RevealMarkdown, RevealMermaid, RevealHighlight, RevealNotes, RevealZoom, PdfExport, RevealChalkboard, RevealCustomControls],
 			});
 		</script>
 	</body>