feat(command-injection): Add command injection example

backend/Dockerfile

@@ -1,5 +1,10 @@
 FROM node:23-slim
 
+RUN apt update && \
+    apt install -y iputils-ping \
+    && apt clean \
+    && rm -rf /var/lib/apt/lists/*
+
 WORKDIR /app
 COPY . .
 RUN npm install

backend/index.js

@@ -1,6 +1,7 @@
 const express = require('express');
 const mysql = require('mysql2');
 const cors = require('cors');
+const { exec } = require('child_process');
 const app = express();
 
 const db = require('./db');
@@ -35,4 +36,23 @@ app.post('/api/login', (req, res) => {
   });
 });
 
+app.post('/api/ping', (req, res) => {
+  const { ip } = req.body;
+
+  // 🚨 INTENTIONALLY VULNERABLE TO COMMAND INJECTION
+  const command = `ping -c 4 ${ip}`;
+  exec(command, (err, stdout, stderr) => {
+    if (err) {
+      return res.status(500).json({
+        output: stderr,
+        command: command
+      });
+    }
+    res.json({
+      output: stdout,
+      command: command
+    });
+  });
+});
+
 app.listen(5000, () => console.log('Backend running on port 5000'));

docker-compose.yaml

@@ -20,6 +20,8 @@ services:
     restart: always
     ports:
       - "5000:5000"
+    cap_add:
+      - NET_RAW
     depends_on:
       db:
         condition: service_healthy

frontend/src/App.jsx

@@ -1,6 +1,7 @@
 import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
 import SQLInjection from './pages/SQLInjection';
 import { Navbar, Nav, Container } from 'react-bootstrap';
+import CommandInjection from './pages/CommandInjection';
 
 function App() {
   return (
@@ -12,6 +13,7 @@ function App() {
           <Navbar.Collapse id="basic-navbar-nav">
             <Nav className="me-auto">
               <Nav.Link as={Link} to="/sqli">SQL Injection</Nav.Link>
+              <Nav.Link as={Link} to="/cmdi">Command Injection</Nav.Link>
             </Nav>
           </Navbar.Collapse>
         </Container>
@@ -19,6 +21,7 @@ function App() {
       <div style={{ padding: 20 }}>
         <Routes>
           <Route path="/sqli" element={<SQLInjection />} />
+          <Route path="/cmdi" element={<CommandInjection />} />
         </Routes>
       </div>
     </Router>

frontend/src/pages/CommandInjection.jsx

@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+import { Card, Container, Form, Button, Alert } from "react-bootstrap";
+
+export default function CommandInjection() {
+  const [ipAddress, setIpAddress] = useState("");
+  const [output, setOutput] = useState("");
+  const [command, setCommand] = useState("");
+  const [showCommand, setShowCommand] = useState(false);
+  const [status, setStatus] = useState(null);
+
+  const handlePing = async () => {
+    const res = await fetch("http://localhost:5000/api/ping", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ ip: ipAddress }),
+    });
+    const data = await res.json();
+    setStatus(res.status);
+    setOutput(data.output);
+    setCommand(data.command);
+  };
+
+  return (
+    <Container className="mt-5">
+      <Card className="shadow">
+        <Card.Body>
+          <Card.Title className="text-center">Ping Test</Card.Title>
+          <Form>
+            <Form.Group className="mb-3" controlId="formIpAddress">
+              <Form.Control
+                type="text"
+                placeholder="Enter IP Address"
+                onChange={(e) => setIpAddress(e.target.value)}
+              />
+            </Form.Group>
+            <Form.Group className="mb-3" controlId="formShowCommand">
+              <Form.Check
+                type="checkbox"
+                label="Show command"
+                checked={showCommand}
+                onChange={(e) => setShowCommand(e.target.checked)}
+              />
+            </Form.Group>
+            <div className="d-grid">
+              <Button variant="primary" onClick={handlePing}>
+                Ping
+              </Button>
+            </div>
+          </Form>
+          {output && (
+            <Alert
+              className={`mt-3 ${
+                status === 200 ? "alert-success" : "alert-warning"
+              }`}
+            >
+              <strong>Output:</strong> {output}
+            </Alert>
+          )}
+          {showCommand && command && (
+            <Alert className="mt-3 info">
+              <strong>Command:</strong> {command}
+            </Alert>
+          )}
+        </Card.Body>
+      </Card>
+    </Container>
+  );
+}