Używaj protokołu HTTPS na potrzeby programowania lokalnego

Maud Nalpas
Maud Nalpas
X GitHub

W większości przypadków http://localhost w celach programistycznych działa jak HTTPS. Istnieją jednak pewne szczególne przypadki, np. niestandardowe nazwy hostów lub korzystanie z bezpiecznych plików cookie w przeglądarkach, w których musisz wyraźnie skonfigurować witrynę deweloperską w taki sposób, aby działała jak HTTPS, co dokładnie odzwierciedlało sposób działania witryny w środowisku produkcyjnym. (Jeśli witryna produkcyjna nie korzysta z protokołu HTTPS, ustaw priorytet jego przejścia na HTTPS).

Z tego artykułu dowiesz się, jak uruchamiać witrynę lokalnie przy użyciu protokołu HTTPS.

Krótkie instrukcje znajdziesz w krótkim dokumencie mkcert**.

Uruchamianie witryny lokalnie przez HTTPS przy użyciu mkcert (zalecane)

Aby używać protokołu HTTPS w lokalnej witrynie deweloperskiej i mieć dostęp do https://localhost lub https://mysite.example (niestandardowa nazwa hosta), potrzebujesz certyfikatu TLS podpisanego przez podmiot, którym Twoje urządzenie i przeglądarka ufają, nazywany zaufanym urzędem certyfikacji (CA). Przed utworzeniem połączenia HTTPS przeglądarka sprawdza, czy certyfikat serwera programistycznego jest podpisany przez zaufany urząd certyfikacji.

Do utworzenia i podpisania certyfikatu zalecamy użycie mkcert, wieloplatformowego urzędu certyfikacji. Inne przydatne opcje znajdziesz w artykule Lokalne uruchamianie witryny przy użyciu protokołu 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. Niekoniecznie działają też na wielu platformach, co sprawia, że są mniej dostępne dla większych zespołów programistów.

