Optimaliseren veiligheid - Stappenplan om een website correct om te zetten naar SSL

Onderstaand leggen we je uit hoe je een website correct van http naar https omzet. Vaak is het zo dat na de installatie van een SSL certificaat, nog enkele aanpassingen nodig zijn om ook het groene slotje in de url-balk te laten verschijnen.

Voor een correcte installatie, loop de volgende stappen door:

1. Controleer de DNS
   In het geval je SSL al is geïnstalleerd, sla deze stap over).
   
   Een SSL kan niet aangemaakt worden op het moment dat het domein nog niet verwijst naar de server waarop je het certificaat wilt aanmaken. Zorg ervoor dat er geen verwijzingen zijn naar subdomeinen (zoals bijvoorbeeld webmail.domein.nl) die niet gekoppeld/verwezen zijn in je DNS instellingen. Je kunt verwijzen met een zogenaamde A record verwijzing, of een nameserver verwijzing.
   
   Controleer hier of je domein verwijst naar de nameservers van Hoasted, of het IP adres van de server waarop je website draait (vervang hoasted.com voor jouw domeinnaam): https://www.whatsmydns.net/#NS/hoasted.com
2. Aanmaken en installeren SSL
   
   Als klant van hoasted kun je dit kosteloos doen via Let’s Encrypt. Als alternatief kun je ook een professioneel certificaat kopen (zie deze link). Voor de installatie van een Let’s Encrypt SSL kun je deze handleiding gebruiken.
3. Omzetten Wordpress url’s van http naar https
   Veelal zijn de volgende twee stappen voldoende:
   
   a. Zorg dat je een gebruikersnaam en wachtwoord hebt voordat je de volgende stap uitvoert, aangezien je wordt uitgelogd bij het wijzigen.
   
   Ga in Wordpress Dashboard naar Settings > General en zet je WordPress Address en Site Address beiden om van http:// naar https://.
   
   
   b. Ga nu in je cPanel naar ‘File Manager’, en ga naar de public_html map. Zoek het bestand .htaccess op. Indien je het niet ziet staan, zorg dan dat ook de verborgen bestanden zichtbaar zijn via ‘Settings > show hidden’. Klik op het .htaccess bestand, en klik ‘bewerken’.
   
   Plaats het volgende bovenaan in de .htaccess file (deze vind je in de public_html map):
   
   

   RewriteEngine on
   RewriteRule ^.well-known - [L]
   RewriteEngine on
   RewriteCond %{HTTPS} !on
   RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [L]
   	

   c. Sla het bestand op via ‘Save’. Je website leidt nu al het verkeer automatisch over de veilige https verbinding.

Indien je nog geen groen slotje in de adresbalk ziet
De kans is groot dat je bovenstaande stappen hebt doorgelopen, maar nog geen groen slotje ziet staan. Dit wordt veroorzaakt door zogenaamde ‘mixed content’. Dit houdt in dat je website zowel https als http bestanden inlaadt, wat niet volledig veilig is. Je wilt tenslotte gebruik maken van een volledige https website.

Het groene slotje zal in dit geval niet in beeld komen en de browser zal een ‘mixed content’ waarschuwing geven. Dit kan het geval zijn met bijvoorbeeld CSS, afbeeldingen en/of Javascript die met http geladen worden op de pagina.

Dit kun je als volgt oplossen:

1. Cache leegmaken.
   
   In een aantal gevallen is de oorzaak dat er vanuit de cache nog http:// geladen wordt bij het oproepen van een pagina. Leegmaken van de cache is dan de oplossing. Dit is eveneens van toepassing als je website gebruikmaakt van CDN, bijvoorbeeld Cloudflare.
   
   In het Cloudflare dashboard ga je naar SSL settings en kies in de dropdown Full (strict).
   In het Dashboard moet je daarna Always use HTTPS op On zetten:
   

   

2. Verkeerde url’s opzoeken en verbeteren
   
   Bekijk je website met de ‘Chrome Developer Tool’. Het makkelijkst doe je dit met de Google Chrome Browser. Roep eerst de homepage op, klik op het Chrome menu, Kies (more) Tools > Developer Tools en klik vervolgens op de Console tab. Je ziet nu ongeveer een vergelijkbaar scherm zoals onderstaand:De Mixed Content links worden in het rood en/of oranje getoond. Zoek op welke afbeeldingen of bestanden worden opgevraagd op basis van http://, en zet deze links om naar https://. Indien het een afbeelding in de backend van WordPress betreft, kun je ook vaak het probleem oplossen door de afbeelding te verwijderen en opnieuw te uploaden.
   
   Voorbeeld:
   http://www.website.nl/wp-content/uploads/2017/09/afbeelding.png
   Pas dit aan naar:
   https://www.website.nl/wp-content/uploads/2017/09/afbeelding.png
   Wijzig alle links naar https en herlaad de pagina om te controleren of het aantal items minder wordt. Dit doe je totdat alles weg is, en het groene slotje in de adresbalk in beeld komt. Herhaal dit voor andere website pagina’s die ook mixed content waarschuwingen geven.
   
   Let op: Het kan zijn dat je gebruik maakt van caching plugins. Zet deze tijdelijk uit om je wijzigingen sneller te zien.
3. Bekijk met je browser de broncode en pas http links aan.
   
   Voor Windows: rechtermuisknop op je website en kies ‘Bekijk Bron/View Source’
   
   Voor Mac/Apple: open je website en kies ‘View > Developer > View Source’ in het menu
   
   Zoek nu met CTRL+F (Mac: CMD+F) op:src=“http://     en  src=‘http://
   
   Wijzig al de gevonden http:// links naar https://
4. Een handig hulpmiddel is de WordPress Really Simple SSL plugin, die ondermeer alle http:// links vervangt door https:// links (behalve voor links naar andere sites) en veel mixed content problemen voor je oplost!
5. Heb je een pagina waarvan je niet weet waarom deze nog geen groen slotje geeft (en dus mixed content): vul die in op de WhyNoPadlock site.
6. Als je alles goed hebt verwerkt, zie je het console venster leeg, of in ieder geval vrij van de ‘mixed content’ meldingen.
   
7. Slotcontrole
   Als je de probleempagina’s hebt opgelost, loop dan nog even opnieuw door alle pagina’s van de site. De browser zou nu nergens meer Mixed Content waarschuwingen mogen geven. Dit is niet alleen van belang voor je bezoekers, maar ook voor de Google zoekmachine Ranking (https scoort hoger).

Als alternatief kun je de omzetting door Hoasted laten verrichten, dien daarvoor via mail aan support@hoasted.com even een ticket in. We helpen je graag.