Ihre Website-Umstellung auf HTTPS mit kleinem Budget

Avatar of Christopher Schmitt
Christopher Schmitt am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Das Search Console Team von Google hat kürzlich eine E-Mail an Website-Betreiber mit einer Warnung versendet, dass Google Chrome ab diesem Oktober Schritte unternehmen wird, um unsichere Websites mit Formularfeldern zu identifizieren und Warnungen anzuzeigen.

Hier ist die Benachrichtigung, die in meinem Posteingang landete

Die Benachrichtigung des Google Search Console Teams bezüglich HTTPS-Unterstützung

Wenn Ihre Website-URL HTTPS nicht unterstützt, sind Sie von dieser Benachrichtigung direkt betroffen. Selbst wenn Ihre Website keine Formulare hat, sollte die Umstellung auf HTTPS Priorität haben, da dies nur ein Schritt in Googles Strategie zur Identifizierung unsicherer Websites ist. Sie legen dies in ihrer Nachricht klar dar

Die neue Warnung ist Teil eines langfristigen Plans, alle über HTTP bereitgestellten Seiten als „nicht sicher“ zu kennzeichnen.

Aktuelle Chrome-Benutzeroberfläche für eine Website mit HTTP-Unterstützung und eine Website mit HTTPS

Das Problem ist, dass die Installation von SSL-Zertifikaten und die Umstellung von Website-URLs von HTTP auf HTTPS – ganz zu schweigen von der Bearbeitung all dieser Links und verknüpften Bilder im bestehenden Inhalt – wie eine entmutigende Aufgabe klingt. Wer hat Zeit und möchte Geld ausgeben, um eine persönliche Website dafür zu aktualisieren?

Ich verwende GitHub Pages, um kostenlos eine Reihe von Websites und Projekten zu hosten – einschließlich einiger, die benutzerdefinierte Domainnamen verwenden. Daher wollte ich sehen, ob ich eine Website schnell und kostengünstig von HTTP auf HTTPS umstellen könnte. Ich habe eine relativ einfache Lösung mit kleinem Budget gefunden, von der ich hoffe, dass sie anderen helfen wird. Lassen Sie uns das mal genauer betrachten.

HTTPS auf GitHub Pages erzwingen

Websites, die auf GitHub Pages gehostet werden, haben eine einfache Einstellung, um HTTPS zu aktivieren. Navigieren Sie zu den Einstellungen des Projekts und schalten Sie den Schalter um, um HTTPS zu erzwingen.

Die GitHub Pages-Einstellung zur Erzwingung von HTTPS für ein Projekt

Aber wir brauchen immer noch SSL

Sicher, der erste Schritt war ein Kinderspiel, aber das ist nicht das ganze Bild dessen, was wir tun müssen, um Googles Definition einer sicheren Website zu erfüllen. Der Grund dafür ist, dass die Aktivierung der HTTPS-Einstellung weder ein Secure Sockets Layer (SSL) Zertifikat bereitstellt noch installiert für eine Website, die eine benutzerdefinierte Domain verwendet. Websites, die die von GitHub Pages bereitgestellte Standard-Webadresse verwenden, sind mit dieser Einstellung vollständig sicher, aber diejenigen von uns, die eine benutzerdefinierte Domain verwenden, müssen den zusätzlichen Schritt unternehmen, SSL auf Domain-Ebene zu sichern.

Das ist ein Nachteil, denn SSL ist zwar nicht super teuer, aber es sind zusätzliche Kosten, die man wahrscheinlich nicht auf sich nehmen möchte, wenn man versucht, die Kosten niedrig zu halten. Ich wollte einen Weg finden, das zu umgehen.

Wir können SSL von einem CDN bekommen ... kostenlos!

Hier kommt Cloudflare ins Spiel. Cloudflare ist ein Content Delivery Network (CDN), das auch verteilte Domain Name Server-Dienste anbietet. Das bedeutet, wir können ihr Netzwerk nutzen, um HTTPS einzurichten. Der eigentliche Clou ist, dass sie einen kostenlosen Plan haben, der all dies ermöglicht.

Es ist erwähnenswert, dass es hier auf CSS-Tricks eine Reihe guter Beiträge gibt, die die Vorteile eines CDN preisen. Während wir uns in diesem Beitrag auf die Sicherheitsvorteile konzentrieren, sind CDNs eine ausgezeichnete Möglichkeit, die Serverlast zu reduzieren und die Leistung zu steigern.

