„Was kostenlos ist, kann nichts taugen“ – und so stellt sich für viele Benutzer die Frage:
Ist Let’s Encrypt sicher?

Was ist Let’s Encrypt?

„Let’s Encrypt“ steht für „lasst uns verschlüsseln“ und ist eine Zertifizierungsstelle, die bereits Ende 2015 in Betrieb gegangen ist, seit 2016 auf reges Interesse stößt und sich rasch verbreitet. Bereits im März 2016 waren mehr als eine Million Zertifikate ausgestellt worden.

Schlug – je nach Hoster bzw. Zertifikatsanbieter – bisher ein einziges SSL-Zertifikat pro Jahr mit 100 Euro (und mehr) zu Buche, so bot Let’s Encrypt erstmals kostenlose Zertifikate an. Und das mit Erfolg: war die Beantragung und Einrichtung von SSL-Zertifikaten bis dahin relativ aufwendig, so dauert die Einrichtung einer HTTPS-Verschlüsselung auf einem Linux-Server mit Let’s Encrypt weniger als eine Minute.

Die Entwicklung kostenloser SSL-Zertifikate wurde durch Sponsoren wie die EFF (Electronic Frontier Foundation), Mozilla Foundation (Browser: Firefox), Google Chrome, Cisco Systems und Akamai möglich.

Let’s Encrypt nutzt ein RSA-Stammzertifikat, welches durch die Zertifizierungsstelle IdenTrust gegengezeichnet wird.

Ist Let’s Encrypt sicher?

Ja: Let’s Encrypt ist sicher und nicht unsicherer als andere, kostenpflichtige SSL-Zertifikate.

Dennoch hört man oft die Einschätzung: „Etwas, das kostenlos angeboten wird, kann unmöglich genauso sicher sein wie eine kostenpflichtige Lösung!“

Der Gedanke dahinter ist, dass kostenpflichtige Anbieter entsprechende Einnahmen generieren, um ihr Technik weiterzuentwickeln und kontinuierlich zu verbessern.

Hinzu kommt, dass manche Anbieter zusätzlich Sicherheitsbedenken schüren. Denn ein kostenloser Anbieter stellt per se eine Gefahr für das Geschäftsmodell der etablierten Unternehmen dar. Auch Hoster verkaufen ihren Hostingkunden SSL-Zertifikate. Mit Let’s Encrypt lässt sich allerdings nichts verdienen.

Wer beispielsweise beim Hoster Mittwald ein SSL-Zertifikat beantragen möchte, bekommt aktuell fünf verschiedene Lösungen angeboten. Deren Sicherheit wird mit den Stufen 1 bis 4 angegeben, wobei Stufe 4 die sicherste Stufe darstellt. Let’s Encrypt erhält dabei nur Stufe 1.

Auffällig ist auch, dass andere Hoster ihren Kunden das kostenlose Let’s Encrypt bereits seit mehr als einem Jahr angeboten hatten bevor Mittwald sich dazu entschloss, nachzuziehen. Zu diesem Konzept passt es, dass Let’s Encrypt nur für „Webvisitenkarten“ empfohlen wird. Dabei lässt sich das SSL-Zertifikat durchaus auch auf großen, umfangreichen und gut frequentierten Websites einsetzen.

Wie sicher ist Let’s Encrypt?

Ein kostenloses SSL-Zertifikat von Let’s Encrypt ist genauso sicher wie ein kostenpflichtiges Zertifikat und erfüllt denselben technischen Nutzen.

Sie sollten sich daher nicht von zuvor gezeigten „Vertrauensstufen“ verunsichern lassen.

Bezüglich der Sicherheit von SSL-Zertifikaten muss zwischen zwei unterschiedlichen sicherheitsrelevanten Eigenschaften unterschieden werden:

• das SSL-Zertifikat
• die Zertifizierungsstelle.

