SecureFlow: HTTP vs HTTPS Attack Demo

SecureFlow is a visual web application built to demonstrate the difference between insecure HTTP communication and secure HTTPS communication through an interactive payment request simulation.

The project is designed for learning and presentation purposes. It does not perform any real hacking or network interception. Instead, it uses guided UI storytelling, animated state transitions, and simulated attacker behavior to help users understand:

• how HTTP requests can be exposed and modified in transit
• how HTTPS protects confidentiality and integrity through encryption
• how the same request behaves differently in insecure and secure modes

Overview

The app presents a split-screen simulation:

• a User Website panel where a payment request is submitted
• an Attacker Panel where the request can be intercepted in HTTP mode

Users can switch between:

• Insecure Mode (HTTP)
• Secure Mode (HTTPS)

The interface then walks through the request lifecycle using a step-based flow:

1. Request Sent
2. Intercepted
3. Modified / Blocked
4. Processed

Additional explanatory sections such as Protocol Scene, Security Signals, and Payload Comparison make it easier to present the concept visually.

Features

• Built with Next.js App Router
• Styled with Tailwind CSS
• Uses local React state only, no database required
• Interactive mode toggle between HTTP and HTTPS simulation
• Split-screen attacker vs user visualization
• Payment form with animated send state
• Attacker-side request tampering in insecure mode
• Locked / encrypted request view in secure mode
• Flow visualizer for step-by-step storytelling
• Protocol scene showing browser, network view, and server result
• Security summary showing confidentiality, integrity, and authenticity differences
• Payload comparison between intended, intercepted, and processed data
• Event log section for presentation-friendly narration

Tech Stack

• Next.js
• React
• Tailwind CSS
• PostCSS

Project Structure

app/
  layout.jsx
  globals.css
  page.jsx
  demo/
    page.jsx

components/
  AttackerPanel.jsx
  FlowVisualizer.jsx
  ModeToggle.jsx
  PayloadComparison.jsx
  PaymentForm.jsx
  ProtocolScene.jsx
  SecuritySignals.jsx

package.json
tailwind.config.js
postcss.config.js
jsconfig.json

Getting Started

1. Install dependencies

npm install

2. Start the development server

npm run dev

3. Open the app

Visit:

http://localhost:3000

PowerShell note

If PowerShell blocks npm, use:

npm.cmd install
npm.cmd run dev

How the Demo Works

Insecure Mode (HTTP)

1. The user enters a name and amount.
2. The request is sent in readable form.
3. The attacker intercepts the request.
4. The attacker modifies the amount.
5. The server processes the tampered request.

Example outcome:

Payment of ₹1000 processed

Secure Mode (HTTPS)

1. The user enters the same payment details.
2. The request is sent through a simulated encrypted channel.
3. The attacker cannot read or modify the payload.
4. The server processes the original request securely.

Example outcome:

Payment of ₹100 processed securely

Suggested Demo Script

HTTP demonstration

• Set mode to Insecure Mode (HTTP)
• Enter:
  • Name: Krishna
  • Amount: 100
• Click Send Payment
• Show that the attacker can read the request
• Change the amount to 1000
• Click Tamper Request
• Show that the server processes the modified amount

HTTPS demonstration

• Switch to Secure Mode (HTTPS)
• Enter the same data again
• Click Send Payment
• Show that the attacker only sees encrypted data
• Show that tampering is disabled
• Show that the server receives the original amount

Educational Purpose

This project is meant to visually explain a cybersecurity concept in a classroom, portfolio, or demo setting. It simulates attack behavior purely through interface logic and controlled state updates.

It should be understood as:

• a teaching demo
• a visual explainer
• a presentation-friendly simulation

It should not be understood as:

• a real packet sniffer
• a real man-in-the-middle tool
• a real payment system

Future Improvements

• Add optional mock API routes for simulated request logs
• Add animated request path lines between panels
• Add certificate / lock explanation visuals for HTTPS
• Add mobile-specific layout refinements
• Add a presentation mode with auto-advance narration

License

This project is intended for academic, educational, and demo use.