Web Client za hasłem

vdwr
Posty: 1
https://www.homebook.pl/profil/1295630/meble-kuchenne-warszawa/
Rejestracja: 04 kwietnia 2024, 22:52
Kontakt:

Web Client za hasłem

Post autor: vdwr »

Część pierwsza

Koncept:
Meshtastic Web Client nie umożliwia zablokowania dostępu do panelu za pomocą danych do logowania. Aby uniknąć przeróbek, grzebania w kodzie i konieczności utrzymywania zgodności z nowymi wersjami, najprostszym rozwiązaniem wydaje się następujący schemat:
Meshtastic Web Client Server <--akceptuje tylko ruch od/do--> Reverse proxy <--zapewnia uwierzytelnienie--> Przeglądarka

Nie pokryje to niestety kwestii klienta hostowanego bezpośrednio z urządzenia ESP32 – ten scenariusz będzie niestety wymagał przeróbek. Opiszę to jako osobny scenariusz na końcu posta.

Uwaga:
Żaden z wymienionych scenariuszy nie zakłada zabezpieczenia tego interfejsu przed „hackerem” bądź kimś po prostu bardziej obeznanym… zawsze można podsłuchać hasło, przejąć ruch lub uderzyć bezpośrednio do API urządzenia znajdującego się w sieci. Chodzi tu tylko o zabezpieczenie interfejsu przed ciekawskimi.

Instalacja Docker:
Najprostszym sposobem na rozpoczęcie pracy z dockerem jest instalacja Docker Desktop https://www.docker.com/products/docker-desktop/. Ci, którzy korzystają z Linuxa i mieli już zainstalowany Docker Engine – poradzą sobie bez tego.

Instalacja z użyciem Dockera:
Idea pracy z dockerem polega na odpalaniu aplikacji oraz wszystkich jej zależności (wraz z systemem operacyjnym) w odizolowanych środowiskach. Dzięki temu w zamian za narzut zużywanych zasobów unikamy problemów z ewentualnym „namieszaniem” czegoś w swoim głównym systemie.
Podejście to zakłada, że wszelakie artefakty (produkty aplikacji) i konfiguracja zapisana jest poza samym kontenerem. Stąd też warto utworzyć sobie jakiś folder na przechowywanie konfiguracji/baz/etc. produkowanych przez aplikacje działające w kontenerach. W dalszej części tego posta ścieżkę do tego folderu nazwę po prostu <folder>. Po założeniu takiego folderu należy upewnić się, że Docker ma do niego dostęp:
Obrazek
Obrazek

Punkty 4-5 należy wykonać tylko, gdy folder nie znajduje się na powyższej liście.

Utworzenie sieci:
Aby uniknąć zmian w adresach kontenerów w ramach wewnętrznej sieci dockera należy utworzyć statyczną sieć, z której następnie będziemy przydzielali adresy poszczególnym kontenerom.

Kod: Zaznacz cały

