index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Open Redirect · Education Lab</title>
  <!-- Bootstrap 5 + Icons -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <style>
    body {
      background: #f8f9fc;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    .navbar-brand {
      font-weight: 600;
      letter-spacing: -0.3px;
    }
    .card {
      border-radius: 1.25rem;
      border: none;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
      background: rgba(255, 255, 255, 0.85);
    }
    .card-header {
      background: transparent;
      border-bottom: 1px solid rgba(0,0,0,0.05);
      font-weight: 600;
      padding: 1.25rem 1.5rem;
    }
    .btn-primary {
      background: #1e2a3a;
      border: none;
      font-weight: 500;
      padding: 0.6rem 1.8rem;
      transition: all 0.15s;
    }
    .btn-primary:hover {
      background: #0f1a2b;
      transform: scale(0.97);
    }
    .btn-danger {
      background: #dc3545;
      border: none;
      font-weight: 500;
      padding: 0.6rem 1.8rem;
      transition: all 0.15s;
    }
    .btn-danger:hover {
      background: #bb2d3b;
      transform: scale(0.97);
    }
    .btn-outline-secondary {
      border-color: #d0d7e2;
      color: #2c3e50;
    }
    .btn-outline-secondary:hover {
      background: #eef2f7;
      border-color: #b0bcca;
    }
    .redirect-preview {
      background: #f2f5fa;
      border-radius: 0.75rem;
      padding: 0.9rem 1.2rem;
      font-family: 'SF Mono', 'Fira Code', monospace;
      font-size: 0.9rem;
      word-break: break-all;
      border-left: 4px solid #6c7a8d;
    }
    .footer-links a {
      text-decoration: none;
      font-weight: 500;
      transition: color 0.15s;
    }
    .footer-links a:hover {
      color: #0a58ca !important;
      text-decoration: underline;
    }
    .badge-bg {
      background: #e9edf4;
      color: #1e2a3a;
      padding: 0.3rem 0.8rem;
      border-radius: 30px;
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.3px;
    }
    .nav-link i {
      margin-right: 5px;
    }
    .alert-info {
      background: #e7edf8;
      border: none;
      color: #1a2636;
      border-radius: 1rem;
    }
    .security-warning {
      background: #fff3cd;
      border-left: 4px solid #ffc107;
      padding: 0.75rem 1rem;
      border-radius: 0.5rem;
      margin-top: 1rem;
    }
    .example-btn {
      cursor: pointer;
    }
  </style>
