Używaj protokołu HTTPS na potrzeby programowania lokalnego

Maud Nalpas
Maud Nalpas
X GitHub

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.

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.

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:

  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ń

</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.
Zrzuty ekranu z ostrzeżeniami wyświetlanymi przez przeglądarki, gdy używany jest certyfikat z podpisem własnym
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ą certyfikatom podpisanym samodzielnie: diagram.
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:

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.

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.