Het oplossen van mixed content: maak jouw website geschikt voor SSL!

Als je bij ons een SSL-certificaat voor je domeinnaam bestelt, dan installeren wij het certificaat voor je op je hostingpakket. Erg handig, omdat je dat dan niet handmatig zelf hoeft te doen. Echter, een certificaat alleen is niet voldoende om het felbegeerde groene 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
Sinds 11 april 2017 hebben alle domeinnamen, subdomeinen, aliassen en pointers bij Antagonist gratis SSL en HTTP/2 gekregen. Dit geldt voor iedere klant, ongeacht hun webhostingpakket, inclusief Resellers. Lees hier meer!

Waarom SSL?

Het hebben van een SSL-certificaat, zodat verkeer van en naar je website over een versleutelde verbinding verloopt, wordt steeds belangrijker. Vind jij het een prettige gedachte om bij een webshop een bestelling te plaatsen, wetende 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 Wet bescherming persoonsgegevens (Wbp) is het verplicht om de informatie van je bezoekers dat via internet wordt verzonden te beveiligen. Denk aan informatie 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 eenvoudiger te maken om te zien of de website een SSL-certificaat heeft, toont Google Chrome sinds kort in de adresbalk of het ‘Veilig’ of ‘Niet veilig’ is. Hoe moet je dit interpreteren?

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

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 worden getoond.

Je website klaarmaken voor SSL

Vanaf dit punt 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 dan nog een aantal belangrijke stappen die je moet nemen, zodat ook bij jouw website het groene slotje in de adresbalk te zien is. Concreet gesteld:

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

Wat is mixed content?

Mixed content ontstaat, wanneer een website over een beveiligde HTTPS-verbinding wordt opgevraagd, maar dat onderdelen ervan, zoals scripts, video’s en afbeeldingen over een onbeveiligde HTTP-verbinding worden ingeladen. Ondanks de aanvraag over HTTPS, wordt er dan dus alsnog ook content over HTTP opgevraagd.

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

Handig om te weten
Als je een SSL-certificaat hebt, dan is het belangrijk dat je alle aanvragen over HTTPS forceert. Je wilt voorkomen dat iemand nog via een onbeveiligde HTTP-verbinding je website bezoekt en dus geen groen slotje in de adresbalk ziet.

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 je kunt 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-URLs dynamisch naar HTTPS-URLs te veranderen.

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

  • ga naar https://je-domein/wp-admin/ en log in op het dashboard van je WordPress-website;

Let op!
Dus met https:// ervoor. Vervang ‘je-domein’ met je eigen domein.

  • 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 controleren of je het groene slotje ziet. Zo ja, dan ben je klaar!

TIP!
De plugin stelt standaard een WordPress redirect in. Een .htaccess redirect heeft echter minder impact op de laadtijd en valt eenvoudig via ‘Instellingen’ > ‘Schakel 301 .htaccess redirect in’ te activeren.

Het forceren van HTTPS zonder plugin

Als je een SSL-certificaat voor je domeinnaam hebt en de mixed content hebt opgelost, dan kun je er ook HTTPS forceren, 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.

Je kunt dan een zogeheten ‘rewrite rule’ 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;
  • klik op ‘File Manager’ (onder de categorie ‘Your Account);
  • klik daarna op de map ‘public_html’;
  • vervolgens klik je op ‘Edit’ bij het bestand ‘.htaccess’;

TIP!
Is er geen .htaccess-bestand in je /public_html/-map? Maak het aan door onderaan bij ‘Create New File’ de waarde ‘.htaccess’ (zonder aanhalingstekens) in te voeren en op ‘Create’ te klikken.

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

Het felbegeerde groene slotje: het forceren van HTTPS via het .htaccess-bestand

  • klik op ‘Save’ om de wijzigingen op te gaan.

Als je nu je domeinnaam in je 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 forceert dat alles netjes over HTTPS wordt afgehandeld.

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. Heb je zelf nog tips voor bijvoorbeeld het oplossen van mixed content, laat ze dan gerust in de reacties onder dit artikel achter!

Alles over SSL →

P.S. Wil je op de hoogte blijven van alle artikelen, updates, tips en trucs die verschijnen op ons blog? Dat kan! Rechts bovenin via RSS, e-mail, het liken op Facebook, het +1’en op Google+ of het volgen op Twitter.

Deel Tweet +1 Deel