"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "quest-ce-que-le-csrf-", "hProperties": { "id": "quest-ce-que-le-csrf-" } }, "depth": 2, "value": "Qu'est-ce que le CSRF ?" }, { "data": { "id": "comment-fonctionne-le-csrf", "hProperties": { "id": "comment-fonctionne-le-csrf" } }, "depth": 2, "value": "Comment fonctionne le CSRF" }, { "data": { "id": "politique-de-même-origine-du-navigateur", "hProperties": { "id": "politique-de-même-origine-du-navigateur" } }, "depth": 3, "value": "Politique de même origine du navigateur" }, { "data": { "id": "mécanisme-denvoi-automatique-de-cookies", "hProperties": { "id": "mécanisme-denvoi-automatique-de-cookies" } }, "depth": 3, "value": "Mécanisme d'envoi automatique de cookies" }, { "data": { "id": "étapes-dune-attaque-csrf", "hProperties": { "id": "étapes-dune-attaque-csrf" } }, "depth": 3, "value": "Étapes d'une attaque CSRF" }, { "data": { "id": "exemple-dattaque-csrf", "hProperties": { "id": "exemple-dattaque-csrf" } }, "depth": 2, "value": "Exemple d'attaque CSRF" }, { "data": { "id": "méthodes-courantes-pour-prévenir-les-attaques-csrf", "hProperties": { "id": "méthodes-courantes-pour-prévenir-les-attaques-csrf" } }, "depth": 2, "value": "Méthodes courantes pour prévenir les attaques CSRF" }, { "data": { "id": "utiliser-des-jetons-csrf", "hProperties": { "id": "utiliser-des-jetons-csrf" } }, "depth": 3, "value": "Utiliser des jetons CSRF" }, { "data": { "id": "vérification-de-len-tête-referer", "hProperties": { "id": "vérification-de-len-tête-referer" } }, "depth": 3, "value": "Vérification de l'en-tête Referer" }, { "data": { "id": "utilisation-de-lattribut-de-cookie-samesite", "hProperties": { "id": "utilisation-de-lattribut-de-cookie-samesite" } }, "depth": 3, "value": "Utilisation de l'attribut de cookie SameSite" }, { "data": { "id": "utiliser-des-en-têtes-de-requête-personnalisés", "hProperties": { "id": "utiliser-des-en-têtes-de-requête-personnalisés" } }, "depth": 3, "value": "Utiliser des en-têtes de requête personnalisés" }, { "data": { "id": "vérification-double-des-cookies", "hProperties": { "id": "vérification-double-des-cookies" } }, "depth": 3, "value": "Vérification double des cookies" }, { "data": { "id": "utiliser-une-ré-authentification-pour-les-opérations-sensibles", "hProperties": { "id": "utiliser-une-ré-authentification-pour-les-opérations-sensibles" } }, "depth": 3, "value": "Utiliser une ré-authentification pour les opérations sensibles" }, { "data": { "id": "résumé", "hProperties": { "id": "résumé" } }, "depth": 2, "value": "Résumé" }]; const readingTime = { "minutes": 7, "words": 2090, "text": "7 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "Lorsque vous travaillez dans le développement web, surtout avec les cookies, nous entendons souvent des phrases comme \"ce paramètre aide à prévenir le CSRF\". Cependant, beaucoup de gens n'ont qu'une idée vague de ce que signifie vraiment \"CSRF\"." }), "\n", _jsx(_components.p, { children: "Aujourd'hui, nous allons plonger profondément dans le CSRF (falsification de requête intersite), une faille de sécurité web courante. Cela nous aidera à gérer plus efficacement les problèmes liés au CSRF." }), "\n", _jsxs(_components.h2, { id: "quest-ce-que-le-csrf-", children: ["Qu'est-ce que le CSRF ?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#quest-ce-que-le-csrf-", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Le CSRF (falsification de requête intersite) est un type d'attaque web où les attaquants trompent des utilisateurs authentifiés pour qu'ils effectuent des actions non souhaitées. En termes simples, c'est \"les pirates se faisant passer pour des utilisateurs pour effectuer des actions non autorisées\"." }), "\n", _jsxs(_components.h2, { id: "comment-fonctionne-le-csrf", children: ["Comment fonctionne le CSRF", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#comment-fonctionne-le-csrf", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Pour comprendre le CSRF, nous devons saisir quelques concepts clés :" }), "\n", _jsxs(_components.h3, { id: "politique-de-même-origine-du-navigateur", children: ["Politique de même origine du navigateur", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#politique-de-même-origine-du-navigateur", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "La politique de même origine est une fonctionnalité de sécurité des navigateurs qui limite la manière dont un document ou un script d'une origine peut interagir avec des ressources d'une autre origine." }), "\n", _jsxs(_components.p, { children: ["Une origine se compose d'un protocole (comme HTTP ou HTTPS), d'un nom de domaine, et d'un numéro de port. Par exemple, ", _jsx(_components.code, { children: "https://example.com:443" }), " est une origine, tandis que ", _jsx(_components.code, { children: "https://demo.com:80" }), " en est une autre."] }), "\n", _jsx(_components.p, { children: "La politique de même origine restreint l'accès aux données entre les pages de différentes origines, ce qui signifie :" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "JavaScript d'une origine ne peut pas lire le DOM d'une autre origine" }), "\n", _jsx(_components.li, { children: "JavaScript d'une origine ne peut pas lire le Cookie, IndexedDB, ou localStorage d'une autre origine" }), "\n", _jsx(_components.li, { children: "JavaScript d'une origine ne peut pas envoyer de requêtes AJAX à une autre origine (sauf en utilisant CORS)" }), "\n"] }), "\n", _jsx(_components.p, { children: "Cependant, pour maintenir l'ouverture et l'interopérabilité du Web (comme charger des ressources à partir de CDN ou envoyer des requêtes à des API tierces pour la journalisation), la politique de même origine ne restreint pas les requêtes réseau entre origines :" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Les pages peuvent envoyer des requêtes GET ou POST à n'importe quelle origine (comme charger des images ou soumettre des formulaires)" }), "\n", _jsxs(_components.li, { children: ["Les ressources de n'importe quelle origine peuvent être incluses (comme les balises ", _jsx(_components.code, { children: "\n \n\n" }) }), "\n", _jsxs(_components.p, { children: ["Lorsque l'utilisateur clique sur le lien ", _jsx(_components.code, { children: "https://evil.com" }), " sans se déconnecter de son compte bancaire, comme il est déjà connecté à ", _jsx(_components.code, { children: "bank.com" }), ", le navigateur a un cookie ", _jsx(_components.code, { children: "session_id" }), " valide."] }), "\n", _jsxs(_components.p, { children: ["Après le chargement de la page malveillante, elle soumet automatiquement le formulaire caché, envoyant une demande de transfert à ", _jsx(_components.code, { children: "https://bank.com/transfer" }), "."] }), "\n", _jsxs(_components.p, { children: ["Le navigateur de l'utilisateur attache automatiquement le cookie ", _jsx(_components.code, { children: "bank.com" }), " à cette demande. Le serveur ", _jsx(_components.code, { children: "bank.com" }), " reçoit la requête, vérifie que le cookie est valide, puis exécute cette opération de transfert non autorisée."] }), "\n", _jsxs(_components.h2, { id: "méthodes-courantes-pour-prévenir-les-attaques-csrf", children: ["Méthodes courantes pour prévenir les attaques CSRF", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#méthodes-courantes-pour-prévenir-les-attaques-csrf", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Voici plusieurs méthodes de défense couramment utilisées contre le CSRF. Nous expliquerons en détail le principe de chaque méthode et la façon dont elle prévient efficacement les attaques CSRF :" }), "\n", _jsxs(_components.h3, { id: "utiliser-des-jetons-csrf", children: ["Utiliser des jetons CSRF", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#utiliser-des-jetons-csrf", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Les jetons CSRF sont l'une des méthodes les plus courantes et efficaces pour se défendre contre les attaques CSRF. Voici comment cela fonctionne :" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Le serveur génère un jeton unique et imprévisible pour chaque session." }), "\n", _jsx(_components.li, { children: "Ce jeton est intégré dans tous les formulaires pour les opérations sensibles." }), "\n", _jsx(_components.li, { children: "Lorsque l'utilisateur soumet un formulaire, le serveur vérifie la validité du jeton." }), "\n"] }), "\n", _jsx(_components.p, { children: "Étant donné que le jeton CSRF est une valeur unique liée à la session de l'utilisateur, et que l'attaquant ne peut pas connaître ou deviner cette valeur (car elle est différente pour chaque session), même si l'attaquant trompe l'utilisateur pour envoyer une requête, la requête sera rejetée par le serveur en raison de l'absence d'un jeton CSRF valide." }), "\n", _jsx(_components.p, { children: "Exemple de mise en œuvre :" }), "\n", _jsx(_components.p, { children: "Côté serveur (utilisation de Node.js et Express) :" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "const express = require('express');\nconst crypto = require('crypto');\nconst app = express();\n\n// Générer un jeton CSRF\nfunction generateCSRFToken() {\n return crypto.randomBytes(16).toString('hex');\n}\n\n// Middleware de protection CSRF\napp.use((req, res, next) => {\n if (req.method === 'GET') {\n // Générer un nouveau jeton CSRF pour chaque requête GET\n req.session.csrfToken = generateCSRFToken();\n } else if (['POST', 'PUT', 'DELETE'].includes(req.method)) {\n // Vérifier le jeton CSRF\n const submittedToken = req.body._csrf || req.headers['x-csrf-token'];\n if (submittedToken !== req.session.csrfToken) {\n return res.status(403).json({ error: 'Échec de la validation du jeton CSRF' });\n }\n }\n next();\n});\n" }) }), "\n", _jsx(_components.p, { children: "Dans JavaScript côté client :" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "// Envoyer une requête avec un jeton CSRF\nasync function sendRequestWithCSRFToken(url, method, data) {\n const csrfToken = document.querySelector('meta[name=\"csrf-token\"]').getAttribute('content');\n const response = await fetch(url, {\n method: method,\n headers: {\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': csrfToken\n },\n body: JSON.stringify(data)\n });\n return response.json();\n}\n" }) }), "\n", _jsxs(_components.h3, { id: "vérification-de-len-tête-referer", children: ["Vérification de l'en-tête ", _jsx(_components.code, { children: "Referer" }), _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#vérification-de-len-tête-referer", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["L'en-tête ", _jsx(_components.code, { children: "Referer" }), " contient l'URL de la page qui a initié la requête. En vérifiant l'en-tête ", _jsx(_components.code, { children: "Referer" }), ", le serveur peut déterminer si la requête provient d'une source légitime."] }), "\n", _jsxs(_components.p, { children: ["Étant donné que les attaques CSRF proviennent généralement de domaines différents, l'en-tête ", _jsx(_components.code, { children: "Referer" }), " indiquera le nom de domaine de l'attaquant. En vérifiant si le ", _jsx(_components.code, { children: "Referer" }), " est la valeur attendue, les requêtes provenant de sources inconnues peuvent être bloquées."] }), "\n", _jsx(_components.p, { children: "Cependant, il est à noter que cette méthode n'est pas totalement fiable, car certains navigateurs pourraient ne pas envoyer l'en-tête Referer, et les utilisateurs peuvent désactiver l'en-tête Referer via les paramètres du navigateur ou les plugins." }), "\n", _jsx(_components.p, { children: "Exemple de mise en œuvre :" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "function checkReferer(req) {\n const referer = req.get('Referer');\n return referer && referer.startsWith('https://votresite.com');\n}\n\napp.use((req, res, next) => {\n if (['POST', 'PUT', 'DELETE'].includes(req.method) && !checkReferer(req)) {\n return res.status(403).json({ error: 'Referer invalide' });\n }\n next();\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "utilisation-de-lattribut-de-cookie-samesite", children: ["Utilisation de l'attribut de cookie ", _jsx(_components.code, { children: "SameSite" }), _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#utilisation-de-lattribut-de-cookie-samesite", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "SameSite" }), " est un attribut de cookie utilisé pour contrôler si les cookies sont envoyés avec des requêtes intersites. Il a trois valeurs possibles :"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Strict" }), " : Les cookies ne sont envoyés qu'avec des requêtes de même site."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Lax" }), " : Les cookies sont envoyés avec des requêtes de même site et une navigation de premier niveau."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "None" }), " : Les cookies sont envoyés avec toutes les requêtes intersites (doit être utilisé avec l'attribut ", _jsx(_components.code, { children: "Secure" }), ")."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Lorsque ", _jsx(_components.code, { children: "SameSite" }), " est défini sur ", _jsx(_components.code, { children: "Strict" }), ", il peut complètement empêcher les sites web tiers d'envoyer des cookies, prévenant ainsi efficacement les attaques CSRF.\nSi ", _jsx(_components.code, { children: "SameSite" }), " est défini sur ", _jsx(_components.code, { children: "Lax" }), ", il protège les opérations sensibles tout en permettant certains cas d'utilisation intersites communs (comme entrer dans un site à partir de liens externes)."] }), "\n", _jsx(_components.p, { children: "Exemple de mise en œuvre :" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "res.cookie('session_id', 'abc123', {\n httpOnly: true,\n secure: true,\n sameSite: 'strict'\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "utiliser-des-en-têtes-de-requête-personnalisés", children: ["Utiliser des en-têtes de requête personnalisés", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#utiliser-des-en-têtes-de-requête-personnalisés", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Pour les requêtes AJAX, des en-têtes de requête personnalisés peuvent être ajoutés. En raison des restrictions de la politique de même origine, les attaquants ne peuvent pas définir de nouveaux en-têtes dans les requêtes entre origines. Le serveur peut vérifier la présence de cet en-tête personnalisé pour vérifier la légitimité de la requête." }), "\n", _jsx(_components.p, { children: "Exemple de mise en œuvre :" }), "\n", _jsx(_components.p, { children: "Côté client :" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "fetch('/api/data', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'X-Requested-With': 'XMLHttpRequest'\n },\n body: JSON.stringify(data)\n});\n" }) }), "\n", _jsx(_components.p, { children: "Côté serveur :" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "app.use((req, res, next) => {\n if (req.xhr || req.headers['x-requested-with'] === 'XMLHttpRequest') {\n // Gérer la requête AJAX\n } else {\n // Gérer la requête non-AJAX\n }\n next();\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "vérification-double-des-cookies", children: ["Vérification double des cookies", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#vérification-double-des-cookies", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "La vérification double des cookies est une technique de défense CSRF efficace. Son principe de base est que le serveur génère un jeton aléatoire, le définit à la fois comme un cookie et l'intègre dans la page (généralement sous forme de champ de formulaire caché). Lorsque le navigateur envoie une requête, il inclut automatiquement le cookie, tandis que le JavaScript de la page envoie le jeton comme paramètre de requête. Le serveur vérifie alors si le jeton dans le cookie correspond au jeton dans les paramètres de la requête." }), "\n", _jsx(_components.p, { children: "Bien que les attaquants puissent inclure le cookie du site cible dans les requêtes entre sites, ils ne peuvent pas lire ou modifier la valeur du cookie, ni accéder ou modifier la valeur du jeton dans la page. En exigeant que la requête inclue des jetons à la fois du cookie et des paramètres, cela garantit que la requête provient d'une source avec la permission de lire le cookie, défendant ainsi efficacement contre les attaques CSRF." }), "\n", _jsxs(_components.h3, { id: "utiliser-une-ré-authentification-pour-les-opérations-sensibles", children: ["Utiliser une ré-authentification pour les opérations sensibles", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#utiliser-une-ré-authentification-pour-les-opérations-sensibles", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Pour les opérations particulièrement sensibles (comme changer de mot de passe ou effectuer des transferts importants), les utilisateurs peuvent être tenus de se réauthentifier.\nCela fournit aux utilisateurs un point de contrôle de sécurité supplémentaire. Même si un utilisateur initie avec succès une attaque CSRF, il ne peut pas passer l'étape de ré-authentification." }), "\n", _jsx(_components.p, { children: "Suggestions de mise en œuvre :" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Avant d'effectuer des opérations sensibles, rediriger vers une page d'authentification séparée." }), "\n", _jsx(_components.li, { children: "Sur cette page, exiger que l'utilisateur entre son mot de passe ou d'autres informations de vérification d'identité." }), "\n", _jsx(_components.li, { children: "Après vérification réussie, générer un jeton à usage unique et utiliser ce jeton dans les opérations sensibles ultérieures." }), "\n"] }), "\n", _jsxs(_components.h2, { id: "résumé", children: ["Résumé", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#résumé", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Grâce à cette discussion approfondie, nous espérons que vous avez maintenant une compréhension plus complète des attaques CSRF.\nNous avons non seulement appris comment fonctionne le CSRF, mais aussi exploré diverses mesures de défense efficaces. Toutes ces méthodes peuvent améliorer efficacement la sécurité des applications web." }), "\n", _jsx(_components.p, { children: "Nous espérons que ces connaissances vous aideront à mieux gérer les problèmes liés au CSRF dans votre développement quotidien et à construire des applications web plus sécurisées." }), "\n", _jsx(LogtoCloudButton, {})] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }