#41 - Ajouter une sécurité sur la page nous contacter

package.json

@@ -67,6 +67,7 @@
     "passport-local": "^1.0.0",
     "rimraf": "^3.0.2",
     "sass": "^1.49.7",
+    "svg-captcha": "^1.4.0",
     "uuid": "^8.3.2",
     "vue": "^3.2.31"
   },

src/middleware/Albums.js

@@ -197,7 +197,11 @@ class Albums extends Pages {
         });
 
         if (!album) {
-            throw new ErrorEvent(404, "Impossible de trouver cet album");
+            throw new ErrorEvent(
+                404,
+                "Mise à jour",
+                "Impossible de trouver cet album"
+            );
         }
 
         const values = await getAlbumDetails(album.discogsId);
@@ -221,7 +225,11 @@ class Albums extends Pages {
             return true;
         }
 
-        throw new ErrorEvent(404, "Impossible de trouver cet album");
+        throw new ErrorEvent(
+            404,
+            "Suppression",
+            "Impossible de trouver cet album"
+        );
     }
 
     /**

src/routes/api/v1/contact.js

@@ -1,5 +1,6 @@
 import express from "express";
 import nodemailer from "nodemailer";
+import svgCaptcha from "svg-captcha";
 
 import { sendResponse } from "../../../libs/format";
 
@@ -9,14 +10,40 @@ import ErrorEvent from "../../../libs/error";
 // eslint-disable-next-line new-cap
 const router = express.Router();
 
-router.route("/").post(async (req, res, next) => {
+router
+    .route("/")
+    .get(async (req, res, next) => {
+        try {
+            const captcha = svgCaptcha.create({
+                size: 4,
+                noise: 2,
+                color: true,
+            });
+            req.session.captcha = captcha.text;
+
+            res.type("svg");
+            return res.status(200).send(captcha.data);
+        } catch (err) {
+            return next(err);
+        }
+    })
+    .post(async (req, res, next) => {
         try {
             if (mailMethod === "smtp") {
-            const { email, name, message } = req.body;
+                const { email, name, message, captcha } = req.body;
+
+                if (!captcha || captcha !== req.session.captcha) {
+                    throw new ErrorEvent(
+                        406,
+                        "Captcha",
+                        "Le captcha n'est pas valide"
+                    );
+                }
 
                 if (!email || !message) {
                     throw new ErrorEvent(
                         406,
+                        "Erreur de saisie",
                         "Le formulaire n'est pas correctement saisi"
                     );
                 }
@@ -41,7 +68,7 @@ ${message}
                 return sendResponse(req, res, { messageId, response });
             }
 
-        throw new ErrorEvent(500, "Méthode non configurée");
+            throw new ErrorEvent(500, "Routeur", "Méthode non configurée");
         } catch (err) {
             return next(err);
         }

views/pages/nous-contacter.ejs

@@ -17,6 +17,14 @@
             <textarea name="message" id="message" rows="6" required v-model="message" ></textarea>
         </div>
 
+        <% if (config.mailMethod !== 'formspree' ) { %>
+            <img src="/api/v1/contact" alt="Captcha" />
+            <div class="field">
+                <label for="captcha">Captcha</label>
+                <input type="text" name="captcha" id="captcha" v-model="captcha" required />
+            </div>
+        <% } %>
+
         <button type="submit" class="button is-primary" :disabled="loading">
             <% if (config.mailMethod !== 'formspree' ) { %>
             <i class="icon-spin animate-spin" v-if="loading"></i>
@@ -34,6 +42,7 @@
                     email: '',
                     name: '',
                     message: '',
+                    captcha: '',
                     loading: false,
                 }
             },
@@ -50,10 +59,11 @@
                     const {
                         email,
                         message,
-                        name
+                        name,
+                        captcha,
                     } = this;
 
-                    axios.post('/api/v1/contact', {email, name, message})
+                    axios.post('/api/v1/contact', {email, name, message, captcha})
                         .then( () => {
                             showToastr("Message correctement envoyé", true);
                         })