docs: die Leiste per Reverse Proxy in fremde Apps einsetzen

Rezept fuer nginx, geprueft gegen eine App mit gzip und eigener CSP. Die vier
Fallen stehen dabei: Kompression, CSP ersetzen statt ergaenzen, nur HTML
anfassen, Ursprung in HoneyOS eintragen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
marcandClaude Opus 5 committed 2026-08-28 19:21:01 +02:00
1 parent cce926ab2e
commit 05e56f4cd2
2 files changed
+66

No files matched your search

+50
View File
@@ -183,6 +183,56 @@ hinein, ihre Stile nicht hinaus. Sie schiebt den Seiteninhalt um 32 px nach unte
Vorschau ohne Einbau: `/honeybar/demo.html`.
## Die Leiste in fremde Apps einsetzen (Reverse Proxy)
Für Werkzeuge, die man **nicht selbst geschrieben hat**, gibt es keinen
`<script>`-Tag zum Ändern — den setzt der Reverse Proxy ein, während er die
Seite durchreicht. Getestet mit nginx gegen eine App mit gzip und eigener CSP:
```nginx
location / {
proxy_pass http://127.0.0.1:8181;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
# 1. Unkomprimiert anfordern — in einem gzip-Strom ist nichts zu ersetzen.
proxy_set_header Accept-Encoding "";
# 2. Die CSP der App ersetzen, nicht ergänzen. Zwei CSP-Kopfzeilen bedeuten
# nicht „mehr erlaubt", sondern „beide müssen zustimmen".
proxy_hide_header Content-Security-Policy;
add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://honeyos.example.com; connect-src 'self' https://honeyos.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:" always;
# 3. Nur HTML anfassen; JSON, Bilder und Downloads bleiben unberührt.
sub_filter_types text/html;
sub_filter_once on;
sub_filter '</head>' '<script defer src="https://honeyos.example.com/honeybar/honeybar.js" data-app="werkzeug"></script></head>';
}
```
Dazu muss der Ursprung dieser App **in HoneyOS als App eingetragen** sein — die
Liste ist zugleich die CORS-Freigabe.
**Warum `style-src 'unsafe-inline'`:** Die Leiste bringt ihre Stile mit, im
Shadow DOM. Eine strenge CSP verbietet die — gemessen: die Leiste erscheint,
aber schwarz auf schwarz, ohne Röhre. Das ist eine echte Abschwächung der
CSP dieser App; viele fertige Werkzeuge brauchen `unsafe-inline` ohnehin für
sich selbst, aber wissen sollte man es. (Auflösbar, indem die Leiste ihre Stile
als eigene Datei ausliefert — steht in [IDEAS.md](IDEAS.md).)
**Was dabei zu erwarten ist:**
- **Das Layout der fremden App kennt die Leiste nicht.** Rechnet sie mit
`100vh`, wird die Seite um 32 px zu hoch (Bildlaufleiste) — ihr CSS lässt
sich nicht anpassen wie das eigene. Dann hilft `data-push="none"`: Die Leiste
legt sich darüber, statt zu schieben. Verdeckt dafür die oberste Zeile.
- **Apps mit eigener Kopfleiste** sehen doppelt belegt aus. Geschmackssache.
- **Anmeldeseiten, iframes, Downloads** bekommen die Leiste ebenfalls, soweit
sie HTML sind. `sub_filter` unterscheidet das nicht.
- **Andere Proxys:** Caddy braucht ein Zusatzmodul (`replace-response`),
Traefik ein Plugin für den Antwortkörper. nginx kann es ohne Erweiterung.
## Wer ist wo angemeldet
Das Feld **Wer-bin-ich** ist der Pfad, unter dem eine App „wer bin ich" beantwortet