feat(xss): Add stored xss

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>
+  );
+}