Wann sollte HTTPS für die lokale Entwicklung verwendet werden?

Die Verwendung von http://localhost für die lokale Entwicklung ist meistens zulässig, außer in einigen Sonderfällen. In diesem Beitrag erfahren Sie, wann Sie Ihre lokale Entwicklungswebsite mit HTTPS ausführen müssen.

Maud Nalpas
Maud Nalpas

Weitere Informationen finden Sie unter HTTPS für die lokale Entwicklung verwenden.

In diesem Beitrag gelten die Aussagen über localhost auch für 127.0.0.1 und [::1], da sie beide die lokale Computeradresse beschreiben, die auch als „Loopback-Adresse“ bezeichnet wird. Außerdem wird der Einfachheit halber keine Portnummer angegeben. Wenn du http://localhost siehst, solltest du es als http://localhost:{PORT} oder http://127.0.0.1:{PORT} lesen.

Zusammenfassung

Verwenden Sie bei der lokalen Entwicklung standardmäßig http://localhost. Service Worker, Web Authentication API und mehr sind geeignet. In den folgenden Fällen benötigen Sie jedoch HTTPS für die lokale Entwicklung:

  • Sichere Cookies in allen Browsern einheitlich setzen
  • Probleme mit gemischten Inhalten beheben
  • HTTP/2 und höher verwenden
  • Bibliotheken oder APIs von Drittanbietern verwenden, die HTTPS erfordern
  • Benutzerdefinierten Hostnamen verwenden

    Eine Liste von Fällen, in denen HTTPS für die lokale Entwicklung verwendet werden muss.
    Wann sollte HTTPS für die lokale Entwicklung verwendet werden?

✨ Mehr erfährst du hier. Wenn Sie sich für weitere Informationen interessieren, lesen Sie einfach weiter.

Warum sich Ihre Entwicklungswebsite sicher verhalten sollte

Um unerwartete Probleme zu vermeiden, sollte sich Ihre lokale Entwicklungswebsite so gut wie möglich wie Ihre Produktionswebsite verhalten. Wenn Ihre Produktionswebsite also HTTPS verwendet, soll sich Ihre lokale Entwicklungswebsite wie eine HTTPS-Website verhalten.

http://localhost als Standard verwenden

Browser behandeln http://localhost auf besondere Weise: Obwohl die Website HTTP ist, verhält sie sich aber größtenteils wie eine HTTPS-Website.

Unter http://localhost werden Service Worker, Sensor APIs, Authentication APIs, Zahlungen und andere Funktionen, die bestimmte Sicherheitsgarantien erfordern, unterstützt und verhalten sich genau wie auf einer HTTPS-Website.

Wann sollte HTTPS für die lokale Entwicklung verwendet werden?

Unter Umständen verhält sich http://localhost nicht wie eine HTTPS-Website. Sie können aber auch einfach einen benutzerdefinierten Websitenamen verwenden, der nicht http://localhost ist.

In den folgenden Fällen müssen Sie HTTPS für die lokale Entwicklung verwenden:

  • Sie müssen lokal ein Cookie festlegen, das Secure oder SameSite:none ist oder das Präfix __Host hat. Secure-Cookies werden nur bei HTTPS gesetzt, aber nicht bei http://localhost für alle Browser. Da das Cookie für SameSite:none und __Host ebenfalls Secure sein muss, ist für das Setzen solcher Cookies auf Ihrer lokalen Entwicklungswebsite auch HTTPS erforderlich.

  • Sie müssen lokal ein Problem beheben, das nur auf einer HTTPS-Website, aber nicht auf einer HTTP-Website auftritt, nicht einmal bei http://localhost, wie z. B. ein Problem mit gemischtem Content.

  • Du musst ein für HTTP/2 oder neueres Verhalten spezifische Verhalten lokal testen oder reproduzieren. beispielsweise, wenn Sie die Ladeleistung unter HTTP/2 oder höher testen möchten. Unsicheres HTTP/2 oder höher wird nicht unterstützt, auch nicht unter localhost.

  • Sie müssen Bibliotheken oder APIs von Drittanbietern, die HTTPS erfordern (z. B. OAuth), lokal testen.

  • Sie verwenden nicht localhost, sondern einen benutzerdefinierten Hostnamen für die lokale Entwicklung, z. B. mysite.example. In der Regel bedeutet dies, dass Sie Ihre lokale Hosts-Datei überschrieben haben:

    Screenshot eines Terminals, das eine Datei „hosts“ bearbeitet
    Datei „hosts“ bearbeiten, um einen benutzerdefinierten Hostnamen hinzuzufügen

    In diesem Fall wird mysite.example in Chrome, Edge, Safari und Firefox standardmäßig nicht als sicher eingestuft, obwohl es sich um eine lokale Website handelt. Sie verhält sich also nicht wie eine HTTPS-Website.

  • Andere Fälle! Diese Liste ist nicht vollständig. Wenn du aber auf einen Fall stößt, der hier nicht aufgeführt ist, weißt du: Es funktioniert auf http://localhost nicht richtig oder die Produktionswebsite funktioniert nicht ganz wie bei deiner Produktionswebsite. 🙃

In allen diesen Fällen müssen Sie HTTPS für die lokale Entwicklung verwenden.

HTTPS für die lokale Entwicklung verwenden

Wenn Sie HTTPS für die lokale Entwicklung verwenden müssen, lesen Sie den Artikel HTTPS für die lokale Entwicklung verwenden.

Tipps zur Verwendung eines benutzerdefinierten Hostnamens

Wenn Sie einen benutzerdefinierten Hostnamen verwenden, z. B. zum Bearbeiten der Datei „hosts“:

  • Verwenden Sie keinen reinen Hostnamen wie mysite. Wenn eine Top-Level-Domain (TLD) denselben Namen hat (mysite), können Probleme auftreten. Und es ist nicht ganz unwahrscheinlich: Im Jahr 2020 gab es über 1.500 TLDs und die Liste wächst stetig. coffee, museum, travel und viele große Unternehmen – vielleicht sogar die des Unternehmens, bei dem Sie arbeiten – sind TLDs. Die vollständige Liste finden Sie hier.
  • Verwenden Sie nur Domains, die Ihnen gehören oder für diesen Zweck reserviert sind. Wenn Sie keine eigene Domain haben, können Sie entweder test oder localhost (mysite.localhost) verwenden. test wird in Browsern nicht gesondert behandelt, localhost jedoch schon: Chrome und Edge unterstützen http://<name>.localhost standardmäßig und funktionieren bei localhost sicher. Probieren Sie es aus: Führen Sie eine beliebige Website auf localhost aus und greifen Sie in Chrome oder Edge auf http://<whatever name you like>.localhost:<your port> zu. Dies könnte bald auch in Firefox und Safari möglich sein. Dies ist möglich (mit Subdomains wie mysite.localhost), weil localhost nicht nur ein Hostname, sondern auch eine vollständige TLD wie com ist.

Weitere Informationen

Vielen Dank für die Beiträge und das Feedback an alle Prüfer – insbesondere an Ryan Sleevi, Filippo Valsorda, Milica Mihajlija, Rowan Merewood und Jake Archibald. 🙌

Hero-Image von @moses_lee auf Unsplash, bearbeitet