Mixed content oplossen: maak jouw website geschikt voor SSL!

Bestel je bij ons een SSL-certificaat voor je domeinnaam, dan installeren wij het certificaat voor je op je hostingpakket. Erg handig, omdat je dit dan niet handmatig zelf hoeft te doen. Echter, een certificaat alleen is niet voldoende om het felbegeerde slotje in de adresbalk te krijgen. Je website moet er ook klaar voor zijn en geen ‘mixed content’ bevatten. Waar moet je op letten?

Het felbegeerde groene slotje: je website geschikt maken voor SSL!

UPDATE: gratis SSL en HTTP/2
Sinds 11 april 2017 hebben alle domeinnamen, subdomeinen, aliassen en pointers bij Antagonist gratis SSL en HTTP/2 gekregen. Dit geldt voor elke klant, ongeacht hun pakket, inclusief resellers.

Waarom SSL?

Een SSL-certificaat hebben, wordt steeds belangrijker. Verkeer van en naar je website verloopt daardoor over een versleutelde verbinding. Vind jij het een prettige gedachte om bij een webshop een bestelling te plaatsen, terwijl je weet dat je betaalgegevens onbeveiligd worden verwerkt? Of log jij graag ergens in, terwijl je weet dat je wachtwoord onveilig wordt verzonden?

Ik niet en daarin ben ik zeker niet de enige. Volgens de Algemene verordening gegevensbescherming (AVG) is het verplicht om de informatie van je bezoekers dat via internet wordt verzonden te beveiligen. Denk aan gegevens die verzonden wordt bij een online aankoop, een financiële transactie of het invullen van een contactformulier.

Ook Google hecht veel waarde aan SSL. Om het voor een bezoeker duidelijker te maken of de website een SSL-certificaat heeft, toont Google Chrome sinds kort in de adresbalk of het ‘Veilig’ of ‘Niet veilig’ is. Is er sprake van een versleutelde HTTPS-verbinding, dan staat er ‘Veilig’. Heeft een website geen SSL-certificaat en probeer je de pagina over HTTPS te benaderen, dan staat er ‘Niet veilig’ en zal er een beveiligingsmelding tonen.

Het felbegeerde groene slotje: wel of niet veilig in Google Chrome

Je website klaarmaken voor SSL

Vanaf hier in het artikel ga ik ervan uit dat het belang van een SSL-certificaat duidelijk is. Je hebt je daarom in de verschillende typen certificaten verdiept, er één aangeschaft en ingesteld op je hostingpakket.

Ben je dan klaar? Nee, dat is nog niet alles. Er zijn nog een aantal belangrijke stappen die je moet nemen, zodat ook bij jouw website het slotje in de adresbalk te zien is. Concreet gesteld:

  • er dient geen mixed content binnen je website aanwezig te zijn;
  • je dient in te stellen dat je website alles over HTTPS afhandelt.

Naar HTTPS doorsturen
Heb je een SSL-certificaat, dan is het belangrijk dat je alle aanvragen naar HTTPS doorstuurt. Je wilt niet dat iemand via een onbeveiligde HTTP-verbinding je website bezoekt en geen slotje in de adresbalk ziet.

Wat is mixed content?

Je hebt mixed content als een website over een beveiligde HTTPS-verbinding wordt opgevraagd, maar dat onderdelen ervan over een onbeveiligde HTTP-verbinding worden ingeladen. Denk bij deze onderdelen aan scripts, video’s en afbeeldingen. Ondanks de aanvraag over HTTPS, wordt er dan alsnog ook content over HTTP opgevraagd.

Bevat een website mixed content, dan toont er geen slotje in de adresbalk wanneer je jouw website over HTTPS bezoekt. Ondanks dat je een SSL-certificaat hebt. Het is daarom belangrijk om dit op te lossen. Het is immers zonde als je wel een certificaat hebt, maar je bezoekers niet direct het slotje in de adresbalk zien.

Hoe los ik mixed content op?

Er zijn verschillende manieren om te zien of er op je website sprake is van mixed content. En zo ja, om welke bestanden het binnen je website dan gaat. Je kunt bijvoorbeeld het adres van je website op een SSL-checker invoeren of de Developer Tools openen in je browser en dan in de ‘Console’ kijken.

Bevat je WordPress-website mixed content? Voor WordPress zijn er plugins beschikbaar die het meeste werk voor je uit handen nemen. Handige plugins zijn bijvoorbeeld Really Simple SSL en Insecure Content Fixer. Ze zijn specifiek gericht op het oplossen van mixed content, bijvoorbeeld door HTTP-URL’s dynamisch naar HTTPS-URL’s te veranderen.

