feat(xss): Add stored xss

backend/index.js

@@ -55,4 +55,32 @@ app.post('/api/ping', (req, res) => {
   });
 });
 
+// Endpoint to add a new post
+app.post('/api/posts', (req, res) => {
+  const { post } = req.body;
+
+  if (!post || post.trim() === '') {
+    return res.status(400).json({ message: 'Post content cannot be empty' });
+  }
+
+  const query = 'INSERT INTO posts (content) VALUES (?)';
+  db.query(query, [post], (err, results) => {
+    if (err) {
+      return res.status(500).json({ message: 'Error adding post', error: err });
+    }
+    res.json({ message: 'Post added successfully', postId: results.insertId });
+  });
+});
+
+// Endpoint to get all posts
+app.get('/api/posts', (req, res) => {
+  const query = 'SELECT * FROM posts';
+  db.query(query, (err, results) => {
+    if (err) {
+      return res.status(500).json({ message: 'Error fetching posts', error: err });
+    }
+    res.json({ posts: results });
+  });
+});
+
 app.listen(5000, () => console.log('Backend running on port 5000'));

db/init.sql

@@ -4,5 +4,10 @@ CREATE TABLE users (
   password VARCHAR(255)
 );
 
+CREATE TABLE posts (
+  id INT AUTO_INCREMENT PRIMARY KEY,
+  content TEXT NOT NULL
+);
+
 INSERT INTO users (username, password) VALUES ('admin', 'admin123');
 INSERT INTO users (username, password) VALUES ('user', 'password');

frontend/src/App.jsx

@@ -2,6 +2,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';
+import XSS from './pages/XSS';
 
 function App() {
   return (
@@ -14,6 +15,7 @@ function App() {
             <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.Link as={Link} to="/xss">XSS</Nav.Link>
             </Nav>
           </Navbar.Collapse>
         </Container>
@@ -22,6 +24,7 @@ function App() {
         <Routes>
           <Route path="/sqli" element={<SQLInjection />} />
           <Route path="/cmdi" element={<CommandInjection />} />
+          <Route path="/xss" element={<XSS />} />
         </Routes>
       </div>
     </Router>

frontend/src/pages/XSS.jsx

@@ -0,0 +1,74 @@
+import React, { useState } from "react";
+import { Card, Container, Form, Button, Alert, ListGroup } from "react-bootstrap";
+
+export default function XSS() {
+  const [posts, setPosts] = useState([]);
+  const [newPost, setNewPost] = useState("");
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const handleAddPost = () => {
+    if (newPost.trim()) {
+      setPosts([...posts, newPost]);
+      setNewPost("");
+    }
+  };
+
+  const filteredPosts = posts.filter((post) =>
+    post.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  return (
+    <Container className="mt-5">
+      <Card className="shadow">
+        <Card.Body>
+          <Card.Title className="text-center">Posts</Card.Title>
+
+          {/* List of Posts */}
+          <h5>Posts</h5>
+          <ListGroup className="mb-3">
+            {filteredPosts.length > 0 ? (
+              filteredPosts.map((post, index) => (
+                <ListGroup.Item key={index}>
+                  {/* Rendering posts directly (stored XSS vulnerability) */}
+                  <span dangerouslySetInnerHTML={{ __html: post }} />
+                </ListGroup.Item>
+              ))
+            ) : (
+              <ListGroup.Item>No posts available</ListGroup.Item>
+            )}
+          </ListGroup>
+
+          {/* Add New Post */}
+          <Form>
+            <Form.Group className="mb-3" controlId="formNewPost">
+              <Form.Control
+                type="text"
+                placeholder="Enter new post"
+                value={newPost}
+                onChange={(e) => setNewPost(e.target.value)}
+              />
+            </Form.Group>
+            <div className="d-grid">
+              <Button variant="primary" onClick={handleAddPost}>
+                Add Post
+              </Button>
+            </div>
+          </Form>
+
+          {/* Search Functionality */}
+          <h5 className="mt-4">Search</h5>
+          <Form>
+            <Form.Group className="mb-3" controlId="formSearchQuery">
+              <Form.Control
+                type="text"
+                placeholder="Enter search query"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+              />
+            </Form.Group>
+          </Form>
+        </Card.Body>
+      </Card>
+    </Container>
+  );
+}