Używaj protokołu HTTPS na potrzeby programowania lokalnego

Maud Nalpas

Większość czasu http://localhost zachowuje się jak HTTPS na potrzeby rozwoju. Istnieją jednak szczególne przypadki, takie jak niestandardowe nazwy hostów lub używanie bezpiecznych plików cookie w różnych przeglądarkach, w których musisz wyraźnie skonfigurować witrynę deweloperską, aby działała w trybie HTTPS. Dzięki temu będzie ona wiernie odzwierciedlać działanie witryny w produkcji. (jeśli Twoja produkcyjna witryna nie korzysta z HTTPS, najpierw przeprowadź migrację do tego protokołu).

Z tej strony dowiesz się, jak uruchomić witrynę lokalnie z protokołem HTTPS.

Uwaga: w tym poście stwierdzenia dotyczące localhost są również prawidłowe w przypadku 127.0.0.1 i [::1], ponieważ oba opisują lokalny adres komputera (nazywany też adresem pętli). W tym celu w tych instrukcjach nie podajemy numerów portów. Gdy więc widzisz http://localhost, czytaj to jako http://localhost:{PORT} lub http://127.0.0.1:{PORT}.

Krótkie instrukcje znajdziesz w przewodniku po mkcert.**

Uruchom witrynę lokalnie z protokołem HTTPS za pomocą mkcert (zalecane)

Aby używać HTTPS w przypadku lokalnej witryny deweloperskiej i dostępu do https://localhost lub https://mysite.example (niestandardowy host nazwy), musisz mieć certyfikat TLS podpisany przez podmiot, któremu ufają Twoje urządzenie i przeglądarka, czyli zaufany urząd certyfikacji (CA). Przed utworzeniem połączenia HTTPS przeglądarka sprawdza, czy certyfikat serwera deweloperskiego jest podpisany przez zaufany urząd certyfikacji.

Zalecamy użycie mkcert, czyli obsługiwanego na wielu platformach urzędu certyfikacji, do utworzenia i podpisania certyfikatu. Inne przydatne opcje znajdziesz w artykule Uruchamianie witryny lokalnie z protokołem HTTPS: inne opcje.

Wiele systemów operacyjnych zawiera biblioteki do tworzenia certyfikatów, np. openssl. Są one jednak bardziej złożone i mniej niezawodne niż mkcert, a koniecznie działające na wielu platformach, przez co są mniej dostępne dla większych zespołów programistów.

Uwaga:

• Nigdy nie eksportuj ani nie udostępniaj pliku rootCA-key.pem, który mkcert tworzy automatycznie podczas wykonywania polecenia mkcert -install. Atakujący, który uzyska dostęp do tego pliku, może tworzyć ataki na ścieżce do dowolnej witryny, którą odwiedzasz. Mogą przechwycić szyfrowane żądania wysyłane z Twojego urządzenia do dowolnej witryny – banku, podmiotu medycznego lub sieci społecznościowej. Jeśli chcesz wiedzieć, gdzie znajduje się rootCA-key.pem, aby sprawdzić, czy jest bezpieczny, uruchom mkcert -CAROOT.
• Używaj mkcert tylko do celów programistycznych. Nie proś użytkowników o wykonywanie poleceń mkcert.
• Zespoły programistyczne: wszyscy członkowie zespołu powinni zainstalować i uruchomić mkcert osobno (nie przechowuj ani nie udostępniaj certyfikatu CA).

Konfiguracja

1. Zainstaluj mkcert (tylko raz).

   Postępuj zgodnie z instrukcjami dotyczącymi instalowania mkcert w systemie operacyjnym. Na przykład w systemie macOS:

   brew install mkcert
   brew install nss # if you use Firefox
   

2. Dodaj mkcert do lokalnych głównych urzędów certyfikacji.

   W terminalu uruchom to polecenie:

   mkcert -install
   

   Spowoduje to wygenerowanie lokalnego urzędu certyfikacji. Lokalny urząd certyfikacji wygenerowany przez mkcert jest zaufany tylko lokalnie na urządzeniu.

3. wygenerować certyfikat dla witryny podpisany przez mkcert.

   W terminalu przejdź do katalogu głównego witryny lub dowolnego katalogu, w którym chcesz przechowywać certyfikat.

   Następnie uruchom:

   mkcert localhost
   

   Jeśli używasz niestandardowej nazwy hosta, np. mysite.example, uruchom:

   mkcert mysite.example
   

   To polecenie wykonuje 2 czynności:

   • Generuje certyfikat dla podanej nazwy hosta.
   • Umożliwia to mkcert podpisanie certyfikatu.

   Twój certyfikat jest już gotowy i podpisany przez urząd certyfikacji, któremu zaufasz lokalnie w przeglądarce.