Die SSL-Zertifikate dienen zur Authentifizierung zwischen Benutzer-Browser und Webserver. Sie sorgen dafür, dass Webserver und Browser die korrekten öffentlichen und privaten Schlüssel erhalten, um eine verschlüsselte Verbindung aufzubauen.

Damit die Verschlüsselung zustande kommt, sind entsprechende Zertifikate erforderlich, die von der Zertifizierungsstelle bereitgestellt werden. Sind Root-Zertifikat und alle anderen vorgeschalteten Zertifikate gültig, so kommt die verschlüsselte Verbindung zustande.

Während die SSL-Zertifikate von kostenlosen Anbietern sich nicht grundlegend von denen kostenpflichtiger Anbieter unterscheiden, gibt es Unterschiede bei den Zertifizierungsstellen (= CA = Certification Authority).

Ist die Zertifizierungsstelle eines gewinnorientierten Unternehmens zuverlässiger als die eines kostenlosen Anbieters? Was bedeutet es, wenn hinter Let’s Encrypt Unternehmen wie Chrome, Cisco, Mozilla oder Linux stehen – und sei es auch nur als Sponsoren?

Hier muss jeder Webseitenbetreiber für sich selbst entscheiden, welcher Zertifizierungsstelle er mehr Vertrauen entgegenbringt und wie viel er sich ein (gegebenenfalls) höheres Vertrauen kosten lässt.

Warum sollte ich meine Webseite mit Let’s Encrypt verschlüsseln?

Webseite mit Let’s Encrypt oder einem anderen Anbieter verschlüsseln

Die Let’s Encrypt-Initiative hat sich zum Ziel gesetzt, verschlüsselte Kommunikation im Internet zu einem Grundrecht zu machen. Dank finanzkräftiger Sponsoren ist dies kein Hirngespinst, sondern ein durchaus machbares Vorhaben.

SSL-Zertifikate machen einen Internetauftritt sicherer. Durch die Verschlüsselung wird die Echtheit des angesteuerten Servers bestätigt und die Kommunikation zwischen Server und Client (also dem Benutzer-Browser) verschlüsselt. Das verhindert, das unbefugte Dritte die Datenkommunikation auf dem Weg vom Server zum Client (oder zurück) auslesen.

Während SSL-Verschlüsselung früher hauptsächlich in sensiblen Bereichen wie dem Online-Banking oder Online-Shops eingesetzt wurde, steht sie nun ohne Zusatzkosten für jeden Webseitenbetreiber kostenlos zur Verfügung.

Sie zu nutzen bringt eine Reihe von Vorteilen:

1. Psychologischer Effekt: nicht unterschätzt werden sollte der psychologische Effekt eines (grünen) Schlosses. Der Besucher assoziiert das mit einer gut gesicherten, modernen Webseite.
2. Seit dem HTTP/2-Standard laufen verschlüsselte Seiten deutlich schneller als unverschlüsselte Seiten sofern SPDY installiert ist. Denn durch Maßnahmen wie Multiplexing und Datenkompression lässt sich die Datenübertragung optimieren.
3. Google hat bereits vor einigen Jahren bekannt gegeben, dass SSL-Verschlüsselung ein Ranking-Kriterium ist. Verschlüsselte Webseiten erhalten gegenüber unverschlüsselten Websites einen Bonus.
4. Browser weisen auf unsichere Webseiten hin, insbesondere auf Inhaltsseiten mit Formularen. Damit verunsichern sie die Besucher. Umgekehrt sorgt eine sichere SSL-Verbindung für einen Vertrauensbonus.
5. Google hat bekannt gegeben, dass der hauseigene Browser Chrome ab Juli 2018 unsichere Webseiten deutlich markiert und auf diesem Wege sozusagen „abstraft.“
6. Die Datenschutzgrundverordnung (DSGVO) tritt am 25.05.2018 in Kraft. Sie verpflichtet Webseitenbetreiber zwar nicht per se zur Nutzung einer sicheren SSL-Verschlüsselung. Werden auf Inhaltsseiten jedoch sensible oder persönliche Daten abgefragt – dazu reicht bereits ein Kontaktformular – so ist auch eine HTTPS-Verschlüsselung dieser Inhaltsseiten erforderlich.

