Hoe installeer je gratis SSL op WordPress met CloudFlare

Leestijd: 13 minuten

Hoe installeer je gratis SSL op WordPress met CloudFlareDeze handleiding laat ik stap voor stap zien hoe je jouw WordPress website kun beveiligen met HTTPS, en hoe je in je browser het felbegeerde groene slotje voor je site URL krijgt, met een gratis SSL certificaat van CloudFlare. Ook laat ik zien hoe je deze stappen weer kunt terugdraaien wanneer je het opzetten van een HTTPS beveiligde site niet goed werkend krijgt.

Google heeft in 2014 aangegeven het internet veiliger te willen maken, en wilt het liefst zien dat alle websites waar zij bezoekers vanuit de zoekmachine naartoe sturen zo veilig mogelijk zijn. De beste manier hiervoor is dat elke website een beveiligingslaag gebruikt om het website verkeer te beschermen.

De beveiligingsmethode die Google promoot heet HTTPS, wat betekent dat het normale verkeer dat gebruik maakt van het HTTP protocol (het protocol dat de communicatie regelt tussen de server en de browser van de bezoeker) wordt beschermd door het SSL beveiligingsprotocol.

Wanneer je site HTTPS gebruikt kunnen bezoeker dit zien aan het begin van de adresbalk van hun browser.

Gebruik je géén HTTPS voor je site, dan ziet de adresbalk voor jouw site er in Google Chrome zo uit:

Website adres in adresbalk zonder SSL

Klik je op het document icoontje voor de naam, dan verschijnt er een uitleg dat je verbinding met de site niet versleuteld is:

Website adres in adresbalk zonder SSL met uitleg

Gebruik je wel HTTPS voor je site, dan is de term https groen gekleurd en staat er een groen slot aan het begin van de balk:

Website adres in adresbalk met SSL

Klik je op het groene slotje voor de naam, dan zie je dat verschijnt er een uitleg dat je verbinding met de site is versleuteld (privé):

Website adres in adresbalk met SSL met uitleg

Google vindt het veiliger maken van het internetverkeer zo belangrijk dat ze websites die gebruik maken van het HTTPS protocol wat extra gewicht geven in de beoordeling van hun plaatsing in de zoekresultaten.

Met het toevoegen van een beveiligingsprotocol aan je dataverkeer maak je jouw site veiliger voor je bezoekers, en je geeft de plaats van je site in de zoekmachines een kleine duw.

Wat is SSL

SSL staat voor Secure Socket Layer protocol, en is een technologie die het verkeer tussen jouw server en de browser van je bezoeker versleutelt. Alle data blijft op die manier privé. SSL wordt vooral veel gebruikt door webshops om al het betalingsverkeer te versleutelen.

Het SSL protocol is opgevolgd door het veiliger TLS (Transport Layer Security) protocol. De namen worden door elkaar gebruikt, maar bijna altijd wordt TLS bedoelt.

Bij SSL maak je gebruik van een SSL certificaat. Dit certificaat is een klein bestandje op de server met een versleutelde code. Het certificaat maakt duidelijk dat de server zegt wie hij is, en zorgt ervoor dat het dataverkeer tussen de server en de browser wordt versleuteld.

Dit certificaat kun je aanschaffen en installeren op je server. Veel websites staan echter op gedeelde servers, en sommige hostingbedrijven geven je de mogelijkheid om – vaak gratis – een gedeeld certificaat te gebruiken voor die gedeelde server.

Gratis SSL via CloudFlare

Ik heb mijn eigen sites beveiligd met SSL via CloudFlare.

CloudFlare is een bekende online dienst die – met een snel Content Delivery Network (CDN) en een strikte beveiliging – je website sneller en veiliger maakt. CloudFlare biedt verschillende betaalde diensten, maar ik maak hier gebruik van de gratis optie. Deze optie biedt onder meer een gratis SSL vorm aan.

Er zijn meerdere vormen van SSL bij CloudFlare. Voor de meest strikte vorm – Full SSL (strict) – heb je een eigen SSL certificaat nodig. Deze moet je installeren op je server. CloudFlare versleutelt dan het verkeer van jouw server (of de server van je host) naar CloudFlare en van CloudFlare naar de bezoeker van jouw site.

Bij de gratis versie van SSL bij CloudFlare, genaamd Flexible SSL, maak je gebruik van een gedeeld SSL certificaat, op naam van CloudFlare.

Flexible SLL versleutelt alleen het verkeer van de CloudFlare server naar de bezoeker en niét het verkeer tussen jouw server en de CloudFlare server. Het is geen volledige bescherming.

