Używaj protokołu HTTPS na potrzeby programowania lokalnego

Maud Nalpas
Maud Nalpas
X GitHub

W większości przypadków http://localhost działa jak HTTPS na potrzeby programowania. w celach informacyjnych. Jest jednak kilka szczególnych przypadków, takich jak niestandardowe nazwy hostów lub stosowanie bezpiecznych plików cookie w różnych przeglądarkach, jawnie skonfigurować witrynę dla programistów tak, aby chroniła się tak jak HTTPS, pokazują sposób działania witryny w wersji produkcyjnej. (Jeśli witryna produkcyjna nie użyj protokołu HTTPS, traktuj priorytetowo przejście na HTTPS).

Z tego artykułu dowiesz się, jak uruchomić witrynę lokalnie z użyciem protokołu HTTPS.

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

Uruchamianie witryny lokalnie z użyciem protokołu HTTPS i użyciem mkcert (zalecane)

Aby używać protokołu HTTPS w witrynie lokalnego rozwoju i uzyskać dostęp do https://localhost lub https://mysite.example (niestandardowa nazwa hosta), potrzebujesz Certyfikat TLS podpisany przez podmiot zaufany przez urządzenie i przeglądarkę, nazywany zaufanym urząd certyfikacji (CA). Przeglądarka sprawdza, czy certyfikat serwera programistycznego jest podpisany przez zaufanego urzędu certyfikacji.

Zalecamy użycie polecenia mkcert, międzyplatformowego urzędu certyfikacji, aby utworzyć i podpisać certyfikat. Inne przydatne przeczytaj artykuł Uruchamianie witryny lokalnie z użyciem 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 bardziej niezawodne niż mkcert, a niekoniecznie działania międzyplatformowe, dla większych zespołów programistów.