Sie mögen unseren Beitrag Ist Let’s Encrypt sicher? und möchten ihn weiterempfehlen? Dann dürfen Sie ihn gerne über Social-Media-Kanäle wie Facebook teilen. Nutzen Sie dafür einfach den entsprechenden Button unterhalb dieses Beitrags oder in der linken Leiste.

Stichworte: Ist Let’s Encrypt sicher?, Wie sicher ist Let’s Encrypt?

Der Beitrag Ist Let’s Encrypt sicher? erschien zuerst auf Webdesign Tipps / Webdesign Blog.

Die Bevormundung durch moderne Browser ist nicht neu, doch ab Juli 2018 gilt: Google bestraft unsichere Webseiten.

Seit einiger Zeit warnen Browser wie der Firefox, Chrome, Safari oder der Internet Explorer vor unsicheren Webseiten ohne HTTPS-Verschlüsselung und verunsichern die Benutzer. Was früher hauptsächlich in sensiblen Bereichen wie dem Online-Banking oder Webshops zum Einsatz kam, soll nun auch von jeder x-beliebigen Website erfüllt werden. Und zwar eine sichere SSL- bzw. TLS-Verschlüsselung.

Es stellt sich die Frage, ob jede Website eine Verschlüsselung benötigt. Wer keine sensiblen Informationen bereitstellt oder abfragt, wer nicht einmal ein Kontaktformular einsetzt, benötigt eigentlich auch nicht unbedingt eine HTTPS-Website. Wenn da nur nicht das fehlende grüne Schloss wäre…

Immer mehr Webseiten sind SSL-verschlüsselt

Der Druck, den die Anbieter der Webbrowser ausüben, ist das eine. Ein weiterer Aspekt ist, dass Google verschlüsselten Websites beim Ranking einen Vorteil einräumt. Ein entscheidendes Argument für viele Webseitenbetreiber, die eigene Website mit SSL-Verschlüsselung auszustatten. Was früher locker um die 100 Euro jährlich gekostet hat, gibt es Dank kostenloser Anbieter wie Let’s Encrypt mittlerweile zum Nulltarif. Nach der Umstellung auf HTTS warnt der Browser ggf. noch vor unsicheren Elementen – aber auch das lässt sich in den Griff bekommen.

Google hat zu diesem Thema interessante Zahlen veröffentlicht:

1. 81 der 100 größten Webseiten im Internet setzen aktuell bereits auf sichere HTTPS-Verschlüsselung. Was aber im Umkehrschluss doch bedeutet, dass immerhin fast 20% der größten Websites noch immer darauf verzichten.
2. Mehr als 68 Prozent aller Verbindungen, die via Android und Windows zustande kommen, sind verschlüsselt.
3. Und sogar mehr als 78 Prozent alle Verbindung, die Mittels Chrome OS und Mac OS zustanden kommen, sind verschlüsselt.

Google bestraft unsichere Webseiten

Doch das scheint Google nicht auszureichen. Daher ist geplant, dass der hauseigene Browser Chrome mit Version 68 (voraussichtlich ab Juli 2018) weiteren Druck auf die Webseitenbetreiber ausüben wird.

Aktuell ist es so, dass der Google Browser Chrome bei unsicherer Verbindung nur dann warnt, wenn auf der Inhaltsseite sensible Daten einzugeben sind – beispielsweise Kontaktinformationen in einem Kontaktformular oder Passwörter.

Ab Juli 2018 soll generell eine Kennzeichnung der unsicheren Verbindung in der Browserzeile direkt vor der URL eingeblendet werden. Nutzt die Website hingegen HTTPS, so erscheint dort ein grünes Schluss und das Wort „Sicher.“

Besteht Handlungbedarf?