Hoe Flexible SSL van CloudFlare werkt

De bezoeker ziet toch alleen het verkeer vanaf CloudFlare en heeft geen direct contact met je server. Flexible SSL is daarom een goede optie voor de meeste websites. Heb je een online winkel, ga dan wel voor een eigen certificaat om de beveiliging optimaal te regelen.

Installeer SSL via CloudFlare voor jouw WordPress website

Deze procedure zorgt ervoor dat jouw website gebruik maakt van CloudFlare’s Flexible SLL beveiliging.

Een aantal stappen vereist dat je toegang hebt tot de server via FTP en tot de database die draait op deze server via phpMyAdmin. Ben je huiverig voor het uitvoeren van deze meer technische stappen, doe het dan niet zelf en neem een professional in de arm.

1. Maak een backup van je site en een aparte backup van de database

Voor je iets “groots” met je site doet raad ik aan om een volledige backup van je site te maken. Op die manier kun je altijd terug naar de oude situatie.

Zelf gebruik ik de gratis BackWPup plugin om backups te maken van mijn sites en de sites van mijn klanten. De plugin geeft je veel mogelijkheden voor het maken van een snelle backup of het maken van automatische backups; het terugzetten van een backup vergt wat meer technische kennis.

2. Maak een aparte backup van de MySQL database

Bijna alle belangrijke veranderingen aan de website gebeuren in de MySQL database van je WordPress site. Wil je bij problemen snel kunnen terugkeren naar de oude situatie, dan kun je de originele database terugzetten zonder dat je de backup van de hele site moet terugzetten.

Ik gebruik phpMyAdmin om een backup van de database te maken. Dit programma wordt door de meeste hostingbedrijven wordt gebruikt om MySQL databases te beheren.

  1. Log in op phpMyAdmin of ga naar phpMyAdmin via het controlepaneel van je host.

  2. Klik in de kleine linkerkolom op de databasenaam die bij jouw website hoort. Deze naam kun je eventueel terugvinden in het wp-config.php bestand in de root van je website folder op je server.Zie je alleen de accountnaam in de kolom met een plusje voor de naam, klik dan op het plusje om alle databases onder dat account te laten zien:

    Selecteer de juiste database in phpMyAdmin

    Onthoud de database prefix, deze heb je later nog nodig.

  3. Klik in de grote rechterkolom op tab Exporteren.

  4. Klik op de Starten button.

  5. Selecteer waar de database backup moet worden geplaatst. Kies voor je Bureaublad, zodat je de backup snel kunt terugvinden, en klik op Opslaan.

  6. De backup bestaat uit één bestand met extensie .sql: accountnaam_databasenaam.sql. Bewaar dit bestand tot je zeker bent dat alles goed werkt.

3. Maak een gratis account aan bij CloudFlare en voeg je domein toe

Heb je al een CloudFlare account, meld je dan aan en klik op de Add Site link in het menu.

Heb je nog geen CloudFlare account, maak dan als volgt een nieuw, gratis account aan:

  1. Ga naar de CloudFlare site en klik op de groene Sign up now! button. Deze brengt je naar het aanmeldformulier:

    CloudFlare's aanmeldformulier

  2. Vul het aanmeldformulier in en klik op de Create Account button. Dat opent het Get Started With CloudFlare scherm:

    CloudFlare’s Get Started With CloudFlare scherm

  3. Vul de domeinnaam van de site die je met SSL wilt beschermen in bij Add Your First Domain Name (als mijndomein.nl, dus geen http, https, of andere paden in de naam) en klik op de Begin Scan button:

    CloudFlare scant de DNS records van je domein

  4. Wanneer de scan is voltooid klik je op de Continue Setup button. De volgende pagina toont je een overzicht van alle DNS (domeinnaamserver) gegevens die de scan heeft gevonden voor jouw domein:

    CloudFlare's DNS overzicht

  5. In het DNS overzicht zie je in de statuskolom voor een aantal regels een grijze wolk staan. Dat betekent dat voor die regels alleen de DNS van CloudFlare aanstaat, en nog niet de CDN. Laat dat voor nu zo staan.

    Wanneer de hele ombouw naar https werkt, kun je ook voor die regels met een grijze wolk de CDN van CloudFlare aanzetten.

    Dit doe je door in te loggen op CloudFlare, je website te selecteren, op het DNS icoontje in het menu te klikken, en dan te klikken op de grijze wolken. De grijze wolk verandert dan in een oranje wolk:

    CloudFlare grijze en oranje wolk

    Werkt de site na zo’n verandering niet meer? Zet dan de regels die je hebt aangezet (even bijhouden welke) één voor één uit door op de oranje wolk te klikken en de site te reloaden tot deze weer werkt.

  6. Klik op de Continue button onderaan de tabel, zodat je op het Select a CloudFlare Plan scherm komt:

    CloudFlare’s Select a CloudFlare Plan scherm

  7. Selecteer het Free Website plan door op de naam te klikken, en klik op de Continue button:

    CloudFlare’s Change Your Name Servers scherm

  8. Het Change Your Nameservers scherm laat zien welke naamservers je domein nu heeft, en welke naamservers je domein moet gebruiken om gebruik te maken van CloudFlare. Dit is de volgende stap.

