Je WordPress website via HTTPS laten afleveren is niet langer een keuze, maar een noodzaak. Niet alleen is alles daardoor ook veel veiliger (alles wordt versleuteld, dus niks wordt in gewone tekst verzonden), maar het geeft bezoekers ook vertrouwen, het is een ranking-factor voor zoekmachines en biedt betere referral data. Helaas kunnen websitebeheerders diverse problemen tegenkomen bij het overstappen van HTTP naar HTTPS. Eén van die problemen is de “mixed content” waarschuwing.

Problemen met prestaties die te maken hebben met versleuteling zijn inmiddels grotendeels opgelost, dankzij HTTP/2. Daarnaast heeft Let’s Encrypt de hele sector veranderd door een eenvoudig manier te bieden om gratis SSL certificaten te krijgen.

Misschien wel het belangrijkste voor online bedrijven is dat browsers zoals Google Chrome en Mozilla Firefox steeds strenger optreden richting website die geen HTTPS gebruiken, en steeds serieuzere waarschuwingen laten zien aan de bezoekers van dergelijke websites. Als je bijvoorbeeld verouderde TLS versies gebruikt, zou je zomaar de ERR_SSL_OBSOLETE_VERSION  meldingen in Chrome tegen kunnen komen. Je wilt natuurlijk niet dat je bezoekers beveiligingswaarschuwingen te zien krijgen als ze naar je website komen.

Om dat te voorkomen hebben we een uitgebreide uitleg geschreven over het migreren van HTTP naar HTTPS. Maar na dat proces zou het kunnen dat je toch nog waarschuwingen over mixed content, oftewel gemengde inhoud, te zien krijgt.

In dit artikel laten we een paar manieren zien waarop je dit probleem kan oplossen voor je WordPress website.

Kijk je liever de video?

Wat is een “mixed content” waarschuwing?

Een mixed content waarschuwing is te zien in de browser van gebruikers wanneer de WordPress website die ze proberen te bezoeken tegelijkertijd zowel HTTPS als HTTP scripts en content probeert te laden. Dit kan problemen veroorzaken omdat HTTP en HTTPS compleet verschillende protocollen zijn.

Wanneer je naar HTTPS migreert moet alles via dit protocol lopen, dus ook je afbeeldingen, JavaScript bestanden, en andere zaken. Hieronder enkele voorbeelden van wat er kan gebeuren wanneer je content deels nog over HTTP wordt geladen.

Voorbeelden van Mixed Content waarschuwingen

Chrome is momenteel de meest populaire browser, gebruikt door meer dan 77% van het web. De volgende waarschuwing zal dus de meeste van bezoekers treffen:

Een mixed content waarschuwing in Google Chrome

Een mixed content waarschuwing in Google Chrome

Natuurlijk gebruikt dus nog niet iedereen Chrome.

Zo ziet het eruit in Firefox wanneer een “mixed content” waarschuwing verschijnt op een WordPress website:

Een mixed content waarschuwing in Firefox

Een mixed content waarschuwing in Firefox

En dan nog een voorbeeld van dezelfde waarschuwing in Microsoft Edge:

Een mixed content waarschuwing in Microsoft Edge

Een mixed content waarschuwing in Microsoft Edge

En zo ziet het eruit in Internet Explorer:

Internet Explorer mixed content waarschuwing

Internet Explorer mixed content waarschuwing

Zoals je kan zien is Internet Explorer één van de ergste plekken voor de waarschuwing, aangezien het dan meteen het laden van de pagina stopt, totdat de gebruiker op de popup klikt.

Het is dus een foutmelding waarvan je zeker wilt weten dat je bezoekers hem niet te zien krijgen. Gelukkig kan je dit zeker voorkomen, maar dan moet je wel eerst weten waardoor de melding getoond wordt.

Je WordPress website via HTTPS laten laden is niet langer een keuze. ✅ Maar overstappen van HTTP ➡️ ️ HTTPS kan 'mixed content' waarschuwingen opleveren. Lees hier hoe je die snel kan repareren 💥Click to Tweet

Wat veroorzaakt “mixed content” waarschuwingen?

We zien dat de meeste mixed content waarschuwing verschijnen net nadat iemand hun WordPress website migreert van HTTP naar HTTPS. Sommige HTTP links worden simpelweg overgezet, waardoor de “mixed content” waarschuwingen in actie komen.

