
# 🚀 Redirect Tracing App – Feature Expansion Guide

**Author:** Andrei  
**Purpose:** This guide outlines enhancements to your redirect tracing app, including frontend UX, security scanning, and developer tools.

---

## ✅ 1. Visual Redirect Graph (Mermaid.js)

**Goal:** Display a visual flow of redirect hops using Mermaid.js.

### Tasks:
- Add a `<div id="mermaid-graph"></div>` in your HTML.
- Prepare Mermaid-formatted string in JS:
  ```js
  let graph = 'graph TD;\n';
  redirects.forEach((r, i) => {
    if (i < redirects.length - 1) {
      const status = r.statusCode || '';
      graph += `Step${i}[${r.url}] -->|${status}| Step${i+1}[${redirects[i+1].url}]\n`;
    }
  });
  document.getElementById('mermaid-graph').innerHTML = graph;
  mermaid.init();
  ```

---

## 🔁 2. Redirect Loop Detection

**Goal:** Detect repeated URLs in the redirect chain.

### Code:
```js
const seen = new Set();
let loopDetected = false;
for (const r of redirects) {
  if (seen.has(r.url)) {
    loopDetected = true;
    break;
  }
  seen.add(r.url);
}
```
Display warning if `loopDetected` is true.

---

## 🛑 3. Mixed Content Warning (SSL → Non-SSL)

**Goal:** Detect insecure downgrade during redirects.

### Code:
```js
for (let i = 1; i < redirects.length; i++) {
  const prev = redirects[i - 1].url;
  const curr = redirects[i].url;
  if (prev.startsWith('https://') && curr.startsWith('http://')) {
    showWarning('Mixed content detected (SSL downgrade).');
  }
}
```

---

## 📊 4. Redirect Type Summary

**Goal:** Show total and categorized redirect counts.

### Code:
```js
const summary = {};
redirects.forEach(r => {
  summary[r.statusCode] = (summary[r.statusCode] || 0) + 1;
});
```
Display as: `3 redirects: 2x 301, 1x 302`.

---

## 🕵️ 5. Final URL Scanner

### 5.1 Google Safe Browsing API
- Endpoint: `https://safebrowsing.googleapis.com/v4/threatMatches:find?key=API_KEY`
- Body:
```json
{
  "client": {
    "clientId": "yourapp",
    "clientVersion": "1.0"
  },
  "threatInfo": {
    "threatTypes": ["MALWARE", "SOCIAL_ENGINEERING"],
    "platformTypes": ["ANY_PLATFORM"],
    "threatEntryTypes": ["URL"],
    "threatEntries": [
      { "url": "https://targeturl.com" }
    ]
  }
}
```

### 5.2 robots.txt & Meta Redirect Detection
```js
const robots = await fetch(finalUrl + '/robots.txt');
const text = await robots.text();

const html = await fetch(finalUrl).then(res => res.text());
const metaRedirect = /<meta[^>]+http-equiv=["']?refresh/i.test(html);
```

---

## 🧑‍💻 6. Custom User-Agent & Headers

### Example Agent Headers
```json
{
  "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64)",
  "Referer": "https://example.com",
  "Accept-Language": "en-US,en;q=0.9",
  "X-Requested-With": "XMLHttpRequest"
}
```

**Popular User-Agents:**
- Googlebot: `Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)`
- Bingbot: `Mozilla/5.0 (compatible; bingbot/2.0; +http://www.bing.com/bingbot.htm)`
- Chrome: `Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113 Safari/537.36)`
- iPhone Safari: `Mozilla/5.0 (iPhone; CPU iPhone OS 15_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Mobile/15E148 Safari/604.1`

---

## 🔃 7. Select HTTP Method (GET/HEAD/POST)

### Add to frontend form:
```html
<select name="method" id="httpMethod">
  <option value="GET">GET</option>
  <option value="HEAD">HEAD</option>
  <option value="POST">POST</option>
</select>
```

### Pass to backend:
```js
const method = document.getElementById('httpMethod').value;
fetch('/api/track', {
  method: 'POST',
  body: JSON.stringify({ url, method, headers })
});
```

---

## 🌗 8. Dark Mode & Print Mode

### CSS:
```css
@media (prefers-color-scheme: dark) {
  body { background: #121212; color: #f5f5f5; }
}

@media print {
  body { background: #fff; color: #000; }
  .no-print { display: none; }
}
```

Or add toggle button with:
```js
document.body.classList.toggle('dark-mode');
```

---

> You can now paste this into Cursor or a Markdown editor to track your implementation!
