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:
Natuurlijk gebruikt dus nog niet iedereen Chrome.
Zo ziet het eruit in Firefox wanneer een “mixed content” waarschuwing verschijnt op een WordPress website:
En dan nog een voorbeeld van dezelfde waarschuwing in Microsoft Edge:
En zo ziet het eruit in Internet Explorer:
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.
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:
- Je hebt net een nieuwe service of plugin toegevoegd aan je website. Specifiek zijn er developers die absolute bestandspaden gebruiken (http://jouwdomein.com/style.css) in hun plugins of thema’s om te linken naar CSS en JavaScript, in plaats van relatieve bestandspaden (/style.css).
- Je afbeeldingen hebben vastgezette URL’s (zoals http://jouwdomein.com/image.png) die over HTTP geladen worden. Dit kan binnen artikelen, pagina’s of zelfs widgets
- Je linkt naar HTTP versies van externe scripts (hosted jQuery, Font Awesome en dergelijke).
- Je hebt ingesloten video-scripts die HTTP in plaats van HTTPS gebruiken.
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:
- Een SSL-certificaat geïnstalleerd.
- Redirecten van HTTP naar HTTPS (voor de hele site)
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:
- Windows:F12 of CTRL + Shift + I
- macOS :Cmd + Opt + I
Je kan Chrome DevTools ook openen via het tools-menu in je browser:
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:
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:
Onder het tabblad Network kan je ook een lijst met geblokkeerde verzoeken vinden:
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:
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:
- Er is een gratis tool, SSL Check van JitBit, waarmee je je HTTPS site kan crawlen en zoeken naar onbeveiligde afbeeldingen en scripts die een waarschuwing in browsers kunnen activeren. Het aantal te controleren pagina’s is beperkt tot 400 per website.
- De Ahrefs Site Audit tool heeft ook de mogelijkheid om te controleren op HTTPS/HTTP mixed content. Heb je deze oplossing sowieso al, of iemand in je marketingteam, dan kan dit een goede manier zijn om alles meteen goed te controleren.
- HTTPS Checker is een desktopprogramma dat je kan installeren om je website te scannen. Je kan hiermee “not secure” waarschuwingen en content controleren na grote aanpassingen. Het is beschikbaar voor Windows, Mac en Ubuntu. Met het gratis pakket kan je tot 500 pagina’s per scan controleren.
- SSL Insecure Content Fixer is een WordPress plugin die je op je website kan installeren op fouten te ontdekken die resulteren in “mixed content” waarschuwingen. Het is gratis te gebruiken, en zal zelfs waar mogelijk automatisch oplossingen voor de fouten uitvoeren.
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:
- http://ajax.googleapis.com/ajax/libs/jquery/3.31/jquery.min.js
- http://example-site.com/wp-content/50d00acf6e4%2Fpuppy-thumb.jpg?v=1600261043278
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:
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:
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:
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):
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:
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:
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:
Firefox laat eenzelfde melding zien:
En dit zie je in Microsoft Edge:
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.
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!
Hoofdredacteur bij Kinsta en content marketing consultant voor WordPress plugin-ontwikkelaars. Verbind met <a href="">Matteo op Twitter.
Dank voor dit informatieve artikel. Ik had ook mixed content en heb alles geprobeerd om het op te lossen. Ook alle suggesties die jullie hier besproken hebben.
Bij deze site was het probleem echter pas opgelost nadat ik binnen Elementor ook nog eens extra de url’s had aangepast. Dit is een mogelijkheid binnen de settings van Elementor zelf.
Zie hier dit artikel: https://really-simple-ssl.com/knowledge-base/how-to-fix-mixed-content-in-elementor-after-moving-to-ssl/
Misschien ook iets wat jullie er nog bij zouden kunnen vermelden.
Groet,
Tessa Gaakeer