Je WordPress-site via HTTPS laten uitvoeren is niet langer optioneel. 🔒 HTTPS is niet alleen veiliger (alles is versleuteld, niets wordt in gewone tekst doorgegeven), maar het bouwt ook vertrouwen op, is een rankingfactor voor SEO en biedt meer accurate verwijzingsgegevens. Prestatieproblemen die vaak gepaard gingen met encryptie zijn voor het grootste deel opgelost dankzij HTTP/2 en Let’s Encrypt heeft de hele branche opgeschud door een eenvoudige manier te bieden om gratis SSL-certificaten te verkrijgen.

Voor sommige bedrijven is een van de belangrijkste redenen echter dat webbrowsers zoals Chrome en Firefox waarschuwingen laten zien op sites die niet via HTTPS werken. Dat is het laatste wat je je bezoekers wilt laten zien!

(Leessuggestie: als u oudere TLS-versies gebruikt, wilt u misschien ERR_SSL_OBSOLETE_VERSION-meldingen in Chrome repareren).

We hebben een uitgebreide handleiding geschreven over hoe je kunt migreren van HTTP naar HTTPS. Een veel voorkomend probleem dat website-eigenaren achteraf tegenkomen zijn waarschuwingen voor Mixed Content. Vandaag laten we je een paar verschillende manieren zien waarop je deze op je WordPress-site kunt oplossen.

Wat is een Mixed Content-waarschuwing?

Een waarschuwing voor gemengde inhoud in de browser van een gebruiker verschijnt wanneer de WordPress-site tegelijkertijd HTTPS- en HTTP-scripts of content laadt. Je kan ze niet allebei laden omdat het volledig afzonderlijke protocollen zijn. Wanneer je naar HTTPS migreert, moet alles via HTTPS worden uitgevoerd.

Wired documenteerde hun overgang van HTTP naar HTTPS en een waarschuwing voor gemengde inhoud die ze tegenkwamen was:

“[…] een van de grootste uitdagingen bij het overstappen naar HTTPS is het voorbereiden van al onze inhoud die via beveiligde verbindingen moet worden geleverd. Als een pagina via HTTPS wordt geladen, moeten alle andere items (zoals afbeeldingen en Javascript-bestanden) ook via HTTPS worden geladen. We zien een groot aantal rapporten over deze “gemengde inhoud” -aangelegenheden of gebeurtenissen waarbij een onveilig HTTP-item wordt geladen in de context van een beveiligde HTTPS-pagina. Om onze lancering goed te regelen moeten we ervoor zorgen dat we minder problemen met gemengde inhoud hebben en dat we zoveel mogelijk content van WIRED.com leveren op een veilige manier. “

Hieronder volgen enkele voorbeelden van wat er in browsers gebeurt als je deze waarschuwingen niet oplost.

Voorbeeld waarschuwing in Chrome voor Mixed Content

Een voorbeeld van wat er in Chrome gebeurt wanneer een waarschuwing voor gemengde inhoud op een WordPress-site wordt geactiveerd is hieronder te zien. Volgens NetMarketShare is Chrome momenteel koploper in marktaandeel van browsers – de browser wordt door meer dan 60% van het internet gebruikt. De volgende waarschuwing is zeer waarschijnlijk wat de meeste van je bezoekers zullen zien.

Chrome gemengde inhoud waarschuwingsvoorbeeld

Chrome gemengde inhoud waarschuwingsvoorbeeld

Voorbeeld waarschuwing in Firefox voor Mixed Content

Hier is een voorbeeld van wat er in Firefox gebeurt wanneer een waarschuwing voor gemengde inhoud op een WordPress-site wordt getoond.

Firefox gemengde inhoud waarschuwingsvoorbeeld

Firefox gemengde inhoud waarschuwingsvoorbeeld

Voorbeeld waarschuwing in Microsoft Edge voor Mixed Content

Hier is een voorbeeld van wat er in de Edge-browser van Microsoft gebeurt wanneer een waarschuwing voor gemengde inhoud op een WordPress-site wordt geactiveerd.

Microsoft Edge gemengde inhoud waarschuwingsvoorbeeld

Microsoft Edge gemengde inhoud waarschuwingsvoorbeeld

Voorbeeld waarschuwing in Internet Explorer voor Mixed Content

Hier is een voorbeeld van wat er gebeurt in Internet Explorer wanneer een waarschuwing voor gemengde inhoud wordt getoond. Zoals je kunt zien is IE een van de vervelendste browsers omdat het de weergave van de pagina tegenhoudt totdat de pop-up wordt weggeklikt. 

Internet Explorer gemengde inhoud waarschuwingsvoorbeeld

Internet Explorer gemengde inhoud waarschuwingsvoorbeeld

