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

Co-authored-by: dbroqua <contact@darkou.fr>
Reviewed-on: #59

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,42 +10,68 @@ import ErrorEvent from "../../../libs/error";
 // eslint-disable-next-line new-cap
 const router = express.Router();
 
-router.route("/").post(async (req, res, next) => {
-    try {
-        if (mailMethod === "smtp") {
-            const { email, name, message } = req.body;
+router
+    .route("/")
+    .get(async (req, res, next) => {
+        try {
+            const captcha = svgCaptcha.create({
+                size: 4,
+                noise: 2,
+                color: true,
+            });
+            req.session.captcha = captcha.text;
 
-            if (!email || !message) {
-                throw new ErrorEvent(
-                    406,
-                    "Le formulaire n'est pas correctement saisi"
-                );
+            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, 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"
+                    );
+                }
+
+                const transporter = nodemailer.createTransport(smtpConfig);
+
+                const text = `Bonjour,
+    Vous venez de recevoir un nouveau message de ${name} (${email}) :
+
+    ${message}
+                    `;
+
+                const data = await transporter.sendMail({
+                    from: smtpConfig.auth.user,
+                    to: mailTo,
+                    subject: `${siteName} : Nouveau message`,
+                    text,
+                });
+
+                const { messageId, response } = data;
+
+                return sendResponse(req, res, { messageId, response });
             }
 
-            const transporter = nodemailer.createTransport(smtpConfig);
-
-            const text = `Bonjour,
-Vous venez de recevoir un nouveau message de ${name} (${email}) :
-
-${message}
-                `;
-
-            const data = await transporter.sendMail({
-                from: smtpConfig.auth.user,
-                to: mailTo,
-                subject: `${siteName} : Nouveau message`,
-                text,
-            });
-
-            const { messageId, response } = data;
-
-            return sendResponse(req, res, { messageId, response });
+            throw new ErrorEvent(500, "Routeur", "Méthode non configurée");
+        } catch (err) {
+            return next(err);
         }
-
-        throw new ErrorEvent(500, "Méthode non configurée");
-    } catch (err) {
-        return next(err);
-    }
-});
+    });
 
 export default router;

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);
                         })