Konfiguracja

  1. Zainstaluj mkcert (tylko raz).

    Postępuj zgodnie z instrukcjami. . 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. Wygeneruj certyfikat dla swojej witryny podpisany przez mkcert.

    W terminalu przejdź do katalogu głównego witryny lub do innego w którym chcesz zapisać 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 wykonuje 2 czynności:

    • Generuje certyfikat dla podanej nazwy hosta.
    • Pozwala mkcert podpisać certyfikat.

    Twój certyfikat jest gotowy i podpisany przez urząd certyfikacji jako zaufanej przeglądarce.

  4. Skonfiguruj serwer do używania HTTPS – utworzonego właśnie certyfikatu TLS.

    Sposób wykonania tych czynności 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 http-server:

    Uruchom serwer w następujący 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 protokołem HTTPS, -C ustawia certyfikat, a -K ustawia klucz.

    👩🏻 💻 Przy użyciu serwera programistycznego React:

    Edytuj package.json w następujący sposób i zastąp element {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 np. w witrynie masz utworzony certyfikat dla usługi localhost katalog główny:

    |-- 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"

    👩🏻 💻 innych przykładach:

  5. Otwórz w przeglądarce https://localhost lub https://mysite.example, aby upewnij się, że witryna jest uruchomiona lokalnie przy użyciu protokołu HTTPS. Nie zobaczysz żadnych ostrzeżenia przeglądarki, ponieważ przeglądarka ufa mkcert jako certyfikatowi lokalnemu organu władzy.

Krótkie omówienie mkcert

Krótkie omówienie mkcert

Aby uruchomić witrynę lokalną za pomocą protokołu HTTPS:

  1. Skonfiguruj mkcert.

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

    brew install mkcert

    Sprawdź instalację 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 będzie podpisany automatycznie przez mkcert.

  3. Skonfiguruj serwer programistyczny tak, aby korzystał z protokołu HTTPS i z Twojego certyfikatu utworzony w kroku 2.

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

</div>

Uruchamianie witryny lokalnie z użyciem protokołu HTTPS: inne opcje

Oto inne sposoby konfigurowania certyfikatu. Są to zwykle jest bardziej skomplikowane lub ryzykowne niż mkcert.

Certyfikat podpisany samodzielnie

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

  • Przeglądarki nie ufają Ci jako urzędowi certyfikacji, więc będą wyświetlać ostrzeżenia którą trzeba pominąć ręcznie. W Chrome możesz użyć flagi, #allow-insecure-localhost, aby automatycznie ominąć to ostrzeżenie localhost
  • Nie jest to bezpieczne, jeśli pracujesz w niezabezpieczonej sieci.
  • Nie zawsze jest to łatwiejsze lub szybsze niż używanie lokalnego urzędu certyfikacji, takiego jak mkcert.
  • Samodzielnie podpisane certyfikaty nie będą działać dokładnie tak samo jak zaufane certyfikatów.
  • Jeśli nie używasz tej metody w kontekście przeglądarki, musisz wyłączyć do weryfikacji certyfikatu serwera. Zapominam go ponownie włączyć za powoduje problemy z bezpieczeństwem.
.
Zrzuty ekranu z ostrzeżeniami wyświetlanymi w przeglądarkach, gdy używany jest certyfikat podpisany samodzielnie.
Ostrzeżenia wyświetlają się w przeglądarkach, gdy używany jest certyfikat podpisany samodzielnie.

Jeśli nie określisz certyfikatu, React's i Vue opcje HTTPS serwera programistycznego tworzą certyfikat podpisany samodzielnie w Google Cloud. To szybkie, ale w przeglądarce pojawiają się te same ostrzeżenia i inne o pułapkach samodzielnie podpisanych certyfikatów. Na szczęście możesz użyć frontendu platformy wbudowaną opcję HTTPS i określenie zaufanego certyfikatu lokalnego utworzony przy użyciu mkcert lub podobnego. Więcej informacji: mkcert z reakcją React.

Dlaczego przeglądarki nie ufają certyfikatom podpisanym samodzielnie?

Jeśli otworzysz witrynę działającą lokalnie w przeglądarce za pomocą protokołu HTTPS, przeglądarka sprawdza certyfikat lokalnego serwera programistycznego. Kiedy to wykryje, że certyfikat został podpisany przez Ciebie, sprawdzi, czy jesteś zarejestrowanym zaufanym urzędem certyfikacji. Ponieważ jesteś nie, przeglądarka nie może ufać certyfikatowi i wyświetla się ostrzeżenie z informacją, że połączenie nie jest bezpieczne. Nadal tworzy protokół HTTPS jeśli będziesz kontynuować, ale robisz to na własne ryzyko.

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

Certyfikat podpisany przez zwykły urząd certyfikacji

Możesz też używać certyfikatu podpisanego przez oficjalny urząd certyfikacji. Wiąże się to z: następujące powikłania:

  • Masz do wykonania więcej pracy związanej z konfiguracją niż w przypadku korzystania z lokalnego urzędu certyfikacji, np. Mkcert.
  • Musisz użyć prawidłowej nazwy domeny, nad którą masz kontrolę. Oznacza to, że nie możesz używaj oficjalnych urzędów certyfikacji dla:

Odwrotny serwer proxy

Aby uzyskać dostęp do witryny działającej lokalnie za pomocą protokołu HTTPS, możesz użyć protokołu odwrotnego serwera proxy, na przykład ngrok Wiąże się to z następującymi zagrożeniami:

  • Każda osoba, której udostępnisz adres URL odwrotnego serwera proxy, będzie mieć dostęp do Twoich lokalnych aplikacji witrynie. Może to być pomocne podczas zademonstrowania projektu klientom, ale może też umożliwiać nieupoważnionym osobom udostępnianie informacji poufnych.
  • Niektóre usługi pośredniczące w odwróceniu pobierają opłaty za korzystanie, więc cena może mieć wpływ na ich cenę. wyboru usługi.
  • Nowe zabezpieczenia w przeglądarkach mogą wpływać sposób działania tych narzędzi.

Jeśli używasz w Chrome niestandardowej nazwy hosta, takiej jak mysite.example, możesz użyć parametru , aby wymuszać uznanie przeglądarki za bezpieczne mysite.example. Unikaj wykonywania tych czynności z następujących powodów:

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

Dziękujemy za wkład oraz opinie wszystkim recenzentom i współtwórcom, zwłaszcza Ryanowi Sleevi, Filippo Valsorda, Milica Mihajlija i Rowan Merewood. 🙌

Tło banera powitalnego od: @anandu w: Unsplash, edytowane.