4. Skonfiguruj serwer tak, aby używał HTTPS i wygenerowanego przez Ciebie certyfikatu TLS.

   Sposób wykonania tych czynności zależy od serwera. Oto kilka przykładów:

   👩🏻‍💻 Z węzłem:

   server.js (zamień {PATH/TO/CERTIFICATE...} i {PORT}):

   const https = require('https');
   const fs = require('fs');
   const options = {
     key: fs.readFileSync('{PATH/TO/CERTIFICATE-KEY-FILENAME}.pem'),
     cert: fs.readFileSync('{PATH/TO/CERTIFICATE-FILENAME}.pem'),
   };
   https
     .createServer(options, function (req, res) {
       // server code
     })
     .listen({PORT});
   

   👩🏻 💻 z serwerem http:

   Uruchom serwer w ten sposób (zamień {PATH/TO/CERTIFICATE...}):

   http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem
   

   -S uruchamia serwer z HTTPS, a -C ustawia certyfikat, a -K ustawia klucz.

   👩🏻‍💻 Z serwerem deweloperskim React:

   Zmień kod package.json w ten sposób:{PATH/TO/CERTIFICATE...}

   "scripts": {
   "start": "HTTPS=true SSL_CRT_FILE={PATH/TO/CERTIFICATE-FILENAME}.pem SSL_KEY_FILE={PATH/TO/CERTIFICATE-KEY-FILENAME}.pem react-scripts start"
   

   Jeśli na przykład utworzysz certyfikat localhost w katalogu głównym witryny:

   |-- my-react-app
       |-- package.json
       |-- localhost.pem
       |-- localhost-key.pem
       |--...
   

   Twój skrypt start powinien wyglądać tak:

   "scripts": {
       "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start"
   

   👩🏻‍💻 Inne przykłady:

   • Serwer deweloperski Angulara
   • Python

5. Otwórz https://localhost lub https://mysite.example w przeglądarce, aby sprawdzić, czy witryna jest uruchamiana lokalnie z protokołem HTTPS. Nie zobaczysz żadnych ostrzeżeń w przeglądarce, ponieważ przeglądarka ufa mkcert jako lokalnej instytucji certyfikującej.

Krótkie omówienie mkcert

mkcert – podręcznik użytkownika

Aby uruchomić lokalną witrynę deweloperską z protokołem HTTPS:

1. Skonfiguruj mkcert.

   Zainstaluj mkcert, jeśli jeszcze tego nie zrobiono, np. w systemie macOS:

   brew install mkcert
   
   
   

   Instrukcje instalacji mkcert w systemach Windows i Linux znajdziesz w artykule install mkcert.

   Następnie utwórz lokalny urząd certyfikacji:

   mkcert -install

2. Utwórz zaufany certyfikat.

   mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}

   Spowoduje to utworzenie prawidłowego certyfikatu, który mkcert podpisze automatycznie.

3. Skonfiguruj serwer programistyczny tak, aby używał protokołu HTTPS i certyfikatu utworzonego w kroku 2.

Możesz teraz otworzyć https://{YOUR HOSTNAME} w przeglądarce bez ostrzeżeń

Uwaga: zrób to tylko do celów programistycznych i nigdy nie eksportuj ani nie udostępniaj pliku rootCA-key.pem. Jeśli chcesz wiedzieć, gdzie znajduje się ten plik, aby mieć pewność, że jest bezpieczny, uruchom mkcert -CAROOT.

</div>

Uruchamianie witryny lokalnie z protokołem HTTPS: inne opcje

Poniżej znajdziesz inne sposoby konfigurowania certyfikatu. Zwykle są one bardziej skomplikowane lub ryzykowne niż korzystanie z mkcert.

Certyfikat z podpisem własnym

Możesz też zrezygnować z korzystania z lokalnego urzędu certyfikacji, takiego jak mkcert, i sam podpisać swój certyfikat. Takie podejście ma kilka pułapek:

• Przeglądarki nie ufają Ci jako urzędowi certyfikacji, więc wyświetlają ostrzeżenia, które musisz pominąć ręcznie. W Chrome możesz użyć flagi #allow-insecure-localhost, aby automatycznie pominąć to ostrzeżenie na localhost.
• Nie jest to bezpieczne, jeśli pracujesz w niezabezpieczonej sieci.
• Niekoniecznie jest to łatwiejsze ani szybsze niż korzystanie z lokalnego urzędu certyfikacji, np. mkcert.
• Samodzielnie podpisane certyfikaty nie będą działać dokładnie tak samo jak zaufane certyfikaty.
• Jeśli nie używasz tej metody w kontekście przeglądarki, musisz wyłączyć weryfikację certyfikatów na serwerze. Zapomnienie o ponownym włączeniu go w środowisku produkcyjnym powoduje problemy z bezpieczeństwem.

Przeglądarki wyświetlają ostrzeżenia, gdy używany jest samodzielnie podpisany certyfikat.

Jeśli nie określisz certyfikatu, React i Vue utworzy certyfikat samopodpisany. To szybkie rozwiązanie, ale wiąże się z tymi samymi ostrzeżeniami w przeglądarce i innymi pułapkami związanymi z samodzielnie podpisanymi certyfikatami. Na szczęście możesz użyć wbudowanej opcji HTTPS w ramach frameworków frontendu i określić lokalnie zaufany certyfikat utworzony za pomocą mkcert lub podobnego narzędzia. Więcej informacji znajdziesz w przykładzie mkcert z React.

Dlaczego przeglądarki nie ufają samodzielnie podpisanym certyfikatom?

Jeśli otworzysz witrynę działającą lokalnie w przeglądarce za pomocą protokołu HTTPS, przeglądarka sprawdzi certyfikat lokalnego serwera programistycznego. Gdy zobaczy, że certyfikat został podpisany przez Ciebie, sprawdzi, czy jesteś zarejestrowany jako zaufany urząd certyfikacji. Ponieważ nie jesteś, przeglądarka nie może ufać certyfikatowi i wyświetla ostrzeżenie, że połączenie nie jest bezpieczne. Jeśli zdecydujesz się kontynuować, połączenie HTTPS zostanie utworzone, ale będzie to na Twoją odpowiedzialność.

Dlaczego przeglądarki nie ufają samopodpisanym certyfikatom.

Certyfikat podpisany przez zwykły urząd certyfikacji

Możesz też użyć certyfikatu podpisanego przez oficjalny urząd certyfikacji. Dostępne są te widżety:

• Konfiguracja wymaga więcej pracy niż w przypadku korzystania z lokalnej techniki CA, takiej jak mkcert.
• Musisz użyć prawidłowej nazwy domeny, którą kontrolujesz. Oznacza to, że nie możesz używać oficjalnych urzędów certyfikacji w przypadku:
  • localhost i inne zarezerwowane nazwy domen, np. example lub test.
  • Dowolna nazwa domeny, nad którą nie masz kontroli.
  • Nieprawidłowe domeny najwyższego poziomu. Więcej informacji znajdziesz na liście prawidłowych domen najwyższego poziomu.

Odwrotny serwer proxy

Inną opcją uzyskania dostępu do witryny działającej lokalnie za pomocą protokołu HTTPS jest użycie serwera proxy odwrotnego, np. ngrok. Może to wiązać się z takimi zagrożeniami:

• Każda osoba, której udostępnisz adres URL odwrotnego serwera proxy, będzie mieć dostęp do Twojej lokalnej witryny deweloperskiej. Może to być pomocne podczas zademonstrowania projektu klientom, ale może też pozwolić nieupoważnionym osobom udostępniać informacje poufne.
• Niektóre usługi odwrotnego proxy pobierają opłaty za korzystanie, więc cena może być czynnikiem decydującym o wyborze usługi.
• Nowe środki bezpieczeństwa w przeglądarkach mogą wpływać na działanie tych narzędzi.

Oznacz (niezalecane)

Jeśli używasz w Chrome niestandardowej nazwy hosta, takiej jak mysite.example, możesz użyć flagi, aby wymusić uznanie przeglądarki mysite.example za bezpieczną. Nie rób tego z tych powodów:

• Musisz mieć 100% pewności, że mysite.example zawsze przekierowuje do lokalnego adresu. W przeciwnym razie możesz ujawnić dane logowania do wersji produkcyjnej.
• Ten parametr działa tylko w Chrome, więc nie można debugować w różnych przeglądarkach.

Dziękujemy wszystkim recenzentom i współtwórcom za ich wkład i opinie, szczególnie Ryanowi Sleevi, Filippo Valsordzie, Milicy Mihajlija i Rowanowi Merewoodowi. 🙌

Tło banera powitalnego autorstwa @anandu z Unsplash, zmodyfikowane.