</head>
<body>

  <!-- NAVBAR with LinkedIn & Linktree -->
  <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
    <div class="container">
      <a class="navbar-brand" href="#">
        <i class="bi bi-share-fill me-2" style="color: #2a3b4c;"></i>OpenRedirect
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu" aria-controls="navMenu" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navMenu">
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center">
          <li class="nav-item">
            <a class="nav-link" href="https://github.com/yogsec" target="_blank" rel="noopener">
              <i class="bi bi-github"></i> GitHub
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://linktr.ee/abhinavsingwal" target="_blank" rel="noopener">
              <i class="bi bi-tree"></i> Linktree
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" target="_blank" rel="noopener">
              <i class="bi bi-linkedin"></i> LinkedIn
            </a>
          </li>
          <li class="nav-item ms-lg-2">
            <span class="badge-bg"><i class="bi bi-lock me-1"></i>education</span>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- MAIN CONTENT -->
  <main class="container my-5 flex-grow-1">
    <div class="row justify-content-center">
      <div class="col-lg-8 col-md-10 col-12">

        <!-- Header -->
        <div class="mb-4 text-center text-md-start">
          <h3 class="fw-bold" style="color: #1a2636;"><i class="bi bi-arrow-right-circle me-2"></i>Open Redirect Simulator</h3>
          <p class="text-muted">Educational demonstration — understand how unvalidated redirects work.</p>
        </div>

        <!-- Main Card -->
        <div class="card">
          <div class="card-header d-flex align-items-center">
            <i class="bi bi-link-45deg me-2" style="font-size: 1.3rem;"></i> 
            <span>Redirect endpoint</span>
            <span class="ms-auto badge-bg">GET parameter</span>
          </div>
          <div class="card-body p-4">

            <!-- Form: target URL input -->
            <form id="redirectForm" class="mb-4">
              <div class="mb-3">
                <label for="targetUrl" class="form-label fw-semibold"><i class="bi bi-box-arrow-up-right me-1"></i> Target URL</label>
                <div class="input-group">
                  <span class="input-group-text bg-white"><i class="bi bi-globe2"></i></span>
                  <input type="url" class="form-control form-control-lg" id="targetUrl" 
                         placeholder="https://example.com/dashboard" 
                         value="https://www.wikipedia.org" required>
                  <button class="btn btn-danger" type="submit" id="goButton">
                    <i class="bi bi-arrow-right-short"></i> Generate & Redirect
                  </button>
                </div>
                <div class="form-text">
                  <i class="bi bi-info-circle"></i> Clicking "Generate & Redirect" will immediately redirect to the target URL.
                </div>
              </div>
            </form>

            <!-- Redirect preview & generated link -->
            <div class="redirect-preview mb-3 d-flex align-items-center justify-content-between flex-wrap">
              <span class="fw-semibold me-2" style="color: #1e2a3a;"><i class="bi bi-link"></i> Redirect link:</span>
              <span id="redirectLinkDisplay" class="text-primary" style="font-weight: 500;">https://yourapp.com/redirect?url=...</span>
            </div>

            <!-- Security Warning -->
            <div class="security-warning">
              <i class="bi bi-exclamation-triangle-fill text-warning me-2"></i>
              <strong>Security Note:</strong> In a real application, this would be a vulnerability. Always validate and whitelist redirect destinations.
            </div>

            <!-- Action Buttons -->
            <div class="d-flex flex-wrap gap-2 mt-3">
              <button class="btn btn-danger" id="redirectNowBtn">
                <i class="bi bi-arrow-right-circle me-1"></i> Redirect Now
              </button>
              <button class="btn btn-outline-secondary" id="copyLinkBtn">
                <i class="bi bi-clipboard me-1"></i> Copy Link
              </button>
              <button class="btn btn-outline-secondary" id="resetExampleBtn">
                <i class="bi bi-arrow-counterclockwise me-1"></i> Reset
              </button>
            </div>

            <!-- Info alert -->
            <div class="alert alert-info mt-4 d-flex align-items-start" role="alert">
              <i class="bi bi-shield-exclamation me-2" style="font-size: 1.3rem;"></i>
              <div>
                <strong>Educational only.</strong> This tool demonstrates an open redirect vulnerability. 
                In production, always validate and restrict redirect destinations.
              </div>
            </div>

          </div>
        </div>

        <!-- Quick examples -->
        <div class="mt-4 d-flex flex-wrap gap-2 justify-content-center justify-content-md-start">
          <span class="text-muted small me-1">Quick examples:</span>
          <button class="btn btn-sm btn-outline-secondary example-btn" data-url="https://www.github.com">GitHub</button>
          <button class="btn btn-sm btn-outline-secondary example-btn" data-url="https://www.google.com">Google</button>
          <button class="btn btn-sm btn-outline-secondary example-btn" data-url="https://youtube.com">YouTube</button>
          <button class="btn btn-sm btn-outline-secondary example-btn" data-url="https://stackoverflow.com">StackOverflow</button>
        </div>
      </div>
    </div>
  </main>

  <!-- FOOTER -->
  <footer class="bg-white border-top py-3 mt-auto">
    <div class="container d-flex flex-wrap justify-content-between align-items-center">
      <span class="text-muted small">OpenRedirect · education lab</span>
      <div class="footer-links d-flex gap-3">
        <a href="https://github.com/yogsec" target="_blank" rel="noopener" class="text-dark">
          <i class="bi bi-github"></i> GitHub
        </a>
        <a href="https://linktr.ee/abhinavsingwal" target="_blank" rel="noopener" class="text-dark">
          <i class="bi bi-tree"></i> Linktree
        </a>
        <a href="#" target="_blank" rel="noopener" class="text-dark">
          <i class="bi bi-linkedin"></i> LinkedIn
        </a>
        <span class="text-muted small">| abhinavsingwal</span>
      </div>
    </div>
  </footer>

  <!-- Bootstrap JS Bundle -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

  <!-- Main script -->
  <script>
    (function() {
      "use strict";

      // DOM elements
      const targetInput = document.getElementById('targetUrl');
      const redirectForm = document.getElementById('redirectForm');
      const redirectLinkDisplay = document.getElementById('redirectLinkDisplay');
      const redirectNowBtn = document.getElementById('redirectNowBtn');
      const copyLinkBtn = document.getElementById('copyLinkBtn');
      const resetExampleBtn = document.getElementById('resetExampleBtn');
      const exampleBtns = document.querySelectorAll('.example-btn');

      // Get current page URL without any query parameters
      function getBaseUrl() {
        return window.location.href.split('?')[0];
      }

      // Build the redirect link
      function buildRedirectLink(destination) {
        if (!destination) {
          return getBaseUrl() + '?redirect=' + encodeURIComponent('https://example.com');
        }
        return getBaseUrl() + '?redirect=' + encodeURIComponent(destination);
      }

      // Perform the actual redirect
      function performRedirect() {
        const rawUrl = targetInput.value.trim();
        if (!rawUrl) {
          alert('Please enter a target URL first.');
          return;
        }
        
        // Validate URL format
        try {
          new URL(rawUrl);
        } catch (e) {
          alert('Please enter a valid URL (include https:// or http://)');
          return;
        }
        
        // Update the preview before redirecting
        updateRedirectPreview();
        
        console.log('[OpenRedirect] Redirecting to:', rawUrl);
        
        // Perform the actual redirect
        window.location.href = rawUrl;
      }

      // Update the display
      function updateRedirectPreview() {
        const rawUrl = targetInput.value.trim();
        if (rawUrl === '') {
          redirectLinkDisplay.textContent = 'Please enter a URL';
          redirectLinkDisplay.style.color = '#a0aec0';
          return;
        }
        const link = buildRedirectLink(rawUrl);
        redirectLinkDisplay.textContent = link;
        redirectLinkDisplay.style.color = '#0d6efd';
        redirectLinkDisplay.dataset.fullLink = link;
      }

      // Copy link to clipboard
      function copyRedirectLink() {
        const fullLink = redirectLinkDisplay.dataset.fullLink || redirectLinkDisplay.textContent;
        if (!fullLink || fullLink === 'Please enter a URL') {
          alert('No valid redirect link to copy. Please enter a URL.');
          return;
        }
        
        if (navigator.clipboard && navigator.clipboard.writeText) {
          navigator.clipboard.writeText(fullLink)
            .then(() => {
              const original = copyLinkBtn.innerHTML;
              copyLinkBtn.innerHTML = '<i class="bi bi-check2"></i> Copied!';
              setTimeout(() => {
                copyLinkBtn.innerHTML = original;
              }, 1800);
            })
            .catch(() => {
              fallbackCopy(fullLink);
            });
        } else {
          fallbackCopy(fullLink);
        }
      }

      // Fallback copy method
      function fallbackCopy(text) {
        const textArea = document.createElement('textarea');
        textArea.value = text;
        textArea.style.position = 'fixed';
        textArea.style.opacity = '0';
        document.body.appendChild(textArea);
        textArea.select();
        try {
          document.execCommand('copy');
          alert('Copied to clipboard: ' + text);
        } catch (err) {
          alert('Could not copy. Please select and copy manually.');
        }
        document.body.removeChild(textArea);
      }

      // Reset to default example
      function resetToExample() {
        targetInput.value = 'https://www.wikipedia.org';
        updateRedirectPreview();
      }

      // Handle redirect param on page load - redirect immediately without confirmation
      function handleRedirectParam() {
        const params = new URLSearchParams(window.location.search);
        const redirectParam = params.get('redirect');
        if (redirectParam) {
          try {
            const decoded = decodeURIComponent(redirectParam);
            console.log('[OpenRedirect] Auto-redirecting to:', decoded);
            
            // Redirect immediately without any confirmation
            window.location.href = decoded;
          } catch (e) {
            console.error('Error decoding redirect param:', e);
          }
        }
      }

      // Event listeners
      redirectForm.addEventListener('submit', function(e) {
        e.preventDefault();
        performRedirect();
      });

      redirectNowBtn.addEventListener('click', performRedirect);
      copyLinkBtn.addEventListener('click', copyRedirectLink);
      resetExampleBtn.addEventListener('click', resetToExample);

      exampleBtns.forEach(btn => {
        btn.addEventListener('click', function() {
          const url = this.dataset.url;
          if (url) {
            targetInput.value = url;
            updateRedirectPreview();
          }
        });
      });

      targetInput.addEventListener('input', updateRedirectPreview);
      targetInput.addEventListener('blur', updateRedirectPreview);

      // Initialize
      resetToExample();
      
      // Handle redirect param immediately on page load
      handleRedirectParam();

    })();
  </script>

</body>
</html>