merge: fix conflicts and commits merged from main

README.md

@@ -79,6 +79,12 @@ Once the server is up and running, you can interact with it via the frontend:
 }
 ```
 
+## Adding Proxies and User-Agents
+
+Access to the ``data/proxies.txt`` and ``data/uas.txt`` can now be done fully in the frontend. Click the text button to the right of the beam button to open up the editor.
+
+![AnnotatedImage](docs/annotated-button.png)
+
 ## Worker-Based Attack Handling 🔧💡
 
 Each attack type is handled in a separate worker thread, ensuring that the main server remains responsive. The attack workers are dynamically loaded based on the selected attack method (HTTP, etc...).

data/proxies.txt

@@ -1,5 +1,5 @@
-socks4://199.58.184.97:4145
+socks4://199.58.184.97:4145
-socks4://192.111.139.163:19404
+socks4://192.111.139.163:19404
-socks4://199.187.210.54:4145
+socks4://199.187.210.54:4145
-socks4://46.105.127.74:45108
+socks4://46.105.127.74:45108
 socks4://98.188.47.150:4145

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "axios": "^1.7.9",
+    "body-parser": "^1.20.3",
     "concurrently": "^9.1.2",
     "express": "^4.21.2",
     "lucide-react": "^0.344.0",

server/fileLoader.ts

@@ -3,7 +3,7 @@ import { join } from "path";
 
 import { Proxy } from "./lib";
 
-const currentPath = () => {
+export const currentPath = () => {
   const path = process.cwd();
   return path === "/" ? "." : path;
 };

server/index.ts

@@ -1,13 +1,15 @@
 import express from "express";
 import { createServer } from "http";
 import { dirname, join } from "path";
+import { readFileSync, writeFileSync } from "fs";
 import { Server } from "socket.io";
 import { fileURLToPath } from "url";
 import { Worker } from "worker_threads";
 
-import { loadProxies, loadUserAgents } from "./fileLoader";
+import { currentPath, loadProxies, loadUserAgents } from "./fileLoader";
 import { AttackMethod } from "./lib";
 import { filterProxies } from "./proxyUtils";
+import bodyParser from "body-parser";
 
 // Define the workers based on attack type
 const attackWorkers: { [key in AttackMethod]: string } = {
@@ -26,6 +28,7 @@ const io = new Server(httpServer, {
   cors: {
     origin: "http://localhost:5173",
     methods: ["GET", "POST"],
+    allowedHeaders: ["Content-Type"]
   },
 });
 
@@ -105,6 +108,47 @@ io.on("connection", (socket) => {
   });
 });
 
+app.get("/configuration", (req, res) => {
+  res.setHeader("Access-Control-Allow-Origin", "http://localhost:5173")
+  res.setHeader("Content-Type", "application/json");
+  let proxiesText = readFileSync(join(currentPath(), "data", "proxies.txt"), "utf-8");
+  let uasText = readFileSync(join(currentPath(), "data", "uas.txt"), "utf-8");
+
+  res.send({
+    proxies: btoa(proxiesText),
+    uas: btoa(uasText),
+  })
+})
+
+app.options('/configuration', (req, res) => {
+  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:5173');
+  res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS');
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
+  res.send();
+});
+
+
+app.post("/configuration", bodyParser.json(), (req, res) => {
+  res.setHeader("Access-Control-Allow-Methods", "POST");
+  res.setHeader("Access-Control-Allow-Headers", "Content-Type")
+  res.setHeader("Access-Control-Allow-Origin", "http://localhost:5173")
+  res.setHeader("Content-Type", "application/text");
+
+  // console.log(req.body)
+
+  // atob and btoa are used to avoid the problems in sending data with // characters, etc.
+  let proxies = atob(req.body["proxies"]);
+  let uas = atob(req.body["uas"]);
+  writeFileSync(join(currentPath(), "data", "proxies.txt"), proxies, {
+    encoding: "utf-8"
+  });
+  writeFileSync(join(currentPath(), "data", "uas.txt"), uas, {
+    encoding: "utf-8"
+  });
+
+  res.send("OK")
+})
+
 const PORT = 3000;
 httpServer.listen(PORT, () => {
   console.log(`Server running on port ${PORT}`);

src/App.tsx

@@ -1,9 +1,97 @@
-import { Bot, Wand2, Wifi, Zap } from "lucide-react";
+import { Bot, ScrollText, Wand2, Wifi, Zap } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { io } from "socket.io-client";
 
 const socket = io("http://localhost:3000");
 
+function ConfigureProxiesAndAgentsView() {
+  const [loadingConfiguration, setLoadingConfiguration] = useState(false);
+  const [configuration, setConfiguration] = useState<string[]>([]);
+
+  async function retrieveConfiguration(): Promise<string[]> {
+    const response = await fetch(`http://localhost:3000/configuration`);
+    const information = (await response.json()) as {
+      proxies: string;
+      uas: string;
+    };
+
+    const proxies = atob(information.proxies);
+    const uas = atob(information.uas);
+
+    return [proxies, uas];
+  }
+
+  useEffect(() => {
+    if (!loadingConfiguration) {
+      setLoadingConfiguration(true);
+      retrieveConfiguration().then((config) => {
+        setLoadingConfiguration(false);
+        setConfiguration(config);
+      });
+    }
+  }, []);
+
+  function saveConfiguration() {
+    const obj = {
+      proxies: btoa(configuration[0]),
+      uas: btoa(configuration[1]),
+    };
+
+    // console.log(obj)
+
+    const response = fetch(`http://localhost:3000/configuration`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(obj),
+    });
+
+    response.then(() => {
+      alert("Saved");
+      window.location.reload();
+    });
+  }
+
+  return (
+    <div className="fixed grid p-8 mx-auto -translate-x-1/2 -translate-y-1/2 bg-white rounded-md shadow-lg max-w-7xl place-items-center left-1/2 top-1/2">
+      {loadingConfiguration ? (
+        <div className="flex flex-col items-center justify-center space-y-2">
+          <img src="/loading.gif" className="rounded-sm shadow-sm" />
+          <p>Loading proxies.txt and uas.txt...</p>
+        </div>
+      ) : (
+        <div className="w-[56rem] flex flex-col">
+          <p className="pl-1 mb-1 italic">proxies.txt</p>
+          <textarea
+            value={configuration[0]}
+            className="w-full h-40 p-2 border-black/10 border-[1px] rounded-sm resize-none"
+            onChange={(e) =>
+              setConfiguration([e.target.value, configuration[1]])
+            }
+            placeholder="socks5://0.0.0.0"
+          ></textarea>
+          <p className="pl-1 mt-2 mb-1 italic">uas.txt</p>
+          <textarea
+            value={configuration[1]}
+            className="w-full h-40 p-2 border-black/10 border-[1px] rounded-sm resize-none"
+            onChange={(e) =>
+              setConfiguration([configuration[0], e.target.value])
+            }
+            placeholder="Mozilla/5.0 (Linux; Android 10; K)..."
+          ></textarea>
+          <button
+            onClick={saveConfiguration}
+            className="p-4 mt-4 text-white bg-gray-800 rounded-md hover:bg-gray-900"
+          >
+            Write Changes
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
 function App() {
   const [isAttacking, setIsAttacking] = useState(false);
   const [actuallyAttacking, setActuallyAttacking] = useState(false);
@@ -24,6 +112,8 @@ function App() {
   const [lastTotalPackets, setLastTotalPackets] = useState(0);
   const [currentTask, setCurrentTask] = useState<NodeJS.Timeout | null>(null);
   const [audioVol, setAudioVol] = useState(100);
+  const [openedConfig, setOpenedConfig] = useState(false);
+
   const audioRef = useRef<HTMLAudioElement>(null);
 
   useEffect(() => {
@@ -32,7 +122,11 @@ function App() {
       const handler = () => {
         if (audio.paused) return;
 
-        if (animState !== 2 && audio.currentTime > 5.24 && audio.currentTime < 9.4) {
+        if (
+          animState !== 2 &&
+          audio.currentTime > 5.24 &&
+          audio.currentTime < 9.4
+        ) {
           setAnimState(2);
         }
         if (audio.currentTime > 17.53) {
@@ -98,13 +192,11 @@ function App() {
     };
   }, []);
 
-  
   useEffect(() => {
     if (audioRef.current) {
       audioRef.current.volume = audioVol / 100;
     }
-  }, [audioVol])
+  }, [audioVol]);
- 
 
   const addLog = (message: string) => {
     setLogs((prev) => [message, ...prev].slice(0, 12));
@@ -158,9 +250,13 @@ function App() {
 
   return (
     <div
-      className={`w-screen h-screen bg-gradient-to-br ${animState === 0 || animState === 3 ? "from-pink-100 to-blue-100" : animState === 2 ? "background-pulse" : "bg-gray-950"} p-8 overflow-y-auto ${
+      className={`w-screen h-screen bg-gradient-to-br ${
-        actuallyAttacking ? "shake" : ""
+        animState === 0 || animState === 3
-      }`}
+          ? "from-pink-100 to-blue-100"
+          : animState === 2
+          ? "background-pulse"
+          : "bg-gray-950"
+      } p-8 overflow-y-auto ${actuallyAttacking ? "shake" : ""}`}
     >
       <audio ref={audioRef} src="/audio.mp3" />
 
@@ -169,13 +265,23 @@ function App() {
           <h1 className="mb-2 text-4xl font-bold text-pink-500">
             Miku Miku Beam
           </h1>
-          <p className={`${animState === 0 || animState === 3 ? "text-gray-600" : "text-white"}`}>
+          <p
+            className={`${
+              animState === 0 || animState === 3
+                ? "text-gray-600"
+                : "text-white"
+            }`}
+          >
             Because DDoS attacks are also cute and even more so when Miku does
             them.
           </p>
         </div>
 
-        <div className={`relative p-6 overflow-hidden rounded-lg shadow-xl ${animState === 0 || animState === 3 ? "bg-white" : "bg-gray-950"}`}>
+        <div
+          className={`relative p-6 overflow-hidden rounded-lg shadow-xl ${
+            animState === 0 || animState === 3 ? "bg-white" : "bg-gray-950"
+          }`}
+        >
           {/* Miku GIF */}
           <div
             className="flex justify-center w-full h-48 mb-6"
@@ -197,7 +303,9 @@ function App() {
                 value={target}
                 onChange={(e) => setTarget(e.target.value)}
                 placeholder="Enter target URL or IP"
-                className={`${animState === 0 || animState === 3 ? "" : "text-white"} px-4 py-2 border border-pink-200 rounded-lg outline-none focus:border-pink-500 focus:ring-2 focus:ring-pink-200`}
+                className={`${
+                  animState === 0 || animState === 3 ? "" : "text-white"
+                } px-4 py-2 border border-pink-200 rounded-lg outline-none focus:border-pink-500 focus:ring-2 focus:ring-pink-200`}
                 disabled={isAttacking}
               />
               <div className="flex items-center gap-2">
@@ -232,18 +340,32 @@ function App() {
                 >
                   <Zap className="w-5 h-5" />
                 </button>
+                <button
+                  className={`px-2 py-2 rounded-lg font-semibold text-white transition-all flex items-center justify-center gap-2 bg-slate-800 hover:bg-slate-900`}
+                  onClick={() => setOpenedConfig(true)}
+                >
+                  <ScrollText className="w-5 h-5" />
+                </button>
               </div>
             </div>
 
             <div className="grid grid-cols-4 gap-4">
               <div>
-                <label className={`block mb-1 text-sm font-medium ${animState === 0 || animState === 3 ? "text-gray-700" : "text-white"}`}>
+                <label
+                  className={`block mb-1 text-sm font-medium ${
+                    animState === 0 || animState === 3
+                      ? "text-gray-700"
+                      : "text-white"
+                  }`}
+                >
                   Attack Method
                 </label>
                 <select
                   value={attackMethod}
                   onChange={(e) => setAttackMethod(e.target.value)}
-                  className={`${animState === 0 || animState === 3 ? "" : "text-gray-900"} w-full px-4 py-2 border border-pink-200 rounded-lg outline-none focus:border-pink-500 focus:ring-2 focus:ring-pink-200`}
+                  className={`${
+                    animState === 0 || animState === 3 ? "" : "text-gray-900"
+                  } w-full px-4 py-2 border border-pink-200 rounded-lg outline-none focus:border-pink-500 focus:ring-2 focus:ring-pink-200`}
                   disabled={isAttacking}
                 >
                   <option value="http_flood">HTTP/Flood</option>
@@ -253,42 +375,66 @@ function App() {
                 </select>
               </div>
               <div>
-                <label className={`block mb-1 text-sm font-medium ${animState === 0 || animState === 3 ? "text-gray-700" : "text-white"}`}>
+                <label
+                  className={`block mb-1 text-sm font-medium ${
+                    animState === 0 || animState === 3
+                      ? "text-gray-700"
+                      : "text-white"
+                  }`}
+                >
                   Packet Size (kb)
                 </label>
                 <input
                   type="number"
                   value={packetSize}
                   onChange={(e) => setPacketSize(Number(e.target.value))}
-                  className={`${animState === 0 || animState === 3 ? "" : "text-white"} w-full px-4 py-2 border border-pink-200 rounded-lg outline-none focus:border-pink-500 focus:ring-2 focus:ring-pink-200`}
+                  className={`${
+                    animState === 0 || animState === 3 ? "" : "text-white"
+                  } w-full px-4 py-2 border border-pink-200 rounded-lg outline-none focus:border-pink-500 focus:ring-2 focus:ring-pink-200`}
                   disabled={isAttacking}
                   min="1"
                   max="1500"
                 />
               </div>
               <div>
-                <label className={`block mb-1 text-sm font-medium ${animState === 0 || animState === 3 ? "text-gray-700" : "text-white"}`}>
+                <label
+                  className={`block mb-1 text-sm font-medium ${
+                    animState === 0 || animState === 3
+                      ? "text-gray-700"
+                      : "text-white"
+                  }`}
+                >
                   Duration (seconds)
                 </label>
                 <input
                   type="number"
                   value={duration}
                   onChange={(e) => setDuration(Number(e.target.value))}
-                  className={`${animState === 0 || animState === 3 ? "" : "text-white"} w-full px-4 py-2 border border-pink-200 rounded-lg outline-none focus:border-pink-500 focus:ring-2 focus:ring-pink-200`}
+                  className={`${
+                    animState === 0 || animState === 3 ? "" : "text-white"
+                  } w-full px-4 py-2 border border-pink-200 rounded-lg outline-none focus:border-pink-500 focus:ring-2 focus:ring-pink-200`}
                   disabled={isAttacking}
                   min="1"
                   max="300"
                 />
               </div>
               <div>
-                <label className={`block mb-1 text-sm font-medium ${animState === 0 || animState === 3 ? "text-gray-700" : "text-white"}`}>
+                <label
+                  className={`block mb-1 text-sm font-medium ${
+                    animState === 0 || animState === 3
+                      ? "text-gray-700"
+                      : "text-white"
+                  }`}
+                >
                   Packet Delay (ms)
                 </label>
                 <input
                   type="number"
                   value={packetDelay}
                   onChange={(e) => setPacketDelay(Number(e.target.value))}
-                  className={`${animState === 0 || animState === 3 ? "" : "text-white"} w-full px-4 py-2 border border-pink-200 rounded-lg outline-none focus:border-pink-500 focus:ring-2 focus:ring-pink-200`}
+                  className={`${
+                    animState === 0 || animState === 3 ? "" : "text-white"
+                  } w-full px-4 py-2 border border-pink-200 rounded-lg outline-none focus:border-pink-500 focus:ring-2 focus:ring-pink-200`}
                   disabled={isAttacking}
                   min="1"
                   max="1000"
@@ -304,7 +450,13 @@ function App() {
                 <Zap className="w-4 h-4" />
                 <span className="font-semibold">Packets/sec</span>
               </div>
-              <div className={`text-2xl font-bold ${animState === 0 || animState === 3 ? "text-gray-800" : "text-white"}`}>
+              <div
+                className={`text-2xl font-bold ${
+                  animState === 0 || animState === 3
+                    ? "text-gray-800"
+                    : "text-white"
+                }`}
+              >
                 {stats.pps.toLocaleString()}
               </div>
             </div>
@@ -313,7 +465,13 @@ function App() {
                 <Bot className="w-4 h-4" />
                 <span className="font-semibold">Active Bots</span>
               </div>
-              <div className={`text-2xl font-bold ${animState === 0 || animState === 3 ? "text-gray-800" : "text-white"}`}>
+              <div
+                className={`text-2xl font-bold ${
+                  animState === 0 || animState === 3
+                    ? "text-gray-800"
+                    : "text-white"
+                }`}
+              >
                 {stats.bots.toLocaleString()}
               </div>
             </div>
@@ -322,7 +480,13 @@ function App() {
                 <Wifi className="w-4 h-4" />
                 <span className="font-semibold">Total Packets</span>
               </div>
-              <div className={`text-2xl font-bold ${animState === 0 || animState === 3 ? "text-gray-800" : "text-white"}`}>
+              <div
+                className={`text-2xl font-bold ${
+                  animState === 0 || animState === 3
+                    ? "text-gray-800"
+                    : "text-white"
+                }`}
+              >
                 {stats.totalPackets.toLocaleString()}
               </div>
             </div>
@@ -363,20 +527,31 @@ function App() {
           )}
         </div>
 
+        {openedConfig ? <ConfigureProxiesAndAgentsView /> : undefined}
+
         <div className="flex flex-col items-center">
-          <span className="text-sm text-center text-gray-500"> 
+          <span className="text-sm text-center text-gray-500">
-          🎵 v1.0 made by{" "}
+            🎵 v1.0 made by{" "}
-          <a
+            <a
-            href="https://github.com/sammwyy/mikumikubeam"
+              href="https://github.com/sammwyy/mikumikubeam"
-            target="_blank"
+              target="_blank"
-            rel="noreferrer"
+              rel="noreferrer"
-          >
+            >
-            @Sammwy
+              @Sammwy
-          </a>{" "}
+            </a>{" "}
-          🎵
+            🎵
           </span>
           <span>
-          <input className="shadow-sm volume_bar focus:border-pink-500" type="range" min="0" max="100" step="5" draggable="false" value={audioVol} onChange={(e) => setAudioVol(parseInt(e.target?.value))} />
+            <input
+              className="shadow-sm volume_bar focus:border-pink-500"
+              type="range"
+              min="0"
+              max="100"
+              step="5"
+              draggable="false"
+              value={audioVol}
+              onChange={(e) => setAudioVol(parseInt(e.target?.value))}
+            />
           </span>
         </div>
       </div>