Używaj protokołu HTTPS na potrzeby programowania lokalnego

Maud Nalpas

W większości przypadków http://localhost zachowuje się jak HTTPS na potrzeby programistyczne. Istnieją jednak pewne przypadki szczególne, 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ą tak, aby zachowywała się jak HTTPS, aby dokładnie odzwierciedlała działanie witryny w środowisku produkcyjnym. (Jeśli Twoja witryna produkcyjna nie korzysta z HTTPS, priorytetowo potraktuj przejście na HTTPS).

Na tej stronie dowiesz się, jak uruchomić witrynę lokalnie przy użyciu protokołu HTTPS.

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

Uruchamianie witryny lokalnie z protokołem HTTPS za pomocą mkcert (zalecane)

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

Do utworzenia i podpisania certyfikatu zalecamy użycie mkcert, czyli urzędu certyfikacji na wiele platform. Inne przydatne opcje znajdziesz w artykule Uruchamianie witryny lokalnie przy użyciu protokołu HTTPS: inne opcje.

Wiele systemów operacyjnych zawiera biblioteki do tworzenia certyfikatów, takie jak openssl. Są one jednak bardziej złożone i mniej niezawodne niż mkcert, a także nie zawsze działają 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 instrukcjami instalowania mkcert w swoim 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.

    Uruchom w terminalu 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. Wygeneruj certyfikat dla swojej 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 mkcert podpisanie certyfikatu.

    Certyfikat jest teraz gotowy i podpisany przez urząd certyfikacji, któremu przeglądarka ufa lokalnie.

  4. Skonfiguruj serwer tak, aby używał protokołu HTTPS i utworzonego właśnie certyfikatu TLS.

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

    👩🏻‍💻 Za pomocą węzła:

    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});

    👩🏻‍💻 Za pomocą 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 z HTTPS, a -C ustawia certyfikat, natomiast -K ustawia klucz.

    👩🏻‍💻 Z serwerem programistycznym React:

    Zmodyfikuj plik package.json w ten sposób i 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 certyfikat dla domeny localhost został utworzony w katalogu głównym witryny:

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

    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 https://localhost lub https://mysite.example w przeglądarce, aby sprawdzić, czy witryna działa lokalnie z protokołem HTTPS. Nie zobaczysz żadnych ostrzeżeń przeglądarki, ponieważ przeglądarka ufa mkcert jako lokalnemu urzędowi certyfikacji.

Krótkie omówienie mkcert

Krótkie omówienie mkcert

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

  1. Skonfiguruj mkcert.

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

    brew install mkcert

    Instrukcje dotyczące systemów Windows i Linux znajdziesz w sekcji Instalowanie 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 uzyskać dostęp do https://{YOUR HOSTNAME} w przeglądarce bez ostrzeżeń

</div>

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

Poniżej znajdziesz inne sposoby konfigurowania certyfikatu. Są one zwykle bardziej skomplikowane lub ryzykowne niż używanie mkcert.

Certyfikat podpisany samodzielnie

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

  • Przeglądarki nie ufają Ci jako urzędowi certyfikacji, więc będą wyświetlać ostrzeżenia, które musisz ręcznie pominąć. W Chrome możesz użyć flagi #allow-insecure-localhost, aby automatycznie pomijać to ostrzeżenie na urządzeniu localhost.
  • Jest to niebezpieczne, jeśli pracujesz w niezabezpieczonej sieci.
  • Niekoniecznie jest to łatwiejsze lub szybsze niż użycie lokalnego urzędu certyfikacji, takiego jak mkcert.
  • Certyfikaty podpisane samodzielnie nie będą działać dokładnie tak samo jak certyfikaty zaufane.
  • Jeśli nie używasz tej techniki w kontekście przeglądarki, musisz wyłączyć weryfikację certyfikatu na serwerze. Jeśli zapomnisz włączyć je ponownie w środowisku produkcyjnym, spowoduje to problemy z bezpieczeństwem.
Zrzuty ekranu z ostrzeżeniami wyświetlanymi przez przeglądarki, gdy używany jest certyfikat podpisany samodzielnie.
Ostrzeżenia wyświetlane przez przeglądarki, gdy używany jest certyfikat podpisany samodzielnie.

Jeśli nie określisz certyfikatu, opcje HTTPS serwera deweloperskiego React i Vue utworzą certyfikat podpisany samodzielnie. Jest to szybkie rozwiązanie, ale wiąże się z tymi samymi ostrzeżeniami przeglądarki i innymi pułapkami certyfikatów podpisanych samodzielnie. Na szczęście możesz użyć wbudowanej opcji HTTPS we frameworkach 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ą certyfikatom podpisanym samodzielnie?

Jeśli otworzysz lokalnie działającą witrynę w przeglądarce za pomocą protokołu HTTPS, przeglądarka sprawdzi certyfikat lokalnego serwera deweloperskiego. 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 zaufać certyfikatowi i wyświetla ostrzeżenie, że połączenie nie jest bezpieczne. Jeśli przejdziesz dalej, połączenie HTTPS zostanie utworzone, 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 komplikacjami:

  • Wymaga więcej pracy konfiguracyjnej niż w przypadku 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 do:

Odwrotny serwer proxy

Inną opcją uzyskania dostępu do witryny działającej lokalnie przez HTTPS jest użycie odwrotnego serwera proxy, takiego jak ngrok. Wiąże się to z następującymi zagrożeniami:

  • Każdy, komu udostępnisz URL zwrotnego serwera proxy, może uzyskać dostęp do Twojej lokalnej witryny deweloperskiej. Może to być przydatne podczas prezentowania projektu klientom, ale może też umożliwić nieupoważnionym osobom udostępnianie informacji poufnych.
  • Niektóre usługi odwrotnego serwera proxy pobierają opłaty za korzystanie, więc cena może być czynnikiem wpływającym na wybór usługi.
  • Nowe środki bezpieczeństwa w przeglądarkach mogą wpływać na działanie tych narzędzi.

Jeśli w Chrome używasz niestandardowej nazwy hosta, np. mysite.example, możesz użyć flagi, aby wymusić na przeglądarce uznanie nazwy mysite.example za bezpieczną. Unikaj tego z tych powodów:

  • Musisz mieć całkowitą pewność, że adres mysite.example zawsze jest rozpoznawany jako adres lokalny. W przeciwnym razie ryzykujesz wyciek danych logowania do środowiska produkcyjnego.
  • Ta flaga działa tylko w Chrome, więc nie możesz debugować w różnych przeglądarkach.

Dziękujemy wszystkim recenzentom i współtwórcom za ich wkład i opinie, a w szczególności Ryanowi Sleeviemu, Filippowi Valsordzie, Milicy Mihajliji i Rowanowi Merewoodowi. 🙌

Wstecz
Kiedy używać protokołu HTTPS na potrzeby programowania lokalnego