From d0287a9f7b8b5893c6d69d17c363696b2863e1bb Mon Sep 17 00:00:00 2001 From: MaxOuvrard <118462372+MaxOuvrard@users.noreply.github.com> Date: Fri, 20 Dec 2024 00:02:41 +0100 Subject: [PATCH 01/16] Add path for module ping --- front-js/src/app/dashboard/page.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/front-js/src/app/dashboard/page.tsx b/front-js/src/app/dashboard/page.tsx index 5d4c826..d2a71de 100644 --- a/front-js/src/app/dashboard/page.tsx +++ b/front-js/src/app/dashboard/page.tsx @@ -150,6 +150,7 @@ export default function Dashboard() { title="Ping" description="..." image="/modules_assets/scapy.svg" + onClick={() => router.push("/modules/ping")} /> From 61dd7436d01ebd710c05c1091ec3d1b0f102d21c Mon Sep 17 00:00:00 2001 From: MaxOuvrard <118462372+MaxOuvrard@users.noreply.github.com> Date: Fri, 20 Dec 2024 00:06:01 +0100 Subject: [PATCH 02/16] Add layout for ping moduke --- front-js/src/app/modules/ping/layout.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 front-js/src/app/modules/ping/layout.tsx diff --git a/front-js/src/app/modules/ping/layout.tsx b/front-js/src/app/modules/ping/layout.tsx new file mode 100644 index 0000000..0f21bb7 --- /dev/null +++ b/front-js/src/app/modules/ping/layout.tsx @@ -0,0 +1,14 @@ +import type { Metadata } from "next"; + +export const metadata: Metadata = { + title: "Ping Scapy", + description: "Networkers", +}; + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return {children}; +} From f737577106c20e4a32aaadca83e27e518a56a73a Mon Sep 17 00:00:00 2001 From: MaxOuvrard <118462372+MaxOuvrard@users.noreply.github.com> Date: Fri, 20 Dec 2024 00:11:34 +0100 Subject: [PATCH 03/16] Add description for card ping --- front-js/src/app/dashboard/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/front-js/src/app/dashboard/page.tsx b/front-js/src/app/dashboard/page.tsx index d2a71de..b54c1c3 100644 --- a/front-js/src/app/dashboard/page.tsx +++ b/front-js/src/app/dashboard/page.tsx @@ -148,7 +148,7 @@ export default function Dashboard() { router.push("/modules/ping")} /> From fc9c2315309051ad22920138e7e99c88168e2630 Mon Sep 17 00:00:00 2001 From: MaxOuvrard <118462372+MaxOuvrard@users.noreply.github.com> Date: Fri, 20 Dec 2024 00:13:44 +0100 Subject: [PATCH 04/16] Fix description for card ping --- front-js/src/app/dashboard/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/front-js/src/app/dashboard/page.tsx b/front-js/src/app/dashboard/page.tsx index b54c1c3..d1ab224 100644 --- a/front-js/src/app/dashboard/page.tsx +++ b/front-js/src/app/dashboard/page.tsx @@ -148,7 +148,7 @@ export default function Dashboard() { router.push("/modules/ping")} /> From ee7edada2f77380546c4370019375ffa3279c24c Mon Sep 17 00:00:00 2001 From: MaxOuvrard <118462372+MaxOuvrard@users.noreply.github.com> Date: Fri, 20 Dec 2024 00:59:57 +0100 Subject: [PATCH 05/16] Add front page ping module --- front-js/src/app/modules/ping/page.tsx | 90 ++++++++++++++++++++++++++ 1 file changed, 90 insertions(+) diff --git a/front-js/src/app/modules/ping/page.tsx b/front-js/src/app/modules/ping/page.tsx index e69de29..60ddf37 100644 --- a/front-js/src/app/modules/ping/page.tsx +++ b/front-js/src/app/modules/ping/page.tsx @@ -0,0 +1,90 @@ +"use client"; + +import Layout from "@/components/Layout"; +import Header from "@/components/Header"; +import Title from "@/components/Title"; +import Box from "@/components/Box"; +import { useRouter } from "next/navigation"; +import { useEffect, useState } from "react"; +import Cookies from "js-cookie"; +import axios from "@/axiosConfig"; +import { Tabs, Tab } from "@mui/material"; +import Cours from "./cours"; +import PingSandbox from "./pingSandbox"; + +export default function Ping() { + const router = useRouter(); + + const [, setHasAccessToken] = useState(false); + + useEffect(() => { + const checkTokens = async () => { + const token = Cookies.get("access_token"); + const refresh = Cookies.get("refresh_token"); + if (!token && refresh) { + try { + const response = await axios.post("/auth/refresh", { + refresh_token: refresh, + }); + const data = response.data; + if (response.status === 200) { + Cookies.set("access_token", data.access_token); + Cookies.set("refresh_token", refresh); + } + } catch { + Cookies.remove("access_token"); + Cookies.remove("refresh_token"); + } + } + setHasAccessToken(!!token); + + if (!token && !refresh) { + router.push("/"); + } + }; + + checkTokens(); + }, [router]); + + const [activeTab, setActiveTab] = useState("cours"); + + const handleTabChange = (tab: string) => { + setActiveTab(tab); + }; + + return ( + + +
router.push(`/${tab.toLowerCase()}`)} + onClickLogout={() => router.push("/auth/logout")} + onClickLogo={() => router.push("/")} + /> + + + + Ping + + + + handleTabChange(tab)} + centered + > + + + + + + {activeTab === "cours" ? : } + + + ); +} From 8b59730231fdabc1514de6c7966c60ede95ce0f3 Mon Sep 17 00:00:00 2001 From: MaxOuvrard <118462372+MaxOuvrard@users.noreply.github.com> Date: Fri, 20 Dec 2024 01:00:33 +0100 Subject: [PATCH 06/16] Add lesson for module ping --- front-js/src/app/modules/ping/cours.tsx | 140 ++++++++++++++++++++++++ 1 file changed, 140 insertions(+) create mode 100644 front-js/src/app/modules/ping/cours.tsx diff --git a/front-js/src/app/modules/ping/cours.tsx b/front-js/src/app/modules/ping/cours.tsx new file mode 100644 index 0000000..64fd9dd --- /dev/null +++ b/front-js/src/app/modules/ping/cours.tsx @@ -0,0 +1,140 @@ +import Title from "@/components/Title"; +import Text from "@/components/Text"; +import React from "react"; +import { Code, solarizedLight } from "react-code-blocks"; +import { Spacer } from "@nextui-org/spacer"; +import Space from "@/components/Space"; +import { Emoji, EmojiProvider } from "react-apple-emojis"; +import emojiData from "react-apple-emojis/src/data.json"; +import Input from "@/components/Input"; +import { useState } from "react"; +import axios from "@/axiosConfig"; +import Cookies from "js-cookie"; +import { AxiosError } from "axios"; +import Button from "@/components/Button"; +import { Alert } from "@mui/material"; +import Box from "@/components/Box"; + +const Cours: React.FC = () => { + const [pingTest, setPing] = useState(""); + const [res, setRes] = useState(""); + const [valid, setValid] = useState(false); + + const handlePing = async (e: { preventDefault: () => void }) => { + e.preventDefault(); + try { + const response = await axios.get( + "/scapy/ping/127.0.0.1", + { + headers: { + Authorization: `Bearer ${Cookies.get("access_token")}`, + }, + } + ); + const data = response.data; + if (response.status === 200) { + setRes(data.ipv6); + setValid(res == pingTest); + } + } catch (error: unknown) { + const axiosError = error as AxiosError; + if (axiosError.response?.status === 400) { + const data = axiosError.response.data as { detail: string }; + if (data.detail === "Invalid IPv6") { + setRes("false"); + } else { + setRes("false"); + } + } else { + setRes("false"); + } + } + }; + + return ( + <> + + + Introduction + + Le ping est un outil réseau de base utilisé pour tester la connectivité entre deux appareils + sur un réseau, en envoyant des paquets ICMP Echo Request et en attendant des paquets ICMP. + Dans ce cours, nous allons utiliser la librairie Scapy en Python pour simuler l'envoi d'un ping + à travers le réseau. Scapy permet de manipuler facilement les paquets à différents niveaux du + modèle OSI, et dans ce cas, nous allons nous concentrer sur les paquets ICMP au niveau de la + couche réseau (couche 3 du modèle OSI). + + + Structure paquet ICMP + + + Un paquet ICMP utilisé pour le ping est composé de plusieurs parties : + + + 1. IP : l'en-tête IP (version 4 ou 6) qui contient des informations sur l'adresse de + destination et l'origine du paquet. + + + 2. ICMP : l'en-tête du protocole ICMP qui contient le type, le code et des informations + supplémentaires comme un identifiant et un numéro de séquence. + + + Voici un exemple de commande que vous pourriez utiliser afin de réaliser un ping : + + + + + Réponse d'une requête ping + + + Essayez ! <Emoji name="test-tube" width={32} /> + + Tentez de ping le site de Google. + +
+ setPing(e.target.value)} + value={pingTest} + type="text" + placeholder="ex : ping 127.0.0.1" + margin={{ bottom: "20px" }} + required + label="Requête ping" + /> +