Hoe https correct instellen

Https is een must voor alle websites. Is dat bij jou nog niet het geval? Bij Level27 zijn Let's Encrypt certificaten gratis (https://level27.be/blog/lets-encrypt), omdat wij ervan overtuigd zijn dat elke website beveiligd moet worden op deze manier.

Maar om dit correct in te stellen, zijn er wel wat addertjes onder het gras. Wij helpen jou met een duidelijk stappenplan hoe je dit moet instellen.

DISCLAIMER: dit is een technisch artikel. Voor techneuten :)

Waarom HTTPS?

Https is een protocol dat http-verkeer gaat encrypteren. Hierdoor kan er niemand meeluisteren bij het uitwisselen van gevoelige informatie tussen de gebruikers en je website. Gevoelige informatie kan heel wat zaken omvatten zoals, bankgegevens, php session cookies, paswoorden, geheime informatie enz.

Ook als je denkt dat er geen gevoelige data uitgewisseld wordt tussen je site en je gebruikers is https van belang. Er kan altijd iemand meeluisteren als een bezoeker zijn bankgegevens ingeeft of iemand kan je sessie stelen wanneer je ingelogt bent als administrator op je website. Dit zou desastreuze gevolgen kunnen hebben voor je site en je bezoekers.

We raden aan alle onze klanten https aan. In een aantal makkelijke stappen kan jij al een beveiligde website hebben.

Stap 1: HTTPS aanvragen

De eerste stap die je moet doen is een certificaat aanvragen. Dat kan je via Let's Encrypt doen of op basis van een commercieel certificaat. Met beide types kunnen wij jou helpen.

Stap 2: Mixed content oplossen

Mixed content kan je snel opmerken aan de url van je site. Als er een groen slot verschijnt dan is de page secure. Is dit niet het geval dan is de pagina niet volledig beveiligd.

Vaak is de oorzaak mixed content. Dit wil zeggen dat niet alle inhoud op je site via https kan opgevraagd worden.

Hier zie je de security details via google chrome op een website die niet op en top veilig is. Er wordt vermeld dat er nog een aantal resources zijn die nog over http worden opgevraagd, in dit geval zijn het een aantal foto's en een Wordpress plugin.

Mixed content is niet goed als je gebruik wil maken van https en moet je dus oplossen. Hoe los je dit op? Dit is te zeer afhankelijk van het type website en CMS dat je gebruikt, maar verder in dit artikel kan je al wat info vinden hierover.

Stap 3: Redirect naar https

Als je site correct werkt op https, wil je ook nog dat ze automatisch doorverwijst naar https://, ook als je bezoekers niet expliciet naar de https-versie vragen.

Wat je eigenlijk wil is dat een adres als http://level27.be/blog automatisch veranderd wordt naar https://level27.be/blog. Om zoiets klaar te krijgen, wil je een HTTP-redirectcode 301 Moved Permanently sturen.

Vooraleer we overgaan naar hoe je dit kan doen leggen we nog kort uit hoe onze servers in elkaar zitten.

In het volgende voorbeeld is de website beschikbaar via Apache en is er Varnish aanwezig om voor wat caching te zorgen. Er komt een verzoek binnen op https via poort 443.Dit verzoek wordt doorverwezen naar poort 80 (http) waar varnish draait. Zo'n doorverwijzing noemen ze ook wel een proxy. Als de caching service zijn taak gedaan heeft gaat hij op zijn beurt proxyen naar poort 8080 waar de de webserver met PHP op draait.

In sommige gevallen kan het zijn dat deze componenten niet op dezelfde server staan of dat er nog een loadbalancer voorstaat. Dit kan belangrijk zijn als je wil weten van waar requesten mogen komen en op welke poort.

 Dit is wat wij voor je doen. Jij moet er enkel voor zorgen dat als er toch iemand via http (poort 80) naar je site surft hij geredirect wordt naar https (poort 443).

Redirect met .htaccess

Een van de eenvoudigste manieren om de redirect te doen, is dit in de .htaccess te zetten:

RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteRule (.*) https://%{HTTP_HOST}/$1 [L,R=301]

Hoe test je zoiets?

In je browser kan je dat best niet doen omdat er daar bestanden gecached worden. Testen kan je via een incognito-venster doen. Dit is net hetzelfde als een de normale browser, maar dan zonder dat er bestanden lokaal worden opgeslagen.

Een andere mogelijkheid is curl. Hiermee kan je de http headers opvragen van requesten. In het volgende scherm zie je dat er een redirect wordt gedaan van http://level27.be naar https://level27.be. Dit is dus in orde.

roaldlenaerts:~$ curl -I level27.be
HTTP/1.1 301 Moved Permanently
Location: https://level27.be/
Content-Type: text/html; charset=UTF-8
Content-Length: 0
Accept-Ranges: bytes
Date: Mon, 05 Dec 2016 14:05:57 GMT
Age: 180
Connection: keep-alive
X-Cache: HIT web09

Om het voorbeeld af te sluiten een request via curl naar de redirect die we net gekregen hebben. Hier kan je zien dat we een OK terugkrijgen.

roaldlenaerts:~$ curl -I https://level27.be
HTTP/1.1 200 OK
Date: Mon, 05 Dec 2016 14:07:00 GMT
Server: Apache
Cache-Control: max-age=7200, public
ETag: "c79a75b3868a6f88bb1a65c2298b3d16"
Vary: Accept-Encoding
Content-Type: text/html; charset=UTF-8
Age: 3724
X-Cache: HIT web09
Via: 1.1 vd3085.web09.level27.be

Gekende problemen

Not redirecting properly

Als je deze foutmelding krijgt, zit je website in een oneindige lus van redirects.

Veel voorkomend probleem, vaak omdat je website niet door heeft dat ze achter varnish (reverse proxy zit). Meestal heb je dit dan in je .htaccess gezet, want dit komt vaak terug in tutorials:

RewriteCond %{HTTPS} off
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Het probleem is hier dat er geen rekening gehouden wordt met de X-Forward-Proto header omdat je website niet weet dat hij zich achter een proxy bevindt. Die header zorgt ervoor dat er onthouden wordt via welke protocol de originele request is binnengekomen.

Gebruik dus zeker onze juiste htaccess-configuratie:

RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteRule (.*) https://%{HTTP_HOST}/$1 [L,R=301]

User generated content zit niet op https

CMS'en slaan de pagina's van je website op in de database. Intelligente CMS'en gebruiken voor links en afbeeldingen relatieve url's, maar dit gaat helaas al eens mis.

Zorg er daarom voor dat je CMS weet dat je op HTTPS moet werken. Bij Drupal doe je dit in settings.php:

$base_url = 'https://www.jouwsite.be';  // NO trailing slash!

Bij Wordpress kan je in de general settings de 'Wordpress address' en 'Site address' de url aanpassen zodat er altijd https voorstaat. Vaak is het zo dat dit niet voldoende is en zijn er plugins nodig om correct alles via https op te vragen.

Voor Magento kan je bij 'system -> configuration' naar 'general' gaan. Hier kan je bij 'Security' instellen om 'Use Secure URLs in Frontend' en 'Use Secure URLs in Admin' te gebruiken.

Conclusie

Het is inderdaad een uitdaging alles correct in te stellen. Maar onderschat het belang niet van correct ingestelde https! En als er vragen zijn, wij kunnen je altijd verder helpen.