4. Verander de naamservers van je domein

  1. Open een nieuwe tab in je browser, en log in op de website van het bedrijf waar jouw domeinnaam is geregistreerd (voor mij is dat Hostnet).

  2. Verander de naamservers voor de domeinnaam van de originele naamservers naar de naamservers van CloudFlare:

    Naamservers veranderen op Hostnet

  3. Voer de wijzigingen door, ga terug naar de CloudFlare tab met het Change Your Name Servers scherm, en klik op de Continue button:

    CloudFlare's Overview scherm met status Pending

  4. CloudFlare’s Overview scherm laat zien dat de verandering van de naamservers nog niet is afgerond. Zodra de naamservers zijn aangepast en verwerkt op het internet naar de servers van CloudFlare, verandert de status van Pending naar Active:

    CloudFlare's Overview scherm met status Active

5. Zet CloudFlare’s SSL aan voor je domein

Het domein maakt nu gebruik van CloudFlare’s DNS en CDN, alleen nog niet van de SSL mogelijkheden. Daar ga je nu voor zorgen.

  1. Ga naar de Overview pagina van je domein op CloudFlare. Bovenaan de pagina zie je een hele rij met icoontjes. Klik op het Crypto icoon om naar de encryptie-instellingen te gaan:

    CloudFlare's Overview scherm met icoontjes

  2. Controleer of het SSL vakje op Flexible staat. Zo niet, klik op het vakje en selecteer Flexible.

  3. Het SSL certificaat moet geautoriseerd worden voor jouw domein. Zolang dat nog niet is gebeurd zie je onder het SSL vakje de melding AUTHORIZING CERTIFICATE:

    CloudFlare's Crypto instellingen met Authorizing Certificate melding

  4. Zodra het SSL certificaat is geautoriseerd voor jouw domein, verandert de melding in ACTIVE CERTIFICATE:

    CloudFlare's Crypto instellingen met Active Certificate melding

6. Installeer de CloudFlare plugins op WordPress

CloudFlare’s SSL staat aan, nu moet je WordPress website nog worden klaargemaakt voor SSL.

  1. Installeer de CloudFlare plugin via Plugins > Nieuwe Plugin. Zoek op cloudflare en selecteer de officiële CloudFlare plugin, die met de oranje CloudFlare wolk. Installeer en activeer de plugin.

  2. Ga naar Instellingen > CloudFlare om de plugin te configureren. Hier zie je een inlogformulier:

    CloudFlare's WordPress plugin invoervelden

  3. Vul in het Email veld je loginnaam van CloudFlare in.

  4. Ga voor de API Key waarde naar je CloudFlare account:

    • Klik rechts bovenin op je naam en selecteer My Settings

    • Scroll naar het API Key gedeelte:

      CloudFlare's My Account pagina

    • Klik op de View API Key button achter Global API Key:

    • Kopieer de API Key door de Ctrl-C toetsen in te drukken.

  5. Plak de waarde naar het API Key veld op het inlogformulier, en klik op de Save API Credentials button.

  6. In de Home tab, klik op de Apply button achter Apply Default Settings, en zet Automatic Cache Management op On.

  7. Installeer nu de CloudFlare Flexible SSL plugin via Plugins > Nieuwe Plugin. Zoek op cloudflare flexible ssl en selecteer de plugin gemaakt door iControlWP. Installeer en activeer de plugin.

    Deze plugin lost problemen op die voorkomen wanneer je Flexible SSL van CloudFlare gaat gebruiken.

7. Laat CloudFlare alle HTTP verkeer via HTTPS leiden