Wat is de oorzaak van een Mixed Content-waarschuwing?

De meest voorkomende oorzaak van een Mixed Content-waarschuwing is als een beheerder zijn WordPress-site van HTTP naar HTTPS migreert. HTTP-koppelingen worden simpelweg overgezet naar HTTPS wat ervoor zorgt dat Mixed Content-waarschuwingen worden geactiveerd. Een andere reden zou kunnen zijn dat je zojuist een nieuwe service of plug-in hebt toegevoegd.

Hier zijn enkele extra voorbeelden van wat deze waarschuwing kan veroorzaken:

  • Plug-inontwikkelaars gebruiken soms absolute paden (http://yourdomain.com/style.css) in hun plug-ins of thema’s om te linken naar CSS en JavaScript in plaats van relatieve paden te gebruiken (/style.css).
  • Afbeeldingen hebben hard gecodeerde URL’s (http://yourdomain.com/image.png) die verwijzen naar HTTP. Dit kan binnen een bericht, pagina of zelfs een widget zijn.
  • Je linkt naar HTTP-versies van externe scripts (gehoste jQuery, Font Awesome, etc.)
  • Je hebt ingesloten videoscripts met HTTP in plaats van HTTPS.

Mixed Content-waarschuwingen oplossen

Volg de simpele stappen hieronder om je WordPress-waarschuwingen voor gemengde inhoud op te lossen. Dit gaat ervan uit dat je het volgende al hebt gedaan:

In de voorbeelden gebruiken we onze ontwikkelsite (wpdev.ink).

Stap 1

Het eerste wat je kunt doen is uitzoeken welke bronnen nog steeds worden geladen via HTTP. Blader naar de pagina waar je de waarschuwing krijgt en start vervolgens Chrome DevTools. Houd er rekening mee dat dit mogelijk alleen in bepaalde gedeelten van je site gebeurt en dus niet op de gehele site.

  • Windows: F12 or CTRL + Shift + I
  •  MAC: Cmd + Opt + I)

Je kunt Chrome DevTools ook openen via het menu Tools.

Open Chrome DevTools

Open Chrome DevTools

Stap 2

Er zijn een aantal plaatsen waar je kunt controleren welke bronnen niet worden geladen via HTTPS. De eerste is het tabblad “Console“. 
 Opmerking: mogelijk moet je de pagina vernieuwen nadat je Chrome DevTools hebt geopend, zodat alles correct laadt. 

Hieronder kunnen we gemakkelijk zien dat er een onveilige afbeelding is gekoppeld aan een HTTP-versie van de site en een koppeling naar een door HTTP gehoste versie van jQuery.

Chrome DevTools gemengde inhoud in console

Chrome DevTools gemengde inhoud in console

Je kunt ook kijken bij het tabblad “Security”. Het laat de niet-beveiligde bronnen zien en je kunt daarna klikken op “View the request in the network panel”. Opmerking: mogelijk moet je de pagina vernieuwen nadat je Chrome DevTools hebt geopend om alles correct te laden.

Chrome DevTools beveiliging

Chrome DevTools beveiliging

Tenslotte kan je de aanvragen bekijken in het tabblad “Network“. Opmerking: mogelijk moet je de pagina vernieuwen nadat je Chrome DevTools hebt geopend om alles correct te laden.

Chrome DevTools netwerk

Chrome DevTools netwerk

Als je geen Chrome gebruikt of alleen een kort overzicht van de fouten wilt zien kun je ook een gratis tool als Why No Padlock gebruiken. Het scant een afzonderlijke pagina en toont alle onveilige bronnen.

Why No Padlock?

Why No Padlock?

HTTPS-waarschuwingen in bulk controleren

Als je je zorgen maakt over de rest van je site kun je deze het beste controleren. Hier zijn enkele aanbevolen opties:

  • Er is een gratis tool genaamd SSL Check van JitBit die je kunt gebruiken om je HTTPS WordPress-site te doorzoeken en te zoeken naar onveilige afbeeldingen en scripts die een waarschuwing in browsers activeren. Het aantal pagina’s dat wordt gecrawld is beperkt tot 200 per website.
  • De audit tool van Ahrefs heeft nu de mogelijkheid om HTTPS/HTTP gemengde inhoud te detecteren. Mocht je al een abonnement bij Ahref hebben, of iemand in je marketingteam, kan dit een goede manier zijn om dit grondig te checken.
  • HTTPS Checker is desktopsoftware die je kunt installeren en waarmee je site wordt gescand. Het kan je helpen te controleren op “niet-beveiligde” waarschuwingen en inhoud na grote veranderingen. Het is beschikbaar op Windows, Mac en Ubuntu. Met het gratis abonnement kun je maximaal 100 pagina’s controleren.

Stap 3

De volgende stap is dat je wil checken of de bronnen die via HTTP worden geladen via HTTPS toegankelijk zijn. Waarschijnlijk is dit wel het geval, dus we hoeven alleen de links bij te werken. Als voorbeeld gebruiken we de situatie van hierboven met een onveilige afbeelding en gehoste jQuery.

  • http://wpdev.ink/wp-content/uploads/2018/06/website-never-done.jpg
  • http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

Als we beide URL’s gebruiken, deze invoeren in de adresbalk van onze browser en HTTPS aan het begin toevoegen, zien we dat ze prima laden. Daarom moeten we gewoon doorgaan met zoeken en vervangen op onze site.

Stap 4

Er zijn veel verschillende manieren waarop je in WordPress een zoek-en-vervang-opdracht uit kan voeren. In deze stap leiden we je door twee verschillende aanbevolen opties.

We raden je af om de Really Simple SSL-plug-in te gebruiken. Hoewel het een geweldige plug-in is, wil je niet op de lange termijn afhankelijk zijn van een plug-in voor de werking van je website. Het is niet zo dat je op een later moment weer overschakelt naar HTTP, dus doe het op de juiste manier en werk je HTTP-URL’s bij in je database (zoals we je hieronder laten zien).

Als je een klant van Kinsta bent, kun je onze zoek-en-vervang-tool gebruiken die beschikbaar is in het MyKinsta-dashboard. Klik onder Sites op ‘Beheren’ naast de site waarop je wilt zoeken en vervangen. Klik vervolgens op ‘Extra’ en onderaan vindt je het hulpmiddel ‘Zoeken en vervangen’.

Kinsta zoek en vervang tool

Kinsta zoek en vervang tool

  1. Voer in het  zoekveld de waarde in waar je naar wilt zoeken in de database, in dit geval ons HTTP-domein: http://wpdev.ink.
  2. Voer in het veld Vervangen de nieuwe waarde in die moet worden gebruikt om de waarde te vervangen waarnaar je zoekt. In dit geval is dit ons HTTPS-domein: https://wpdev.ink.
  3. Zorg ervoor dat de optie “Testronde” eerst is geselecteerd. Met deze optie bereken je hoeveel vervangingen er gemaakt zullen worden, zonder daadwerkelijk de vervangingen te maken. Klik vervolgens op ‘Vervangen’.

Belangrijk: Zorg ervoor dat je in geen van deze twee velden per ongeluk een extra spatie (vóór of na de term) toevoegt, omdat dit tot ongewenste resultaten kan leiden.

HTTP naar HTTPS zoeken en vervangen

HTTP naar HTTPS zoeken en vervangen

Als het goed is krijg je nu in een scherm te zien hoeveel vervangingen er gemaakt zullen worden. Klik nu op “Vervangen” om de opdracht te bevestigen. Opmerking: In de modus “Testronde” worden dus geen wijzigingen in de database aangebracht.

HTTP naar HTTPS zoeken en vervangen

HTTP naar HTTPS zoeken en vervangen

Je ziet dan het totale aantal vervangingen dat zal worden uitgevoerd.

Aantal vervangingen

Aantal vervangingen

Je kunt vervolgens “Testronde” deselecteren en nogmaals op “Vervangen” klikken om de zoek-en-vervang-opdracht uit te voeren en wijzigingen in je database aan te brengen. Opmerking: er wordt automatisch een back-up gemaakt wanneer je deze opdracht uitvoert (back-up-ID: beforesearchandreplace). Je kunt dus altijd terug in het geval er iets fout gaat.

Zoeken-en-vervangen

Zoeken-en-vervangen

Je ziet dan een laatste bevestiging van het aantal gemaakte vervangingen.

Bevestiging bij zoeken-en-vervangen

Bevestiging bij zoeken-en-vervangen

Als je geen klant van Kinsta bent kun je dezelfde taak uitvoeren met de gratis Better Search Replace-plug-in en vervolgens de plug-in verwijderen nadat je klaar bent.

Better Search Replace plug-in

Better Search Replace plug-in

Je kunt het downloaden vanuit de WordPress-bibliotheek of door ernaar te zoeken in je WordPress-dashboard onder “Add New”  bij Plugins. Na activatie kun je zoeken naar je HTTP-domein (http://jouwdomein.nl) en vervang je het door je HTTPS-domein (https://jouwdomein.nl).

Better Search Replace opties

Better Search Replace opties

Als alternatief kun je ook een zoekopdracht uitvoeren en vervangen door het interconnect/it Search Replace DB PHP Script of WP-CLI.

Stap 5

Nadat je klaar bent met zoeken en vervangen wil je je site controleren om zeker te weten dat de waarschuwingen voor gemengde inhoud verdwenen zijn. We raden je aan je site te bekijken en op een paar pagina’s te klikken terwijl je de statusindicator van de browser in de adresbalk bekijkt.

Op onze site kunnen we zien dat de onveilige afbeelding nu is opgelost, maar de gehoste jQuery-waarschuwing is er nog steeds. De reden is dat we een zoekopdracht hebben uitgevoerd en bronnen hebben geladen die vanuit ons eigen domein zijn geladen. Echter is dit een extern script dat handmatig moet worden bijgewerkt.

Gemengde inhoud waarschuwing

Gemengde inhoud waarschuwing

In dit geval was het script handmatig toegevoegd in onze WordPress-header (header.php). Het script zou een relatieve URL moeten gebruiken, dus we hebben het bijgewerkt naar: //ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

Extern HTTP script

Extern HTTP script

Voor de meesten van jullie zal het zoeken en vervangen waarschijnlijk alle problemen oplossen. Heb je echter veel hardcoded content op je site, dan is de kans groter dat je tegen problemen aanloopt. Als je vermoedt dat er een hardcoded extern script zich in een van je plug-ins of thema’s bevindt, en je weet niet precies waar de fout zich precies bevindt, aarzel dan niet om contact op te nemen met de developer.

Voorbeeld Chrome zonder Mixed Content-waarschuwing

Hier is een voorbeeld van wat er in Chrome gebeurt wanneer alles correct wordt geladen via HTTPS zonder waarschuwingen voor gemengde inhoud.

Chrome geen waarschuwingen voor gemengde inhoud

Chrome geen waarschuwingen voor gemengde inhoud

Voorbeeld Firefox zonder Mixed Content-waarschuwing

Hier is een voorbeeld van wat er in Firefox gebeurt als alles correct wordt geladen via HTTPS zonder waarschuwingen voor gemengde inhoud.

Firefox geen waarschuwingen voor gemengde inhoud

Firefox geen waarschuwingen voor gemengde inhoud

Voorbeeld Microsoft Edge zonder Mixed Content-waarschuwing

Hier is een voorbeeld van wat er gebeurt in Microsoft Edge wanneer alles correct wordt geladen via HTTPS zonder waarschuwingen voor gemengde inhoud.

Microsoft Edge geen waarschuwingen voor gemengde inhoud

Microsoft Edge geen waarschuwingen voor gemengde inhoud

Hoe zit het met HSTS?

Sommigen van jullie vragen je misschien af ​​waarom je niet gewoon HSTS (HTTP Strict Transport Security) kan gebruiken om dit probleem op te lossen. HSTS is gemaakt om de browser te dwingen om beveiligde verbindingen te gebruiken wanneer een site via HTTPS werkt. Het is een beveiligingsheader die je toevoegt aan je webserver en die je terugziet responsheader als Strict-Transport-Security.

HSTS is echter geen goede oplossing voor de Mixed Content-waarschuwingen. HSTS verwerkt alleen omleidingen, terwijl de waarschuwing voor gemengde inhoud een feature van de browser is. Je hebt ook geen controle over externe sites die HSTS gebruiken. Daarom moet je altijd http:// URLs bijwerken.

Esa Jokinen duikt dieper in op de redenen in deze Server Fault-discussie.

Aanvullende aanbevelingen (speciale gevallen)

  • Als je de paginabuilder  Elementor gebruikt, moet je naar de Elementor-instellingen gaan en de URL van je site daar bijwerken, zodat de CSS-bestanden opnieuw worden gegenereerd met de nieuwe URL. Zodra je dit hebt gedaan, moet je door de cache leeg te maken eventuele onveilige waarschuwingen verwijderen die te wijten zijn aan Elementor.
  • Als je de Kinsta CDN gebruikt, wordt aangeraden om ook de CDN-zone te verwijderen.

Samenvatting

Voor de meesten van jullie zou een eenvoudige zoek-en-vervang-opdracht genoeg moeten zijn om snel de waarschuwingen voor Mixed Content te laten verdwijnen en zou je site binnen een paar minuten weer kunnen werken. Als dit echter niet het geval is, heb je waarschijnlijk te maken met één of twee hardcoded scripts die achtergebleven zijn. Deze zul je handmatig moeten vinden en bijwerken.

Als je feedback hebt of tegen problemen aanloopt, laat het ons dan hieronder weten in de reacties.


Als je dit artikel leuk vond, dan zul je gek zijn op Kinsta's WordPress hosting platform. Of het nu gaat om het versnellen van jouw website of het krijgen van 24/7 support van ons ervaren WordPress-team. Onze door Google Cloud aangedreven infrastructuur is gericht op automatische schaalbaarheid, prestaties en beveiliging. Laat ons jou het Kinsta verschil tonen! Bekijk onze pakketten