proxelar 0.4.2

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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147

<!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>
            <button id="help-btn" title="Keyboard shortcuts and help (?)">?</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>
                <button class="tab hidden" id="frames-tab" data-tab="frames">Frames</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>

    <!-- Help modal -->
    <div id="help-backdrop" class="help-backdrop hidden"></div>
    <div id="help-modal" class="help-modal hidden">
        <div class="help-header">
            <span class="help-title">Keyboard Shortcuts &amp; Actions</span>
            <button id="close-help">&times;</button>
        </div>
        <div class="help-body">
            <div class="help-section">
                <div class="help-section-title">Navigation</div>
                <div class="help-row"><kbd>j</kbd> / <kbd>↓</kbd><span>Select next row</span></div>
                <div class="help-row"><kbd>k</kbd> / <kbd>↑</kbd><span>Select previous row</span></div>
                <div class="help-row"><kbd>g</kbd><span>Jump to first row</span></div>
                <div class="help-row"><kbd>G</kbd><span>Jump to last row</span></div>
            </div>
            <div class="help-section">
                <div class="help-section-title">Table Actions</div>
                <div class="help-row"><kbd>Click row</kbd><span>Open request / response detail</span></div>
                <div class="help-row"><kbd>&#8635; Replay</kbd><span>Re-send the selected request</span></div>
                <div class="help-row"><kbd>Clear</kbd><span>Remove all captured requests</span></div>
            </div>
            <div class="help-section">
                <div class="help-section-title">Filtering</div>
                <div class="help-row"><kbd>Method dropdown</kbd><span>Filter by HTTP method</span></div>
                <div class="help-row"><kbd>Search box</kbd><span>Filter rows by URL</span></div>
            </div>
            <div class="help-section">
                <div class="help-section-title">Intercept</div>
                <div class="help-row"><kbd>&#9646;&#9646; Intercept</kbd><span>Toggle intercept mode ON / OFF</span></div>
                <div class="help-row"><kbd>Click pending row</kbd><span>Open intercept editor</span></div>
                <div class="help-row"><kbd>Forward</kbd><span>Send the (optionally modified) request</span></div>
                <div class="help-row"><kbd>Drop</kbd><span>Block the request (returns 504)</span></div>
                <div class="help-row"><kbd>Ctrl+Enter</kbd><span>Forward from within the editor</span></div>
                <div class="help-row"><kbd>Esc</kbd><span>Close intercept editor (request stays pending)</span></div>
            </div>
            <div class="help-section">
                <div class="help-section-title">Detail Panel</div>
                <div class="help-row"><kbd>Request / Response tabs</kbd><span>Switch between request and response view</span></div>
                <div class="help-row"><kbd>&times;</kbd><span>Close the detail panel</span></div>
            </div>
            <div class="help-section">
                <div class="help-section-title">Global</div>
                <div class="help-row"><kbd>?</kbd><span>Toggle this help</span></div>
                <div class="help-row"><kbd>Esc</kbd><span>Close any open panel</span></div>
            </div>
        </div>
    </div>

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