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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
|
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>VPN - RSDSL Verwaltungswerkzeug</title>
<script type="module" src="/dashboard.js" defer></script>
<script type="module" src="/vpn.js" defer></script>
</head>
<body>
<div class="container">
<h1>VPN</h1>
<div class="row">
<form id="dashboard-form">
<button id="dashboard-submit" type="submit">↩ Zurück zur Übersicht</button>
</form>
<form id="wan-open-form">
<button id="wan-open-submit" type="submit">Einwahl und Zugangsdaten</button>
</form>
<form id="lan-open-form">
<button id="lan-open-submit" type="submit">LAN</button>
</form>
<form id="vpn-open-form">
<button id="vpn-open-submit" type="submit">VPN</button>
</form>
<form id="log-open-form">
<button id="log-open-submit" type="submit">Diagnoseprotokolle</button>
</form>
<form id="sys-open-form">
<button id="sys-open-submit" type="submit">System</button>
</form>
<form id="disconnect-form">
<button id="disconnect-submit" type="submit">🚪 Abmelden</button>
</form>
</div>
<br />
<form id="profile-form">
<fieldset>
<legend>Clientseitige Konfiguration</legend>
<p>
1. WireGuard installieren: <a
href="https://www.wireguard.com/install/"
target="_blank">https://www.wireguard.com/install/</a>
<br />
2. Tunnel hinzufügen / Add a tunnel / +
<br />
3. Gerätenummer ermitteln: Beliebige Zahl zwischen 100 und 239 wählen, die nicht bereits für ein anderes Gerät verwendet wird
<br />
4. Daten selbst eingeben / Create from scratch
<br />
5. "Generate keypair" drücken und privaten Schlüssel / Private key in die Zwischenablage kopieren
<br />
6. Gerätedaten eintragen
<br /><br />
- Name: wg0 (beliebig wählbar)<br />
- Privater Schlüssel / Private key: Mit weiterer Betätigung von "Generate keypair" automatisch erzeugen lassen<br />
- Öffentlicher Schlüssel / Public key: Wird ebenfalls von "Generate keypair" erzeugt<br />
- Adressen / Addresses: 10.128.50.GERÄTENUMMER/32, fd0b:9272:534e:6::GERÄTENUMMER/128 (Achtung: Für Firewallausnahme stattdessen 10.128.60.GERÄTENUMMER/32, fd0b:9272:534e:7::GERÄTENUMMER/128 verwenden)<br />
- Listen port: Keine Angabe (automatisch)<br />
- MTU: Keine Angabe (automatisch)<br />
- DNS-Server / DNS servers: 10.128.50.254, fd0b:9272:534e:6::1 (Achtung: Für Firewallausnahme stattdessen 10.128.60.254, fd0b:9272:534e:7::1 verwenden)<br />
<br />
7. Gerät hinzufügen / Add peer
<br /><br />
- Öffentlicher Schlüssel / Public key: <span id="profile-pubkey">Siehe Diagnoseprotokoll</span><br />
- Symmetrischer Schlüssel / Preshared key: Aus Zwischenablage einfügen<br />
- Endpunkt / Endpoint: rtr.himbeerserver.de:51820 (Achtung: Für Firewallausnahme stattdessen rtr.himbeerserver.de:51821 verwenden)<br />
- Erlaubte IP-Adressen / Allowed IPs: 0.0.0.0/0, ::/0<br />
- Private IP-Adressen ignorieren / Exclude private IPs: Nein (bei Zugriff aus dem öffentlichen Internet egal, bei Zugriff aus dem Heimnetz relevant)<br />
- Keep-Alive / Persistent keepalive: Keine Angabe (deaktiviert), kann ggf. auf 25 gesetzt werden<br />
<br />
8. Speichern
</p>
</fieldset>
</form>
<form id="server-form">
<fieldset>
<legend>Server</legend>
<div class="row">
<label for="server-pubkey">Öffentlicher Schlüssel / Public key:</label>
<span id="server-pubkey">Siehe Diagnoseprotokoll</span>
</div>
<br />
<div class="row">
<button id="server-restart">🔄 VPN-Server-Neustart</button>
</div>
<p>Information: Ein Neustart des VPN-Servers dauert ca. 30 Sekunden.
Eventuell gehen dabei bestehende VPN-Verbindungen verloren. Bei
Fehlkonfiguration ist mit großer Wahrscheinlichkeit kein
VPN-Verbindungsaufbau mehr möglich.</p>
</fieldset>
</form>
<br />
<form id="client-form">
<fieldset>
<legend>Clients</legend>
<table id="client-clients">
<th>
<td>Öffentlicher Schlüssel / Public key</td>
<td>Symmetrischer Schlüssel / Preshared key</td>
<td>Erlaubte IP-Adressen / Allowed IPs</td>
</th>
</table>
<div class="row">
<output id="client-status">Warte auf Initialisierung...</output>
</div>
<p>Information: Symmetrische Schlüssel werden nur angezeigt, solange
sich der Mauszeiger auf ihnen befindet.</p>
<p>Information: Es ist zulässig (aber nicht sinnvoll), mehrere
Clients mit dem gleichen Namen zu erstellen. Beim Löschen werden alle
Clients mit passendem Namen entfernt, unabhängig davon, welcher
Client tatsächlich gelöscht werden sollte.</p>
</fieldset>
</form>
<br />
<form id="add-form">
<fieldset>
<legend>Client hinzufügen</legend>
<label for="add-name" form="add-form">Name:</label>
<div class="row">
<input id="add-name" />
</div>
<br />
<label for="add-pubkey" form="add-form">Öffentlicher Schlüssel / Public key:</label>
<div class="row">
<input id="add-pubkey" />
</div>
<br />
<label for="add-psk" form="add-form">Symmetrischer Schlüssel / Preshared key:</label>
<div class="row">
<input id="add-psk" type="password" />
</div>
<br />
<div class="row">
<button id="add-show">🔒 Symmetrischen Schlüssel ein-/ausblenden</button>
</div>
<br />
<label for="add-allowedips" form="add-form">Erlaubte IP-Adressen / Allowed IPs:</label>
<div class="row">
<input id="add-allowedips" placeholder="z.B. 10.128.50.100/32 fd0b:9272:534e:6::100/128" />
</div>
<br />
<div class="row">
<button id="add-submit" type="submit">Client hinzufügen</button>
</div>
<p id="add-status"></p>
<p>Information: Es ist zulässig (aber nicht sinnvoll), mehrere
Clients mit dem gleichen Namen zu erstellen. Beim Löschen wird der
erste Client mit passendem Namen entfernt, unabhängig davon, welcher
Client tatsächlich gelöscht werden sollte.</p>
</fieldset>
</form>
</div>
</body>
</html>
|