Von nun an werde ich Sie durch die Schritte führen, die ich verwendet habe, um Cloudflare mit GitHub Pages zu verbinden. Wenn Sie also noch keinen kostenlosen Account haben, schnappen Sie sich einen und folgen Sie mir.

Schritt 1: Wählen Sie die Option „+ Website hinzufügen“

Zuerst müssen wir Cloudflare mitteilen, dass unsere Domain existiert. Cloudflare scannt die DNS-Einträge, um zu überprüfen, ob die Domain existiert und ob die öffentlichen Informationen über die Domain zugänglich sind.

Cloudflares „Website hinzufügen“-Einstellung

Schritt 2: DNS-Einträge überprüfen

Nachdem Cloudflare die DNS-Einträge gescannt hat, gibt es diese aus und zeigt sie zur Überprüfung an. Cloudflare zeigt an, dass die Dinge in Ordnung sind, mit einer orangefarbenen Wolke in der Statusspalte. Überprüfen Sie den Bericht und bestätigen Sie, dass die Einträge mit denen Ihres Registrars übereinstimmen. Wenn alles in Ordnung ist, klicken Sie auf „Weiter“, um fortzufahren.

Der DNS-Eintragbericht in Cloudflare

Schritt 3: Den kostenlosen Plan erhalten

Cloudflare wird Sie fragen, welches Serviceniveau Sie nutzen möchten. Siehe da! Es gibt eine kostenlose Option, die wir auswählen können.

Cloudflares kostenlose Planoption

Schritt 4: Die Nameserver aktualisieren

An dieser Stelle stellt uns Cloudflare seine Serveradressen zur Verfügung und unsere Aufgabe ist es, zu dem Registrar zu gehen, bei dem die Domain gekauft wurde, und diese Adressen in die DNS-Einstellungen einzufügen.

Cloudflare stellt die Nameserver für die Aktualisierung der Registranten-Einstellungen bereit.

Das ist nicht übermäßig schwierig, kann aber ein wenig beunruhigend sein. Ihr Registrant hat wahrscheinlich Anweisungen, wie das geht. Zum Beispiel gibt es hier die Anweisungen von GoDaddy zum Aktualisieren von Nameservern für Domains, die über ihren Dienst registriert wurden.

Sobald Sie diesen Schritt ausgeführt haben, wird Ihre Domain effektiv auf die Server von Cloudflare abgebildet, die als Vermittler zwischen der Domain und GitHub Pages fungieren. Es ist jedoch eine Geduldsprobe, und es kann bis zu 24 Stunden dauern, bis Cloudflare die Anfrage verarbeitet.

Wenn Sie GitHub Pages mit einer Subdomain anstelle einer benutzerdefinierten Domain verwenden, müssen Sie einen zusätzlichen Schritt ausführen. Gehen Sie zu Ihren GitHub Pages-Einstellungen und fügen Sie einen CNAME-Eintrag in den DNS-Einstellungen hinzu. Stellen Sie ihn so ein, dass er auf <ihr-benutzername>.github.io zeigt, wobei <ihr-benutzername> natürlich Ihr GitHub-Kontoname ist. Oh, und Sie müssen eine CNAME-Textdatei zum Stammverzeichnis Ihres GitHub-Projekts hinzufügen, die buchstäblich eine Textdatei namens CNAME mit Ihrem Domainnamen darin ist.

Hier ist ein Screenshot mit einem Beispiel für das Hinzufügen einer GitHub Pages-Subdomain als CNAME-Eintrag in den Cloudflare-Einstellungen

Hinzufügen einer GitHub Pages-Subdomain zu Cloudflare

Schritt 5: HTTPS in Cloudflare aktivieren

Sicher, das haben wir technisch gesehen bereits in GitHub Pages erledigt, aber wir müssen es auch in Cloudflare tun. Cloudflare nennt diese Funktion „Crypto“ und sie erzwingt nicht nur HTTPS, sondern stellt auch das SSL-Zertifikat bereit, das wir die ganze Zeit wollten. Aber dazu kommen wir gleich. Aktivieren Sie vorerst Crypto für HTTPS.

Die Crypto-Option im Hauptmenü von Cloudflare

Schalten Sie die Option „Immer HTTPS verwenden“ ein