Premium versie van Really Simple SSL
Really Simple SSL heeft ook een premium versie. Voor het oplossen van mixed content en het doorsturen naar HTTPS is die niet nodig. Overweeg het als de extra opties je aanspreken of je de ontwikkelaar wilt steunen.

Het installeren en instellen van Really Simple SSL gaat als volgt:

  • Ga naar https://example.nl/wp-admin/ en log in op je website. Let op: dus met https:// ervoor. Vervang ‘example.nl’ met je eigen domeinnaam.
  • Klik op ‘Plugins’ → ‘Nieuwe plugins’.
  • Zoek op ‘Really Simple SSL’ en klik op ‘Nu installeren’.

Het felbegeerde groene slotje: het installeren van de plugin Really Simple SSL

  • Klik op ‘Activeren’ om de plugin te activeren.
  • De plugin controleert of er een SSL-certificaat aanwezig is.

Mixed content oplossen: het inschakelen van Really Simple SSL

  • Als die controle slaagt, dan kun je op ‘Ok, SSL activeren!’ klikken.

Mixed content oplossen: Really Simple SSL ingesteld

De plugin lost nu vanzelf de mixed content op en zorgt er gelijk voor dat je website alle aanvragen over HTTPS afhandelt. Leeg voor de zekerheid nog even de cache in je browser. Je kunt daarna je website bezoeken en checken of je het slotje ziet. Zo ja, dan ben je klaar!

De plugin stelt standaard een WordPress redirect in
Een .htaccess redirect heeft echter minder impact op de laadtijd. Je regelt dit eenvoudig via ‘Instellingen’ → ‘Schakel 301 .htaccess redirect in’.

Doorsturen naar HTTPS zonder plugin

Als je een SSL-certificaat voor je domeinnaam hebt en de mixed content hebt opgelost, dan kun je ook alles naar HTTPS doorsturen, zonder dat je daar een plugin voor hoeft te gebruiken. Bijvoorbeeld, als je geen WordPress-website hebt of omdat je liever zo min mogelijk plugins gebruikt.

Via DirectAdmin

Dit is de aanbevolen manier, omdat je alleen een vinkje hoeft te zetten. Log in op DirectAdmin van je hostingpakket. Klik op ‘Domain Setup’ en daar op de domeinnaam die je naar HTTPS wilt doorsturen. Zet een vinkje achter ‘Redirect HTTP to HTTPS’ en klik op ‘Save’. Klaar!

Via .htaccess

Je kunt ook zogeheten ‘rewrite rules’ gebruiken. Het gaat om de onderstaande regels die je bovenaan in het .htaccess-bestand in de public_html-map op je hostingpakket moet plaatsen:

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

Stapsgewijs gaat dit als volgt:

  • Log in op DirectAdmin van je hostingpakket.
  • Ga in het menu naar ‘Systeeminfo en bestanden’ → ‘Bestandsbeheer’.
  • Klik daarna op de map ‘public_html’.
  • Vervolgens klik je bij het bestand ‘.htaccess’ op ‘Bestand bewerken’.

Geen .htaccess-bestand in je public_html-map?
Klik onderaan op ‘Bestand aanmaken’, vul de waarde ‘.htaccess’ (zonder aanhalingstekens) in en klik op ‘Aanmaken’.

  • Voeg bovenaan in het bestand de regels toe, zoals te zien is op de schermafbeelding hieronder.

HTTP naar HTTPS doorsturen via het .htaccess-bestand.

  • Klik op ‘Opslaan’ om de wijzigingen op te gaan.

Als je nu jouw domeinnaam in de adresbalk intypt om je website te bezoeken, dan maakt het niet uit of je expliciet ‘http’ of ‘https’ ervoor zet. Je komt nu altijd op de HTTPS-variant van je website uit, dus ook wanneer je expliciet ‘http’ voor je domeinnaam in de adresbalk invoert.

Tot slot

Hopelijk ben je er met behulp van dit artikel in geslaagd om te zorgen dat er geen mixed content meer binnen je website aanwezig is. En, minstens zo belangrijk, dat je hebt geregeld dat alles naar HTTPS wordt doorgestuurd. Kom je er niet helemaal uit of zit je met vragen over SSL-certificaten, dan ben je altijd vrij om via support@antagonist.nl contact met ons op te nemen!

Lees alles over SSL →

P.S. Op de hoogte blijven van alle artikelen, updates, tips en trucs die op ons blog verschijnen? Volg ons via Facebook, Twitter, Instagram, RSS en e-mail!

Deel App Tweet Mail Deel

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *