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.
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
✨ 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
oderSameSite:none
ist oder das Präfix__Host
hat.Secure
-Cookies werden nur bei HTTPS gesetzt, aber nicht beihttp://localhost
für alle Browser. Da das Cookie fürSameSite:none
und__Host
ebenfallsSecure
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: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
oderlocalhost
(mysite.localhost
) verwenden.test
wird in Browsern nicht gesondert behandelt,localhost
jedoch schon: Chrome und Edge unterstützenhttp://<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 aufhttp://<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 wiemysite.localhost
), weillocalhost
nicht nur ein Hostname, sondern auch eine vollständige TLD wiecom
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