Enkele andere oorzaken van deze waarschuwing:

Helaas zal je de echte oorzaak van het probleem niet kunnen ontdekken totdat je begint met troubleshooting.

Met dat in je achterhoofd gaan we kijken naar enkele manieren die je kan gebruiken om “mixed content” waarschuwingen op te lossen.

Het oplossen van “mixed content” waarschuwingen (4 stappen)

Je kan de onderstaande vier stappen volgen om de “mixed content” waarschuwingen in WordPress te repareren. We nemen hierbij aan dat je al de volgende zaken hebt gedaan:

We zullen een voorbeeldsite gebruiken in onderstaande voorbeelden.

Stap 1: Achterhaal welke resources geladen worden via HTTP

Het eerste wat je moet weten is welke resources er nog altijd via HTTP geladen worden.

Onthoud dat deze waarschuwingen waarschijnlijk alleen op sommige plekken in je website getoond worden, dus niet voor de hele site. Browse naar een pagina die de waarschuwingen activeert en activeer de Chrome DevTools door te drukken op:

Je kan Chrome DevTools ook openen via het tools-menu in je browser:

Chrome developer tools in het browser tools menu

Chrome developer tools in het browser tools menu

Er zijn enkele plekken waar je goed kan zien of er resources mogelijk niet via HTTPS geladen worden.

We beginnen met het tabblad Console. Het zou kunnen dat je de pagina moet verversen nadat je Chrome DevTools geopend hebt, om alles goed te kunnen zien.

Wanneer er “mixed content” fouten te zien zijn, worden die met rood of geel gemarkeerd. Er zal meestal ook wat meer informatie bij staan, zoals “This request has been blocked; the content must be served over HTTPS.” Dit betekent dat de browserinstellingen automatisch alle HTTP content blokkeren.

Om meer websites te stimuleren om HTTPS te gebruiken, is Chrome begonnen met het standaard blokkeren van gemengde content vanaf Chrome 79. Recenter hebben ze features geïntroduceerd voor het auto-upgraden van gemengde afbeeldingen en andere media.

Daarom kan je door het gebruiken van Chrome DevTools meldingen over mixed content zien, die aangeven dat bepaalde elementen automatisch geüpgraded zijn:

Chrome DevTools mixed content in console

Chrome DevTools mixed content in console

Hier zien we duidelijk dat verschillende onbeveiligde elementen de “mixed content” waarschuwingen activeren, waaronder een stylesheet en script.

Je zal ook zien dat er een verzoek werd verstuurd voor een onbeveiligd .jpg afbeelding, dat automatisch omgezet werd naar HTTPS. (Opmerking: in een andere browser dan Chrome, zou deze automatisch upgrade niet plaatsvinden).

Je kan ook in het tabblad Security van Chrome DevTools kijken. Hier zie je alle verkeer vanaf een niet-beveiligde oorsprong:

Chrome DevTools beveiliging

Chrome DevTools beveiliging

Onder het tabblad Network kan je ook een lijst met geblokkeerde verzoeken vinden:

Chrome DevTools Network

Chrome DevTools Network

Als je een andere browser dan Chrome gebruikt, of gewoon een snel overzicht van de fouten wil zien, dan kan je ook een gratis tool gebruiken, zoals Why No Padlock.

Hiermee wordt een individuele pagina gescand en krijg je alle onbeveiligde bestanden te zien:

Why No Padlock overzicht van "mixed content" fouten

Why No Padlock overzicht van “mixed content” fouten

De tool is erg eenvoudig te gebruiken. Je kan gewoon een URL naar wens invullen en op Test Page klikken, en je krijgt alle aanwezige fouten te zien. En het is dus helemaal gratis!

HTTPS waarschuwingen in bulk controleren

Maak je je zorgen over je hele website, dan kan je ook meerdere pagina’s in één keer laten controleren. Hieronder enkele aanbevolen manieren waarop je dat kan doen:

Met bovenstaande tools kan je een hoop tijd besparen in handmatig elke pagina te moeten controleren op je website, om te speuren naar “mixed content” waarschuwingen en fouten. Voor een echt grondige controle op potentiële fouten op je website zou je zelfs meerdere tools hierboven kunnen gebruiken.

Stap 2: Controleer dat HTTP resources toegankelijk zijn via HTTPS