Je kunt CloudFlare zo instellen dat alle vraag naar HTTP bestanden automatisch worden omgeleid naar HTTPS. Dit doe je door een page rule in te stellen.

  1. Ga naar de Overview pagina van je domein op CloudFlare. Klik in het icoontjesmenu op Page Rules:

    CloudFlare's Overview scherm met icoontjes

  2. Dit brengt je naar het Page Rules scherm:

    CloudFlare's Page Rules scherm

  3. Er zijn nog geen regels aangemaakt. Klik op de Create Page Rule button. Dit opent het Create a Page Rule scherm:

    CloudFlare's Create a Page Rule scherm

  4. Vul bij het grote veld in: http://*jouwdomeinnaam.nl/*

  5. Verander jouwdomeinnaam.nl naar jouw domeinnaam, bijvoorbeeld:

    • http://*robin.nl/*
      of
    • http://*www.robin.nl/*
  6. Selecteer bij de Then the settings are box Always Use HTTPS

  7. Klik op de Save and Deploy button

  8. In het Page Rules scherm zie je nu dat er een rule is aangemaakt:

    CloudFlare's Page Rules scherm met rule

 

Je kunt WordPress en CloudFlare nu afsluiten.

8. Aanpassen http links in de MySQL database naar https

De MySQL database van je WordPress site zit nog vol interne links naar het oude http adres. Deze moeten vervangen worden door het nieuwe https adres.

De meest eenvoudige manier om dit te doen is via phpMyAdmin. Je gebruikte phpMyAdmin al toen je een backup van de database maakte. Wees niet bang; je kunt altijd weer terug naar de oude situatie.

  1. Ga terug naar de tab waar phpMyAdmin draait (of, wanneer je deze hebt afgesloten, log in op phpMyAdmin).

  2. Selecteer de database die je gaat aanpassen door op de naam te klikken.

  3. Eerst pas je de postmeta tabel aan:

    1. Klik op de SQL tab en kopieer/plak deze SQL code in het open vlak:
    2. Pas de tabel prefix (hier wp) aan naar de prefix van jouw tabellen (kijk in de linkerkolom op het scherm naar de tabellen in de gekozen database). Pas verder de tekst jouwdomein.nl tweemaal aan naar jouw eigen domeinnaam.

    3. Dat ziet er zo uit in de tab (de pijlen wijzen naar de tabel prefix en de twee domeinnamen):

      Vervang http door https in de postmeta tabel

    4. lik op de Starten button om de SQL query te draaien.

  4. Dan pas je de posts tabel aan:

    1. Klik weer op de SQL tab en kopieer/plak deze SQL code in het vrije vlak:
    2. Pas ook hier de tabel prefix (hier wp) aan naar de prefix van jouw tabellen, en pas de tekst jouwdomein.nl tweemaal aan naar jouw eigen domeinnaam.

      Zoals dit:

      Vervang http door https in de posts tabel

    3. Klik op Starten om de query te draaien.

De links in de database zijn nu aangepast, en je kunt phpMyAdmin afsluiten.

9. Aanpassen links in .htaccess en robots.txt bestanden

De voorlaatste stap in het opzetten van SSL op je WordPress site is het aanpassen van de URLs in andere bestanden. Hiervoor maak je gebruik van een FTP programma of van de File Manager in je controlepaneel.

Ik gebruik FileZilla voor al mijn FTP werk; het is gratis en werkt perfect.

  1. Draai je een beveiligingsprogramma als iThemes Security op je website, zet deze dan uit. Beveiligingsprogramma’s controleren of systeembestanden van buitenaf worden aangepast, en zetten je website op slot wanneer ze zoiets detecteren.

  2. Start je FTP programma of File Manager en ga naar de hoofdfolder van je website.

  3. Download bestand .htaccess naar je bureaublad.

  4. Maak op je bureaublad een kopie van je .htaccess bestand met de naam htaccess.origineel.

  5. Open .htaccess en vervang alle aanwezige http links door https links (wanneer je bijvoorbeeld 301 redirects in je .htaccess hebt staan).

  6. Heb je aanpassingen aan het bestand gemaakt, sla .htaccess dan op en upload deze naar de hoofdfolder.

  7. Download bestand robots.txt naar je bureaublad.

  8. Maak op je bureaublad een kopie van je sla robots.txt bestand met de naam robots.origineel.

  9. Open robots.txt vervang eventueel aanwezige http links door https links (bijvoorbeeld de link naar je sitemap).

  10. Heb je aanpassingen aan het bestand gemaakt, sla robots.txt dan op en upload deze naar de hoofdfolder.

  11. Sluit je FTP programma of File Manager af.

  12. Zet je beveiligingsprogramma weer aan.

10. Directe links in plugins

Als laatste: zijn er plugins waarin je directe links naar pagina’s heb gezet?

