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 czy 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, co pozwoli odzwierciedlać jej działanie 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 wpisie 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.

Do tworzenia i podpisywania certyfikatów zalecamy użycie mkcert, czyli wieloplatformowego urzędu certyfikacji. 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, takie jak openssl. Są one jednak bardziej skomplikowane i mniej niezawodne niż mkcert i niekoniecznie działają na wielu platformach, co sprawia, że 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 bezpiecznie, 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 Twoim 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 działania:

   • Wygeneruje certyfikat dla określonej 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.

   Szczegóły tego, jak to zrobić, zależą 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 http-server:

   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ń swój plik 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.

mkcert – podręcznik użytkownika

mkcert – podręcznik użytkownika

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

1. Konfiguracja 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: rób to tylko w celach programistycznych i nigdy nie eksportuj ani nie udostępniaj tego 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ą urzędowi certyfikacji, więc wyświetlają ostrzeżenia, które musisz ominąć 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 niebezpiecznej sieci.
• Niekoniecznie jest to łatwiejsze ani szybsze niż korzystanie z lokalnego urzędu certyfikacji, np. mkcert.
• Podpisane samodzielnie certyfikaty nie działają tak samo jak zaufane certyfikaty.
• Jeśli nie używasz tej metody w kontekście przeglądarki, musisz wyłączyć weryfikację certyfikatu 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. Jest to szybkie rozwiązanie, ale wiąże się z tymi samymi ostrzeżeniami przeglądarki i innymi pułapkami, które dotyczą podpisywanych samodzielnie certyfikatów. 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 Reactem.

Dlaczego przeglądarki nie ufają samodzielnie podpisanym certyfikatom?

Jeśli otworzysz witrynę działającą lokalnie w przeglądarce przy użyciu protokołu HTTPS, przeglądarka sprawdzi certyfikat lokalnego serwera programistycznego. Gdy zauważy, ż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ć, nadal zostanie utworzone połączenie HTTPS, 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. W ramach tej funkcji dostępne są te widżety:

• Konfiguracja wymaga więcej pracy niż w przypadku korzystania z lokalnej metody 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 zastrzeżone nazwy domen, takie jak example czy test.
  • 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ć przydatne podczas prezentacji projektu klientom, ale może też umożliwić nieupoważnionym osobom udostępnianie informacji poufnych.
• 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 jako nieodpowiednią (niezalecane)

Jeśli używasz niestandardowej nazwy hosta, np. mysite.example, w Chrome, możesz użyć flagi, aby zmusić przeglądarkę do uznania 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 Slevi, Filippo Valsordzie, Milicy Mihajlija i Rowanowi Merewoodowi. 🙌

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