De volgende stap is controleren dat de resources die via HTTP laden wel toegankelijk zijn via HTTPS. Waarschijnlijk is dit zo, maar moet je gewoon de links bijwerken.

Ter illustratie, laten we zeggen dat onze “mixed content” fouten wezen op onderstaande onbeveiligde jQuery script en .jpg afbeelding:

Als we beide URL’s in onze adresbalk plakken en “http” gewoon vervangen door “https”, zien we dat ze gewoon prima laden. Daarom hoeven we dus alleen maar zoeken en vervangen uit te voeren op de website, om alle http met https te vervangen.

Stap 3: Voer een WordPress zoeken en vervangen opdracht uit

Er zijn verschillende manieren om zoeken en vervangen binnen WordPress te doen. Hier zullen we twee verschillende manieren gebruiken, die we allebei kunnen aanbevelen.

Mocht je je dit afvragen, we raden je niet aan om een tool als Really Simple SSL te gebruiken. Het is zeker een goede plugin, maar geen goede oplossing voor de lange termijn. Je gaat toch niet weer terug naar HTTP, dus je kan het beter meteen goed regelen en al je HTTP URL’s in je database omzetten, zoals hieronder beschreven.

Ben je klant bij Kinsta, dan kan je onze speciale zoeken en vervangen tool gebruiken, direct vanuit het MyKinsta dashboard.

Ga naar de pagina Tools voor je website en klik op Zoeken en vervangen:

De Search and Replace tool in MyKinsta

De Search and Replace tool in MyKinsta

In het zoekveld typ je vervolgens de waarde waarop je wil zoeken in de database.

In dit geval zullen we ons HTTP domein gebruiken: http://kinstalife.com. Klik vervolgens op de Search knop. De zoeken en vervangen tool toont meerdere overeenkomsten met deze opdracht.

Vink het Vervangen vakje aan om meteen alle overeenkomsten te vervangen. In het veld Vervangen met typ je de term waarmee je de resultaten wil vervangen. In dit geval zullen we ons HTTPS domein (dus met S) gebruiken: https://kinstalife.com.

We raden je ook aan om het vakje Cache legen wanneer gereed aangevinkt te laten, aangezien daarmee automatisch de Kinsta cache geleegd wordt wanneer het zoeken en vervangen is afgerond. Klik als laatste op Vervangen:

HTTP naar HTTPS zoeken en vervangen in MyKinsta

HTTP naar HTTPS zoeken en vervangen in MyKinsta

Belangrijk: Zorg ervoor dat je geen spaties voor of na je termen hebt bij beide velden, aangezien dat onverwachte resultaten op kan leveren.

Alternatieven voor zoeken en vervangen

Gebruik je iets anders dan Kinsta, dan kan je dezelfde actie uitvoeren met de gratis Better Search Replace plugin, die je dan gewoon verwijderd wanneer je klaar bent:

Downtime en WordPress problemen? Kinsta is de hosting oplossing speciaal ontworpen om jou tijd te besparen! Bekijk onze kenmerken
De Better Search Replace WordPress plugin

De Better Search Replace WordPress plugin

Je kan deze tool downloaden in de WordPress Plugin Directory, of erop zoeken in je WordPress dashboard.