Konfiguracja

  1. Zainstaluj mkcert (tylko raz).

    Postępuj zgodnie z instructions instalowania narzędzia 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 następujące 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. Wygeneruj certyfikat dla swojej witryny podpisany przy użyciu mkcert.

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

    Następnie uruchom polecenie:

    mkcert localhost

    Jeśli używasz niestandardowej nazwy hosta, takiej jak mysite.example, uruchom polecenie:

    mkcert mysite.example

    To polecenie działa na 2 sposoby:

    • Generuje certyfikat dla określonej nazwy hosta.
    • Pozwól mkcert podpisać certyfikat.

    Certyfikat jest teraz gotowy i podpisany przez urząd certyfikacji, który jest zaufany przez Twoją przeglądarkę.

  4. Skonfiguruj serwer do korzystania z protokołu HTTPS utworzonego właśnie certyfikatu TLS.

    Jak to zrobić, zależy od serwera. Oto kilka przykładów:

    👩🏻 💻 Z węzłem:

    server.js (zastąp {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-server:

    Uruchom serwer w ten sposób (zastąp {PATH/TO/CERTIFICATE...}):

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

    -S uruchamia serwer przy użyciu protokołu HTTPS, natomiast -C ustawia certyfikat, a -K ustawia klucz.

    👩🏻 💻 Z serwerem programistycznym React:

    Edytuj package.json w następujący sposób, zastąp {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 w katalogu głównym witryny masz utworzony certyfikat dla adresu localhost:

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

    Wtedy 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:

  5. Otwórz w przeglądarce plik https://localhost lub https://mysite.example i sprawdź, czy witryna działa lokalnie przy użyciu protokołu HTTPS. Nie zobaczysz żadnych ostrzeżeń w przeglądarce, ponieważ przeglądarka ufa mkcert jako lokalnym urzędowi certyfikacji.

Krótki przewodnik po mkcert

Krótki przewodnik po mkcert

Aby w lokalnej witrynie programistycznej korzystać z protokołu HTTPS:

  1. Skonfiguruj mkcert.

    Jeśli nie masz jeszcze programu mkcert, zainstaluj go na przykład w systemie macOS:

    brew install mkcert

    Zapoznaj się z instrukcjami dotyczącymi instalacji mkcert dla systemów Windows i Linux.

    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 ważnego certyfikatu, który jest podpisany automatycznie przez mkcert.

  3. Skonfiguruj serwer programistyczny do korzystania z protokołu HTTPS i certyfikatu utworzonego w kroku 2.

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

</div>

Uruchamianie witryny lokalnie przy użyciu protokołu HTTPS – inne opcje

Poniżej znajdziesz opis innych sposobów konfigurowania certyfikatu. Są one zwykle bardziej skomplikowane lub ryzykowne niż użycie mkcert.

Certyfikat podpisany samodzielnie

Możesz też zrezygnować z używania lokalnego urzędu certyfikacji, takiego jak mkcert, i podpisać certyfikat samodzielnie. Takie podejście ma kilka pułapek:

  • Przeglądarki nie ufają Twoim urzędom certyfikacji, więc wyświetlają ostrzeżenia, które trzeba pominąć ręcznie. W Chrome możesz użyć flagi #allow-insecure-localhost, aby automatycznie pomijać to ostrzeżenie na stronie localhost.
  • Nie jest to bezpieczne w przypadku pracy w niezabezpieczonej sieci.
  • Nie musi to być łatwiejsze ani szybsze niż użycie lokalnego urzędu certyfikacji, takiego jak mkcert.
  • Certyfikaty podpisane samodzielnie nie działają dokładnie tak samo jak certyfikaty zaufane.
  • Jeśli nie używasz tej metody w kontekście przeglądarki, musisz wyłączyć weryfikację certyfikatu na swoim serwerze. Zapomniane ponowne włączenie w środowisku produkcyjnym powoduje problemy z bezpieczeństwem.
Zrzuty ekranu przedstawiające ostrzeżenia wyświetlane w przeglądarkach podczas używania certyfikatu podpisanego samodzielnie.
Ostrzeżenia wyświetlają się w przeglądarkach, gdy używany jest certyfikat podpisany samodzielnie.

Jeśli nie określisz certyfikatu, opcje HTTPS React i serwera deweloperskiegoVue tworzą automatycznie podpisany certyfikat. Jest to szybkie rozwiązanie, ale ma te same ostrzeżenia przeglądarki i inne pułapki związane z samodzielnie podpisanymi certyfikatami. Na szczęście możesz skorzystać z wbudowanej opcji HTTPS platformy frontendu i określić zaufany certyfikat lokalny utworzony przy użyciu mkcert lub podobnego certyfikatu. Więcej informacji znajdziesz w przykładzie mkcert with React.

Dlaczego przeglądarki nie ufają certyfikatom podpisanym samodzielnie?

Jeśli otworzysz w przeglądarce działającą lokalnie witrynę przy użyciu protokołu HTTPS, przeglądarka sprawdzi certyfikat lokalnego serwera programistycznego. Gdy wykryje, że certyfikat został podpisany przez Ciebie, sprawdza, czy firma jest zarejestrowana jako zaufany urząd certyfikacji. Ponieważ nie masz certyfikatu, przeglądarka nie może mu zaufać i wyświetli się ostrzeżenie z informacją, że połączenie nie jest bezpieczne. Jeśli przejdziesz dalej, nadal utworzymy połączenie HTTPS, ale robisz to na własne ryzyko.

Dlaczego przeglądarki nie ufają certyfikatom podpisanym samodzielnie: diagram.
Dlaczego przeglądarki nie ufają certyfikatom podpisanym samodzielnie.

Certyfikat podpisany przez zwykły urząd certyfikacji

Możesz też użyć certyfikatu podpisanego przez oficjalny urząd certyfikacji. Wiąże się to z tymi widżetami:

  • Musisz wykonać więcej czynności konfiguracyjnych niż przy użyciu metody lokalnego urzędu certyfikacji, takiej jak mkcert.
  • Musisz użyć prawidłowej nazwy domeny, nad którą masz kontrolę. Oznacza to, że w tych celach nie możesz używać oficjalnych urzędów certyfikacji:

Odwrotny serwer proxy

Inną opcją uzyskania dostępu do lokalnej witryny przez HTTPS jest użycie odwrotnego serwera proxy, np. ngrok. Wiąże się to z następującymi zagrożeniami:

  • Dostęp do lokalnej witryny dla programistów będzie miał każdy, komu udostępnisz adres URL odwrotnego serwera proxy. Może to być pomocne podczas prezentacji projektu klientom, ale może też pozwolić nieautoryzowanym osobom na udostępnienie poufnych informacji.
  • Niektóre usługi odwrotnego serwera proxy pobierają opłaty za korzystanie, więc przy wyborze usługi brane są pod uwagę ceny.
  • Na działanie tych narzędzi mogą wpływać nowe zabezpieczenia w przeglądarkach.

Jeśli w Chrome używasz niestandardowej nazwy hosta, takiej jak mysite.example, możesz użyć flagi, aby wymusić na przeglądarce traktowanie przez przeglądarkę mysite.example jako bezpiecznej. Unikaj tego z tych powodów:

  • Musisz mieć 100% pewności, że adres mysite.example będzie zawsze wskazywać adres lokalny. W przeciwnym razie ryzykujesz wyciekiem danych logowania produkcyjnych.
  • Ta flaga działa tylko w Chrome, więc nie można debugować w różnych przeglądarkach.

Dziękujemy za publikowanie treści i przekazywanie opinii wszystkim weryfikatorom i współtwórcom – w szczególności Ryan Sleevi, Filippo Valsorda, Milica Mihajlija i Rowane Merewood. 🙌

Tło powitalne od @anandu w Unsplash, edytowane.