Einfache Frage, klare Antwort: Ja.
Es spielt keine Rolle, ob sich der eine oder andere durch das robuste Vorgehen der Browser-Anbieter sowie Google bevormundet fühlt. Google bestraft unsichere Webseiten und „sitzt am längeren Hebel.“ Wer von einem guten Google-Ranking profitieren und sicherstellen möchte, dass die Besucher nicht verunsichert werden und das eigene Webportal meiden, der muss mitspielen.

Mit der neuen Offensive lässt Google kein Zweifel daran, dass dem Unternehmen verschlüsselte Verbindungen wichtig sind. Nachstehend beschreiben wir wie Sie vorgehen müssen, um Ihre Website erfolgreich und ohne Rankingverluste auf das Hypertext Transfer Protocol (= HTTPS) umzustellen.

Mit diesem Protokoll wird der Datenaustausch zwischen dem Webserver und dem Rechner des Internetbenutzers verschlüsselt und vor unbefugtem Auslesen durch Dritte (= „Man-in-the-middle“) geschützt.

Wie stelle ich meine Website auf HTTPS um?

Viele Hoster bieten eine schnelle und kostenlose Umstellung auf HTTPS an. Dazu muss lediglich mit wenigen Klicks ein Zertifikat wie beispielsweise Let’s Encrypt eingebunden werden.

Umstellung von HTTP auf HTTPS