Zo ja, dan moet je deze opsporen en de URLs aanpassen naar de nieuwe https URLs, of je kunt deze plugins verwijderen van je site wanneer je ze niet meer nodig hebt.

Directe links naar pagina’s met de oude http links kunnen een Mixed-Content Warning geven, wat betekent dat bepaalde onderdelen van een pagina niet versleuteld verzonden worden. Je URL zal in de adresbalk dan ook geen slotje laten zien.

Wanneer ook deze links aangepast zijn, staat er een groen slotje voor je domeinnaam in je adresbalk staan.

Gefeliciteerd. Je website werkt nu volledig met CloudFlare’s Flexible SSL.

Problemen die je niet kunt oplossen? Ga terug naar Start!

Werkt alles perfect, dan kun je de database backup en veiligheidskopieën van .htaccess en robots.txt van je bureaublad verwijderen.

Krijg je het niet goed werkend, kom je er niet uit en wil je terug naar een werkende WordPress site zonder SSL maar wel met de snelheidsvoordelen van CloudFlare? Heel eenvoudig.

Als het goed is heb je de volgende drie bestanden op je bureaublad staan:

  • backup van de MySQL database (bestand met de naam van de database en extensie .sql)
  • backup bestand van .htaccess: htaccess.origineel
  • backup bestand van robots.txt: robots.origineel

Zijn deze bestanden paraat, dan kun je ze als volgt restoren:

  1. Hernoem htaccess.origineel terug naar .htaccess.

  2. Hernoem robots.origineel terug naar robots.txt.

  3. Start je FTP programma of File Manager en ga naar de hoofdfolder van je website.

  4. Upload bestand .htaccess van je bureaublad naar de hoofdfolder.

  5. Upload bestand robots.txt van je bureaublad naar de hoofdfolder.

  6. Sluit je FTP programma of File Manager af.

  7. Log in op phpMyAdmin of ga naar phpMyAdmin via het controlepaneel van je host.

  8. Klik in de kleine linkerkolom op de databasenaam die bij de website hoort.

  9. Klik onderaan in de grote rechterkolom op Selecteer alles en selecteer Verwijderen in de Met geselecteerd: box:

    Tabellen verwijderen in phpMyAdmin

  10. Klik in het volgende scherm op de Ja button om de SQL Query uit te voeren. De database is nu helemaal leeg.

  11. Klik op tab Importeren. Klik op de Bestand kiezen button en selecteer het .sql bestand op je bureaublad:

    SQL bestand importeren in phpMyAdmin

  12. Klik op de Starten button om het SQL bestand te importeren.

  13. De database zit weer vol met tabellen.

  14. Log in op WordPress en controleer of de officiële CloudFlare plugin geactiveerd is. Zo niet, activeer deze dan. De CloudFlare Flexible SSL plugin kun je verwijderen.

De website is weer terug in de oude staat.

Bronnen

Bij het opzetten van SSL voor deze website en tijdens het schrijven van dit artikel heb ik veel steun gehad aan de volgende bronnen:

Geen enkel artikel werkte helemaal, maar bij elkaar en met wat uitproberen kreeg ik SSL perfect werkend voor mijn sites.

Vragen of opmerkingen over deze handleiding? Laat je reactie hieronder achter.

Reageer op dit artikel

4 Reacties op "Hoe installeer je gratis SSL op WordPress met CloudFlare"

Abonneren op
avatar
Sorteren op:   nieuwste | oudste
Michiel
Gast
Michiel

Goed artikel, Robin, super! Ik heb het nu ook op een van mijn sites geïmplementeerd, was wel een heel gedoe :).

Paar opmerkingen:

– De volgorde in je artikel gaf me wat problemen. Ik had eerst een Page Rule aangemaakt in Cloudflare en toen geprobeerd Instellingen > Algemeen aan te passen in WordPress. Ik werd toen echter meteen uit de backend gegooid, omdat ie naar https wilde gaan en WP herkende dat nog niet. Ik heb toen de Page Rule in Cloudflare weer verwijderd, WP aangepast, en de Page Rule weer teruggezet. Deze stappen heb ik dus omgedraaid.

– Aanpassen van de links in de MySQL Database lukte niet. Met bovenstaande code in je artikel kreeg ik een syntax error. Ik weet ook niet zeker of het absoluut noodzakelijk is? Alle links worden immers ge-redirect door de PageRule.

Verder kreeg ik her en der nog wat Mixed Content Warnings in de browser. De Cloudflare-plugin voor WP ondervangt de meeste wel, maar niet allemaal.