proxelar 0.4.0

MITM proxy for HTTP/HTTPS traffic
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Proxelar</title>
    <link rel="stylesheet" href="/style.css">
</head>
<body>
    <header>
        <h1>Proxelar</h1>
        <div class="controls">
            <select id="method-filter">
                <option value="">All Methods</option>
                <option value="GET">GET</option>
                <option value="POST">POST</option>
                <option value="PUT">PUT</option>
                <option value="DELETE">DELETE</option>
                <option value="PATCH">PATCH</option>
            </select>
            <input type="text" id="search" placeholder="Filter by URL...">
            <button id="clear-btn">Clear</button>
            <button id="intercept-btn" title="Toggle intercept mode (pause requests for editing)">
                &#9646;&#9646; Intercept: <span id="intercept-label">OFF</span>
            </button>
            <span id="status" class="status disconnected">Disconnected</span>
        </div>
    </header>

    <main>
        <table id="requests-table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Method</th>
                    <th>Status</th>
                    <th>Host</th>
                    <th>Path</th>
                    <th>Size</th>
                </tr>
            </thead>
            <tbody id="requests-body"></tbody>
        </table>
    </main>

    <!-- Detail panel: shown when a completed request row is clicked -->
    <div id="detail-panel" class="detail-panel hidden">
        <div class="detail-header">
            <div class="tabs">
                <button class="tab active" data-tab="request">Request</button>
                <button class="tab" data-tab="response">Response</button>
            </div>
            <button id="close-detail">&times;</button>
        </div>
        <div id="detail-content" class="detail-content"></div>
    </div>

    <!-- Intercept editor panel: shown when a pending request row is clicked -->
    <div id="intercept-panel" class="intercept-panel hidden">
        <div class="intercept-header">
            <span id="intercept-title" class="intercept-title">&#9646;&#9646; Intercepted Request</span>
            <button id="close-intercept" title="Close (request stays pending)">&times;</button>
        </div>
        <div class="intercept-body">
            <div class="intercept-row">
                <label>Method</label>
                <select id="edit-method">
                    <option>GET</option>
                    <option>POST</option>
                    <option>PUT</option>
                    <option>DELETE</option>
                    <option>PATCH</option>
                    <option>HEAD</option>
                    <option>OPTIONS</option>
                </select>
                <label>URI</label>
                <input type="text" id="edit-uri" placeholder="https://example.com/path">
            </div>
            <div class="intercept-section-label">Headers <button id="add-header-btn" class="btn-small">+ Add</button></div>
            <table id="headers-table" class="headers-table">
                <tbody id="headers-body"></tbody>
            </table>
            <div class="intercept-section-label">Body</div>
            <textarea id="edit-body" class="edit-body" placeholder="Request body..."></textarea>
        </div>
        <div class="intercept-footer">
            <span class="intercept-hint">Ctrl+Enter = Forward &nbsp;ยท&nbsp; Esc = Close without action</span>
            <div class="intercept-actions">
                <button id="drop-btn" class="btn-danger">Drop (504)</button>
                <button id="forward-btn" class="btn-primary">Forward</button>
            </div>
        </div>
    </div>

    <script src="/app.js"></script>
</body>
</html>