Danach ist es erforderlich, die „alten“ URLs (http://) über einen Eintrag in der .htaccess-Datei auf die „neuen“ URLs (https://) umzuleiten, um Duplicate Content zu vermeiden:

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

Der erforderliche Eintrag kann sich – je nach Hoster – ggf. etwas unterscheiden. Sollte vorstehender Eintrag nicht funktionieren, so erkundigen Sie sich bei Ihrem Hoster nach der korrekten RewriteCond sowie RewriteRule.

Umstellung der Weiterleitungen und Verlinkungen

Sollten Weiterleitungen oder Canonical-Tags eingerichtet sein, so sollten diese auf https angepasst werden. Interne Verlinkungen (= Inlinks) sind ebenfalls anzupassen, sofern das CMS-System nicht mit relativen URLs arbeitet. TYPO3 verwendet beispielsweise relative Pfadangaben, so dass keine Anpassungen bei den Inlinks erforderlich sind. Wohingegen Systeme wie WordPress die absolute URL (inklusive http://) in der Datenbank verewigt – und das in der Regel an hunderten von Stellen.

Bei externen Verlinkungen (= Backlinks) zur eigenen Website wird es schon schwieriger. Insbesondere wenn diese „organisch gewachsen“ sind und kein direkter Kontakt zum anderen Webseitenbetreiber besteht. Sofern möglich sollten aber auch hier die verlinkenden URLs angepasst werden.

Anpassung der XML Sitemap und der robots.txt-Datei

Gibt es eine XML Sitemap, so sollten Sie dort ebenfalls die Struktur anpassen und auf https:// ändern. Überprüfen Sie sicherheitshalber auch die robots.txt-Datei. Diese sollte über https:// aufrufbar sein und darin sollten sich keine Anweisungen befinden, welche den HTTPS-Zugriff auf die Website unterbinden.

Hat Ihnen dieser Beitrag gefallen? Dann dürfen Sie ihn gerne über Social-Media-Kanäle wie Facebook teilen. Nutzen Sie dafür einfach den entsprechenden Button unterhalb dieses Beitrags oder in der linken Leiste.

Stichworte: Google bestraft unsichere Webseiten, Chrome bestraft unsichere Webseiten

Der Beitrag Google bestraft unsichere Webseiten erschien zuerst auf Webdesign Tipps / Webdesign Blog.

Mobile Menü ohne JavaScript / Mobile CSS Menu: Ein Mobiles Menü mit CSS zu erstellen ist gar nicht so schwer. Trotzdem verwendet das Gros der Websites umfangreiche und komplexe JavaScript-Lösungen, welche meist auf der jquery basieren.

Es gibt jedoch gute Gründe, ein schlankes Mobile Menü ohne JavaScript einzusetzen:

1. Mobiles CSS-Menüs funktionieren auch dann, wenn JavaScript abgeschaltet ist.
2. Mobile First: Moderne Websites werden vom Mobilgerät aus entwickelt. Mobile First ist dabei weitaus mehr als nur ein „Schlagwort“, denn bereits im Oktober 2016 hatte Google angekündigt, dass der Mobile Index den Desktop Index als Hauptindex ablösen wird. Das bedeutet, dass Google künftig nicht mehr prüft, ob es zur Desktop-Version einer Website auch eine Mobile Version gibt, sondern Google geht den umgekehrten Weg. Die neue Priorisierung sorgt dafür, dass Webentwickler künftig noch stärker auf eine Optimierung der mobilen Webseitenversion achten sollten.Da die mobilen Internetverbindungen in der Regel deutlich langsamer sind als schnelle DSL-Verbindungen und die Benutzer zudem nur über ein begrenztes monatliches Datenvolumen verfügen, sind schlanke, schnell ladende Website gefragt und im Vorteil. Denn das wird von Suchmaschinen honoriert:
3. Suchmaschinenoptimierung:
   Suchmaschinen möchten dem Suchenden relevante Suchergebnisse bereitstellen. Dazu werden nicht nur die Seiteninhalte geprüft, sondern auch die Ladezeiten. Websites, deren Inhaltsseiten nur einige hundert Kilobyte aufweisen sind daher gegenüber solchen im Vorteil, die mehrere Megabyte Datenvolumen im Gepäck haben.

Mobile Menü ohne JavaScript

Mobile CSS Menu: Nachfolgend stellen wir eine Anleitung für die Realisation eines schlanken Mobilen CSS-Menüs vor.

Wie lässt sich das Design unseres Beispiels umsetzen? Dafür benötigen wir etwas HTML und natürlich entsprechendes CSS:

HTML (Body)

<body>
  <nav>
    <div class="brand"><a href="https://a-vista-studios.de"><img src="logo_avs.png" alt=""/></a></div>
    <a href="#nav-m" id="nav-m"><img src="btn-mobile.png" alt=""/></a>
    <a href="#" class="close"><img src="btn-mobile-close.png" alt=""/></a>
    
    <ul class="menu">
      <li><a href="#abschnitt1">Abschnitt 1</a></li>
      <li><a href="#abschnitt2">Abschnitt 2</a></li>
      <li><a href="#abschnitt3">Abschnitt 3</a></li>
      <li><a href="#abschnitt4">Abschnitt 4</a></li>
      <li><a href="#abschnitt5">Abschnitt 5</a></li>
    </ul>
  </nav>

  <main>
    <div id="abschnitt1">
      <strong>Abschnitt 1</strong><br />
        BLINDTEXT          
    </div>
    <div id="abschnitt2">
      <br />
      <strong>Abschnitt 2</strong><br />
      BLINDTEXT   
    </div>      
    <div id="abschnitt3">
      <br />
      BLINDTEXT   
    </div>      
    <div id="abschnitt4">
      <br />
      <strong>Abschnitt 4</strong><br />
      BLINDTEXT > 
    </div>      
    <div id="abschnitt5">
      <br />
      <strong>Abschnitt 5</strong><br />
        BLINDTEXT   
    </div>             
  </main>

</body>

CSS: Allgemeine Auszeichnungen und Logo

/*----- General Formating -----*/
body, html {
  font-family: Verdana, Arial, sans-serif;
  font-size: 0.95em;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

a:active, a:focus {outline: none;}

main {
  margin: 3em 1em;
  line-height: 180%;
}
/*------------------------------*/


/*----- Logo -----*/
.brand {
  float: left;
  padding: 0.5em 1em 0 0.5em;
}
/*----------------*/

CSS: Menü

/*----- Menu -----*/

nav {
  margin: 0 auto;
  width: 100%;
  height: 11em;
  text-align: right;
  position: relative;
  background: rgba(255, 255, 255, 1.0);
  border-bottom: 1px solid white;
}

nav ul {
  margin: 0;
  padding: 8.1em 0 0 0;
  height: 100vh;
}

nav ul li {
  list-style: none;
  margin: 0;
  display: inline;
}

nav ul li a {
  color: #009999;
  position: relative;
  padding: 0 0 0.5em 0;
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
}

nav ul.menu li a:hover {
  color: #03405f;
  border-bottom: 2px solid #03405f;
}
/*----------------*/

CSS: Media Queries

/*----- Media Queries -----*/
@media screen and (min-width: 961px) {
  nav ul.menu {
    max-height: 20px;
  }
  nav a#nav-m,
  nav a.close {
    display: none;
  }
  nav ul li {
    margin: 0 30px 0 0;
  }
}


@media screen and (max-width: 960px) {
  /*Formatierung Mobiles Menue*/
  nav ul {
    top: 12em;
    position: absolute;
    background: #ccc;
    width: 100%;
    left: -100%;

    list-style-type:none;
    margin: 0;
    padding: 0;

    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
  }

  nav ul li{
    display: block;
    text-align: left;
    padding: 0em 0.5em;
    border-bottom: 1px solid #fff;
  }

  nav ul li a {
    color: #555;
    padding: 1em 0;
  }

  nav ul.menu li a:hover {
    border-bottom: 0;
  }

  /*Hamburger-Icon*/
  nav a#nav-m img,
  nav a.close img {
    width: 40px;
    height: auto;
  }

  nav > .close,
  nav a#nav-m:target {
    display: none;
  }

  nav a:target ~ ul,
  nav a:target ~ .close {
    display: inline-block;
  }

  nav a:target ~ .close {
    position: absolute;
    margin-left: -40px;
  }

  nav a:target ~ ul {
    left: 0;
  }
}
/*--------------------------------------*/

Erläuterung des CSS für die Erstellung des Mobile CSS Menu

Der größte Teil des Codes ist nicht besonders komplex und der HTML-Bereich dabei besonders einfach gehalten. Im Bereich CSS: Allgemeine Auszeichnungen und Logo wird zunächst die Schriftart sowie Höhe und Breite des Anzeigebereichs festgelegt und definiert, dass beim Focus auf einen Link keine gestrichelten Linien angezeigt werden sollen.

Der Bereich CSS: Menü definiert ein einfaches Navigationsmenü für die Anzeige auf dem Desktop-PC. Es wird über eine UL-Liste erstellt und enthält einige Angaben zur Formatierung des Menüs.

Spannend wird es im Bereich CSS: Media Queries.

1. Zunächst wird festgelegt, dass das Hamburger-Icon des mobilen Menüs nicht angezeigt werden soll, wenn die Bildschirmbreite mehr als 960 Pixel beträgt (@media screen and (min-width: 961px) {…} ).
2. Danach wird dem Browser mitgeteilt, wie das Menü gestaltet werden soll, wenn die Breite des Browserfensters kleiner oder gleich 960 Pixel ist (@media screen and (max-width: 960px) {…} ).
3. nav ul {…}
   Das Menü wird zunächst verborgen, indem es um 100% nach links versetzt wird. Zusätzlich definieren wir eine transition, um über CSS3 auch ohne JavaScript einen Animationseffekt zu verwirklichen.
4. nav ul li {…}
   Über display:block wird erreicht, dass die Menüpunkte des mobilen Menüs nicht mehr in einer Zeile, sondern untereinander angezeigt werden.

5. /*Hamburger-Icon*/

   
   Dieser Bereich ist für die Funktionalität des Hamburger-Menüs zuständig.
   Es gibt zwei Hamburger-Icons. Eins ist blau, das andere grau. Die beiden sind deckungsgleich übereinander positioniert. Wird das blaue Hamburger-Icon angeklickt und dabei das Menü ausgefahren, so wird gleichzeitig das graue Hamburger-Icon sichtbar gesetzt und erscheint an der Position des blauen Icons.

   Beim Klick auf das blaue Hamburger-Icon wird auf einen Anker referenziert (<a href=“#nav-m“…) und das blaue Hamburger-Icons wird ausgeblendet. Durch die Referenzierung lässt sich der Zustand über die CSS-Pseudoklasse :target prüfen.

   Gleichzeitig wird die UL des Menüs von left:-100%; auf left:0; gesetzt (mittels nav a:target ~ ul{left: 0;} ) und bewegt sich dadurch von der bisherigen linken Positionierung (außerhalb des sichtbaren Bereichs) in das Betrachtungsfeld.

   nav a#nav-m img, nav a.close img {…}
   Die Anzeigegröße des Hamburger-Menü-Icons wird festgelegt.

   nav > .close, nav a#nav-m:target {display: none;}
   Standardeinstellung ist, dass das graue Hamburger-Menü-Icon (nav > .close) nicht angezeigt wird. Über die CSS-Pseudoklasse :target wird dafür gesorgt, dass das blaue Hamburger-Menü-Icon verborgen wird, wenn es angeklickt wird und dabei den target erhält (a#nav-m:target).

   nav a:target ~ ul, nav a:target ~ .close {display: inline-block;}
   Wenn der Link aktiv ist (wird auch hier über die CSS-Peseudoklasse a:target geprüft), werden die Navigationsliste sowie das graue Hamburger-Menü-Icon auf sichtbar gesetzt.

Fazit: die Anleitung zur Erstellung eines Mobile Menü ohne JavaScript zeigt, dass sich auf relativ einfache Art ein Mobile CSS Menu realisieren lässt.

Stichworte: Mobile Menü ohne JavaScript, Mobile CSS Menu, Hamburger Menü

Der Beitrag Mobile Menü ohne JavaScript, Mobile CSS Menu erschien zuerst auf Webdesign Tipps / Webdesign Blog.

Einführung in die SSL-Verschlüsselung von Websites

Das „S“ in HTTPS steht für eine sichere („secure“) Verbindung. Dieses Übertragungsprotokoll sorgt für eine sichere End-to-End Verschlüsselung – meist mit 128-Bit-Schlüssel oder 256-Bit-Schlüssel. Die Daten lassen sich dadurch auf dem Weg vom oder zum Webserver nicht mehr von unbefugten Dritten (Man-in-the-middle) einsehen oder abgreifen.

Früher war der Einsatz von HTTPS-Verbindungen oft sensiblen Bereichen wie dem Online-Banking oder Web-Shops vorbehalten. Seit einiger Zeit setzt sich das sichere Übertragungsprotokoll zunehmend auch auf Webseiten durch, die nicht unbedingt eine Verschlüsselungstechnik benötigen.

Dafür gibt es verschiedene Gründe:

1. Viele Webseiten setzen unter anderem Formulare, beispielsweise Kontaktformulare, ein. Durch den Einsatz von HTTPS, wird die Übertragung der Anfrage verschlüsselt und damit sicher.
2. Neuere Browser warnen (und verunsichern) die Besucher vor nicht verschlüsselten Webseiten.
3. Früher waren entsprechende Zertifikate relativ teuer. Je nach Anbieter meist im Bereich von 60-100 Euro pro Jahr und Domain. Mittlerweile gibt es auch kostenlose SSL-Zertifikate, die eine hohe Sicherheit gewährleisten.
4. Google hat bereits 2014 mitgeteilt, dass die HTTPS-Verschlüsselung künftig ein SEO-Faktor sein wird. Webseiten mit HTTPS erhalten gegenüber unverschlüsselten Webseiten einen kleinen Bonus bei der Ranking-Bewertung.

Die Umstellung einer Website auf HTTPS lässt sich meist relativ einfach bewerkstelligen. Dafür muss ein SSL-Zertifikat bezogen und eingebunden werden. Anschließend ist die Domain auf https:// umzustellen.

Umstellung auf HTTPS in TYPO3 und WordPress

Bei TYPO3 wird die Umstellung auf https:// zentral in TypoScript durchgeführt. Die Anpassung der BASE ist eine Sache von wenigen Sekunden und ab TYPO3 in Version 7.x ist beim Einsatz von config.absRefPrefix = / überhaupt keine Anpassung mehr erforderlich. Etwas anspruchsvoller gestaltet sich die Umstellung bei einigen anderen CMS-Systemen. So verewigt WordPress im Gegensatz zu TYPO3 in der Datenbank nicht die relativen Pfade, sondern die absoluten URLs. Für jeden Link wird die vollständige URL (inklusive http://www.) in der Datenbank eingetragen. Je nach Größe der Webseite in der Regel gleich an mehreren hundert Stellen. Mit entsprechenden Plugins wie Search & Replace lässt sich die Datenbank durchsuchen und die URLs lassen sich anpassen.

Nach der Umstellung ist das Webportal samt aller Inhaltsseiten vollständig zu prüfen. Ist eine Inhaltsseite sicher, so zeigen das die Browser durch ein entsprechendes grünes Schloss neben der URL-Zeile.

Was sind unsichere Elemente auf HTTPS-Seiten?

Ausgehende Verlinkungen auf unsichere Webseiten stellen kein Problem dar. Durch einen ausgehenden Link auf eine unsichere Website wie http://www.eine-andere-website.de wird die eigene Inhaltsseite nicht unsicher.

Unsichere Elemente sind (fast) immer Bilder oder Grafiken sowie gelegentlich ohne HTTPS eingebundendes JavaScript.

Wurden Bilder „hart“ über absolute URL-Pfade (d.h. inklusive http://www.) integriert, so reicht bereits ein einzige Bild, damit die gesamte Inhaltsseite als unsicher eingestuft wird. Unsicher kann es auch werden, wenn Codes von Drittanbietern – beispielsweise Werbung aus dem Amazon-Partnerprogramm – integriert sind. Denn dabei werden Bilder direkt über den Amazon-Link inklusive Image-Ressource bezogen. Bei älteren Codes steht dort ggf. noch

<img src= "http://www.amazon... " />

und schon ist die eigene Inhaltsseite unsicher.

Unsichere Elemente lassen sich jedoch recht einfach aufspüren

Unsichere HTTPS Seiten prüfen: Der Google Browser Chrome bietet über die Konsole die Möglichkeit, direkt nach unsicheren Elementen zu suche. Wer aus Gründen des Datenschutzes den Browser Chrome nicht einsetzen möchte, kann stattdessen Iron verwenden.

Nach dem Aufruf einer unsicheren Inhaltsseite wird links neben der URL auf das Dokument-Icon geklickt (1.) und danach auf Details (2.):

Daraufhin öffnet sich in der Konsole der Security-Tab mit weiteren Informationen. In nachstehender Abbildung ergibt die Prüfung, dass das SSL-Zertifikat gültig ist und die TLS-Verbindung sicher. Aber es ist „Mixed Content“ vorhanden, der die Sicherheit der Inhaltsseite verhindert.

Der Klick auf den Link „View requests in Network Panel“ öffnet ein weiteres Fenster mit der Aufforderung, die Seite neu zu laden. Beispielsweise durch Drücken der F5-Taste. Nach dem Reload erfolgt eine Anzeige der unsicheren Elemente. Im aktuellen Beispiel haben wir zur Visualisierung absichtlich unsichere Elemente eingebaut. Dazu wurde im CSS die Implementierung der beiden Galerie-Buttons für „voriges Bild“ / „nächstes Bild“ ohne HTTPS vorgenommen:

Über die Konsole von Chrome lassen sich diese unsicheren Elemente zuverlässig finden und schnell korrigieren.

Stichworte: Unsichere HTTPS Seiten prüfen

Der Beitrag Unsichere HTTPS Seiten prüfen, unsichere Elemente aufspüren erschien zuerst auf Webdesign Tipps / Webdesign Blog.