docker network create --driver=bridge --subnet=172.69.69.0/24 --gateway=172.69.69.1 static_network
Portainer:
Docker nawet w wersji Desktop nigdy nie był mocny w jakiekolwiek GUI. Cała idea operacji zorientowana jest na klepanie, często bardzo długich poleceń. Na szczęście możemy zmniejszyć sobie próg wejścia i skorzystać z kontenera, który będzie nam serwował takowe GUI. Niestety samo jego postawienie wymaga wykonania polecenia (po uwcześniejszym utworzeniu pod<folderu> portainer na przechowywanie konfiguracji:

Kod: Zaznacz cały

docker run -d --network=static_network --ip=172.69.69.2 -p 8000:8000 -p 9443:9443 --name portainer --restart=always -v /var/run.docker.sock -v <folder>/portainer:/data portainer/portainer-ce:latest
Po zakończeniu instalacji pod https://<adres naszego serwera (ale nie ten z dockera tylko ten z routera normalnie>:9443 powinien pojawić się panel logowania naszego portainera (może być wymagane zaakceptowanie nieprawidłowego certyfikatu). Domyślne dane to admin/password aczkolwiek podczas pierwszego uruchomienia system powinien zapytać o ustanowienie hasła.

Instalacja Nginx proxy manager:
Po wejściu na stronę Portainera należy wybrać środowisko:
Obrazek
Następnie przejść do zakładki Containers i kliknąć przycisk +Add container:
Obrazek
Jako że nginx będzie przechowywał konfigurację oraz w przypadku HTTPS/wystawienia usług na świat – również certyfikaty SSL – potrzebujemy utworzyć sobie odpowiednie pod<foldery>, czyli:
<folder>/nginx-proxy-manager/data
<folder>/nginx-proxy-manager/letsencrypt
Po czym możemy przystąpić do samego dodawania kontenera.
Uwaga! Porty 80 oraz 443 mogą być już zajęte przez inne usługi znajdujące się na serwerze. W takim wypadku trzeba wybrać (oraz zapamiętać) inne porty dla transmisji nieszyfrowanej (80) oraz szyfrowanej (443) – zmieniamy tylko po stronie host. To samo można zrobić w przypadku zajętego portu 81, który jest portem panelu zarządzania proxy -> jednak to też zmieniamy tylko po stronie host ustawień.
Wypełniamy formularz dodawania kontenera:
  • Name: nginx-proxy-manager
    Image: jc21/nginx-proxy-manager:latest
    Porty:
    80-81
    443
Obrazek
Nieco niżej w ustawieniach zaawansowanych klikamy w zakładkę Volumes, ustawiamy „bind” i wypełniamy wszystko odpowiednimi ścieżkami (po stronie contenera są to stałe /data oraz /etc/letsencrypt, a po stronie hosta są to ścieżki poprzedzone <folderem>.
Upewniamy się, że obydwie lokalizacie ustawione są jako zapisywalne (writeable)
Obrazek
Przechodzimy do zakładki network, wybieramy naszą wcześniej utworzoną sieć i wprowadzamy któryś z wolnych adresów IP – np. ten z końcówką 7 tj. 172.69.69.7
Obrazek
Na koniec przechodzimy do zakładki Restart policy i aby kontener wstawał sam po uruchomieniu komputera (i dockera) zaznaczamy „Unless stopped” (czyli póki nie zatrzymamy kontenera ręcznie – będzie on uruchamiany wraz ze startem dockera). Mając to wszystko możemy zatwierdzić dodawanie kontenera. Będzie trwało to chwilę, a w tym czasie możemy skupić się na dodawaniu kontenera Meshtastic Web Client.
Obrazek
Domyślne dane logowania do proxy:
email: admin@example.com
hasło: changeme
Użytkownik zostanie poproszony o ustawienie danych administracyjnych przy pierwszym logowaniu.

Instalacja Meshtastic Web Client:
Meshtastic Web niestety przechowuje ustawienia wyłącznie w przeglądarce użytkownika – stąd też nie musimy konfigurować żadnych dodatkowych folderów.
Znów wchodzimy w Containers -> +Add container, przełączamy źródło obrazu dockera z Simple na Advanced mode i wypełniamy:
name: Meshtastic-Web
image: ghcr.io/meshtastic/web
Obrazek
W sekcji Advanced, w zakładce network wybieramy naszą statyczną sieć i ustawiamy IP:
Obrazek
Na koniec przechodzimy do zakładki Restart policy, ustawiamy Unless Stopped i potwierdzamy dodanie kontenera:
Obrazek

Konfiguracja proxy:
Przez adres IP naszego serwera nadany przez router (lub inny serwer DNS/ustawiony ręcznie) oraz port „Host” panelu administracyjnego, który został ustawiony podczas dodawania kontenera Nginx proxy manager – za pomocą przeglądarki wchodzimy do panelu konfiguracyjnego proxy:
Po zalogowaniu należy utworzyć listę dostępu (użytkownik/hasło do Meshtastica), w tym celu trzeba wybrać opcję Access Lists, kliknąć przycisk Add Access List i w zakładce Details wyskakującego okienka trzeba podać jakąś nazwę naszej listy np. Meshtastic-Web:
Obrazek
Następnie przechodzimy do zakładki Authorization, wpisujemy dane, którymi chcemy logować się do Meshastic Web Client:
Obrazek
Następnie przechodzimy na kartę Access i dajemy dostęp dla danych sieci/adresów IP… jeśli chcemy aby sama kombinacja użytkownik/hasło stanowiła o dostępie – w polu allow wpisujemy all (allow jest nad deny w tym wypadku także allow all, deny all sprawia, że wszystkie adresy są dozwolone). Po wprowadzeniu danych można zapisać ustawienia poprzez kliknięcie przycisku Save:
Obrazek
Dalej musimy utworzyć samą konfigurację proxy dla Meshtastic Web Client. Z menu wybieramy Hosts -> Proxy Hosts oraz klikamy przycisk Add Proxy Host:
Obrazek
Następnie wprowadzamy nazwę domeny, pod którą chcemy podpiąć Meshtastic Web Client (może być to domena lokalna – jak wymusić odpowiendnie ustawienie pokażę dalej w poście), adres IP, ale ten wewnętrzny z sieci dockerowej static_network oraz port 8080.
Dalej należy wybrać utworzoną wcześniej listę dostępu z wybieraka Access List).
Przydatne może być też zaznaczenie opcji Websocket support (nie sprawdzałem, czy WebClient w któtymkolwiek momencie z tego korzysta, ale nie mogę tego wykluczyć):
Obrazek
Po ustawieniu wszystkiego należy kliknąć przycisk Save.

Wszystko powinno się zgadzać – teraz należy powiedzieć naszemu komputerowi, gdzie powinien szukać domeny ustawionej powyżej.
Idealnym scenariuszem jest, gdy mamy własną domenę lub chociażby własny serwer DNS – wtedy możemy ustawić to globalnie dla wszystkich urządzeń w sieci. W przeciwnym wypadku musimy dokonać edycji wpisu w pliku:
Linux/MacOS ->

Kod: Zaznacz cały

/etc/hosts
Windows ->

Kod: Zaznacz cały

C:\Windows\System32\drivers\etc (dysk może być inny niż C)
Do tego pliku należy dodać wpis w formacie <adres IP serwera, na którym stoi docker><tabulacja><domena wprowadzona wyżej> np.

Kod: Zaznacz cały

192.168.1.2	meshtastic.local
Plik kończymy znakiem nowej linii (enter) i zapisujemy.

Dalej z przeglądarki możemy wejść pod adres http://meshtastic.local i pojawi nam się monit logowania:
Obrazek

Po zalogowaniu otrzymamy natomiast znany już interface Meshtastic Web Client.

Pozostaje jeszcze problem tego, iż urządzenia z ESP32 same hostują taki sam interface, który nie będzie już podlegał zabezpieczeniom – jak taki i-face usunąć lub dodać w kodzie jego zabezpieczenie – opiszę w następnej części poradnika.

Na marginesie:
Przydałby się taki interfejs, ale czerpiący serial nie z przeglądarki ale z serwera -> dzięki temu można by było sobie wpiąć radio do serwera i zarządzać radiem, które nie znajduje się w sieci Wifi. Ale to jest temat na inny projekt, który owinąłby CLI w jakieś webowe GUI (rodzi mi się nawet zalążek czegoś takiego w PHP).

Część druga w przygotowaniu...