Nadat je dit geactiveerd hebt, zoek je gewoon op je HTTP domein (http://jouwdomein.com) en vervang je de resultaten met je HTTPS domein (https://jouwdomein.com):

De Better Search Replace WordPress plugin opties

De Better Search Replace WordPress plugin opties

Je zou ook zoeken en vervangen kunnen doen via het interconnect/it Search Replace DB PHP Script of WP-CLI.

Bekijk onze video om meer te zien over zoeken en vervangen in WordPress:

Stap 4: Controleer dat de “mixed content” waarschuwingen weg zijn

Nadat je het zoeken en vervangen hebt uitgevoerd, moet je altijd controleren dat je website geen “mixed content” waarschuwingen meer laat zien. We raden je aan om je website te bezoeken aan de frontend en overal rond te klikken, terwijl je naar de statusindicator in de adresbalk van je browser kijkt.

Op onze website zien we nu dat de .jpg afbeelding opgelost is, maar er is nog wel een waarschuwing over een onveilig script.

Dat komt omdat we zoeken en vervangen hebben uitgevoerd voor resources die geladen worden via ons eigen domein. De jQuery waarschuwing ontstaat echter door een extern script, dat handmatig opgelost moet worden:

Mixed content waarschuwing in Console

Mixed content waarschuwing in Console

In dit geval moest het script handmatig toegevoegd worden aan onze WordPress header(header.php). Hier zou een relatieve URL gebruikt moeten worden, dus we hebben dit veranderd naar //ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:

HTTP extern script toegevoegd aan de WordPress header via Theme Editor

HTTP extern script toegevoegd aan de WordPress header via Theme Editor

Zoeken en vervangen zal de meeste problemen oplossen.

In het algemeen zal je alleen extra problemen krijgen als je iets hardcoded hebt in je WordPress website.

Mocht je denken dat er een extern script hardcoded is in één van je plugins of thema’s, en kan je dit niet vinden, neem dan vooral contact op met de oorspronkelijk developer voor ondersteuning.

Voorbeelden van geen Mixed Content waarschuwingen

Nu weet je waar je op moet letten om de fouten met mixed content op te lossen.

Hier een voorbeeld van wat er in Chrome gebeurt wanneer alles goed geladen wordt via HTTPS, en er geen mixed content waarschuwingen meer zijn:

Chrome zonder mixed content waarschuwingen

Chrome zonder mixed content waarschuwingen

Firefox laat eenzelfde melding zien:

Firefox zonder mixed content waarschuwingen

Firefox zonder mixed content waarschuwingen

En dit zie je in Microsoft Edge:

Microsoft Edge zonder mixed content waarschuwingen

Microsoft Edge zonder mixed content waarschuwingen

Alhoewel de precieze bewoordingen in de melding wat kunnen wisselen per browser, zou je altijd een melding moeten zien die aangeeft dat er een veilige verbinding is. Wanneer je dat ziet, weet je dat er niet langer “mixed content” meldingen op je WordPress website te vinden zijn.

Hoe zit het met HSTS?

Sommigen zullen zich afvragen of je niet gewoon HSTS (HTTP Strict Transport Security) kan gebruiken om dit probleem op te lossen. HSTS is gemaakt als een methode om af te dwingen dat de browser veilige verbindingen gebruikt wanneer een site via HTTPS loopt.

Het is een beveiligingsheader die je toevoegt aan je webserver en die terug te zien is in de response header als Strict-Transport-Security.

Maar HSTS is geen snelle oplossing voor alle mixed content waarschuwingen. HSTS regelt alleen redirects, terwijl de mixed content waarschuwing een feature van de browser zelf is. Je hebt ook geen controle over of externe websites HSTS gebruiken.

Daarom moet je dus altijd alsnog je http:// URL’s aanpassen. Esa Jokinen gaat hier dieper op in, in deze Server Fault gesprekken.

Extra aanbevelingen (uitzonderingen)

Wanneer je de Elementor page builder gebruikt, moet je ook in de Elementer instellingen de URL van je website aanpassen, zodat de CSS bestanden de nieuwe URL gaan gebruiken.

Daarna kan je de cache legen om alle waarschuwingen die ontstaan door Elementor op te lossen. Daarnaast, als je de Kinsta CDN gebruikt, raden we je aan om de CDN zone te legen.

Klaar om over te stappen naar HTTPS, maar loop je vast op mixed content waarschuwingen? 🥴 Lees hier hoe je dit probleem kan oplossen!Click to Tweet

Samenvatting

“Mixed content” waarschuwingen kunnen vervelend zijn, vooral wanneer er verschillende oorzaken voor zijn. Gelukkig zijn er enkele simpele stappen die je kan zetten om de meeste problemen op te lossen.

In de meeste gevallen zou een eenvoudige zoeken en vervangen actie al je “mixed content” waarschuwingen moeten laten verdwijnen, waardoor je website zo weer normaal werkt. Als dat niet nog alles oplost, zitten er waarschijnlijk nog één of twee hardcoded scripts ergens. Je moet die zien te vinden en handmatig bewerken om deze fout op te lossen, of een developer inhuren die het voor je regelt.

Heb je nog opmerkingen, of kom je nog steeds problemen tegen, laat het ons dan weten in de reacties!


Heb je het gehad met onkundige WordPress-supportmedewerkers die nergens antwoord op kunnen geven? Geef ons gerenommeerde supportteam een kans! Bekijk onze pakketten