HTTPS in den Cloudflare-Einstellungen aktivieren

Nun wird jede HTTP-Anfrage von einem Browser auf das sicherere HTTPS umgeschaltet. Wir sind wieder einen Schritt näher daran, Google Chrome zufriedenzustellen.

Schritt 6: Das CDN nutzen

Hey, wir nutzen ein CDN, um SSL zu erhalten, also sollten wir auch seine Leistungssteigerung nutzen. Wir können die Leistung verbessern, indem wir Dateien automatisch reduzieren und die Gültigkeitsdauer des Browser-Caches verlängern.

Wählen Sie die Option „Geschwindigkeit“ in den Einstellungen und lassen Sie Cloudflare unsere Website-Assets automatisch minimieren

Cloudflare die Minifizierung der Website-Assets erlauben

Wir können auch die Gültigkeitsdauer des Browser-Caches festlegen, um die Leistung zu maximieren

Den Browser-Cache in den Cloudflare-Geschwindigkeitseinstellungen festlegen

Durch die Verlängerung des Ablaufdatums über die Standardoption hinaus wird der Browser davon abgehalten, bei jedem Besuch nach Website-Ressourcen zu fragen – das heißt, nach Ressourcen, die höchstwahrscheinlich nicht geändert oder aktualisiert wurden. Dies erspart den Besuchern bei wiederholten Besuchen innerhalb eines Monats einen zusätzlichen Download.

Schritt 7: Externe Ressourcen sicher machen

Wenn Sie externe Ressourcen auf Ihrer Website verwenden (und das tun viele von uns), dann müssen diese ebenfalls sicher ausgeliefert werden. Wenn Sie beispielsweise ein Javascript-Framework verwenden und es nicht über eine HTTP-Quelle geliefert wird, bläst das unsere sichere Abdeckung aus Sicht von Google Chrome weg und wir müssen das beheben.

Wenn die von Ihnen verwendete externe Ressource HTTPS nicht als Quelle anbietet, sollten Sie in Erwägung ziehen, sie selbst zu hosten. Wir haben jetzt ein CDN, das die Belastung der Bereitstellung zu keinem Problem macht.

Schritt 8: SSL aktivieren

Juhu, da sind wir! SSL war das fehlende Glied zwischen unserer benutzerdefinierten Domain und GitHub Pages, seit wir HTTPS in der GitHub Pages-Einstellung aktiviert haben, und hier haben wir die Möglichkeit, ein kostenloses SSL-Zertifikat für unsere Website zu aktivieren, dank Cloudflare.

Stellen wir aus den Crypto-Einstellungen in Cloudflare zunächst sicher, dass das SSL-Zertifikat aktiv ist

Cloudflare zeigt ein aktives SSL-Zertifikat in den Crypto-Einstellungen an

Wenn das Zertifikat aktiv ist, wechseln Sie zu „Seitenregeln“ im Hauptmenü und wählen Sie die Option „Seitenregel erstellen“

Eine Seitenregel in den Cloudflare-Einstellungen erstellen

…dann klicken Sie auf „Einstellung hinzufügen“ und wählen Sie die Option „Immer HTTPS verwenden“

HTTPS für die gesamte Domain erzwingen! Beachten Sie die Sternchen in der Formatierung, die entscheidend sind.

Klicken Sie danach auf „Speichern und Bereitstellen“ und feiern Sie! Wir haben jetzt eine vollständig sichere Website in den Augen von Google Chrome und mussten nicht viel Code anfassen oder viel Geld ausgeben, um das zu erreichen.

Fazit

Googles Vorstoß für HTTPS bedeutet, dass Frontend-Entwickler SSL-Unterstützung mehr denn je priorisieren müssen, sei es für unsere eigenen Websites, Unternehmenswebsites oder Kundenwebsites. Dieser Schritt gibt uns einen weiteren Anreiz, den Schritt zu machen, und die Tatsache, dass wir über die Nutzung eines CDN kostenlose SSL- und Leistungsverbesserungen erhalten können, macht es umso lohnenswerter.

Haben Sie über Ihre Erfahrungen bei der Umstellung auf HTTPS geschrieben? Lassen Sie es mich in den Kommentaren wissen, damit wir Erfahrungen austauschen können. Genießen Sie in der Zwischenzeit eine sichere und schnelle Website!