Het certificaat is geïnstalleerd, de adressen in WordPress zijn aangepast, en toch: op de homepage staat een slotje, op de pagina Over ons niet. Of Chrome toont bij het slotje een uitroepteken en de tekst dat de verbinding “niet volledig beveiligd” is. Een enkele afbeelding laadt niet, of een lettertype valt terug naar iets lelijks. Bezoekers merken het aan een waarschuwing, u merkt het aan een klant die belt.
Dit is mixed content: een pagina die zelf via HTTPS laadt, maar daarbinnen iets ophaalt via het onversleutelde http://. Mixed content oplossen is bijna nooit ingewikkeld, maar het vraagt wel dat u de juiste boosdoener vindt. In dit artikel gaan wij van symptoom naar oorzaak naar oplossing, en sluiten af met hoe u voorkomt dat het terugkomt.
De symptomen
Browsers maken onderscheid tussen twee soorten. Passieve mixed content zijn afbeeldingen, video’s en audio via http://. De browser laadt ze meestal nog wel, maar haalt het slotje weg of toont een waarschuwing. Actieve mixed content zijn scripts, stijlbestanden, lettertypen en frames via http://. Die blokkeert de browser volledig, omdat een aanvaller er code mee zou kunnen injecteren. Het gevolg: een menu dat niet uitklapt, een formulier dat niet verzendt, een kaart die leeg blijft.
Ziet u dus een pagina die er “kapot” uitziet direct na de overstap naar HTTPS, dan is actieve mixed content de eerste verdachte. Ziet u alleen een ontbrekend slotje, dan gaat het vermoedelijk om afbeeldingen.
Zo vindt u de boosdoener in twee minuten
- Open de betreffende pagina in Chrome of Firefox.
- Druk op F12 om de ontwikkelaarstools te openen en kies het tabblad Console.
- Vernieuw de pagina. U ziet nu gele of rode meldingen met “Mixed Content” en daarachter het volledige adres van het bestand dat via http:// wordt geladen.
Dat adres vertelt u meteen waar het vandaan komt. Staat er uw eigen domeinnaam in, dan zit het in uw inhoud of thema. Staat er een ander domein, dan is het een externe bron: een lettertype, een widget, een ingesloten video.
De vijf oorzaken van mixed content
1. Oude adressen in de inhoud. Afbeeldingen die vóór de overstap zijn ingevoegd, staan in de database met een volledig adres inclusief http://. Dit is verreweg de meest voorkomende oorzaak. Oplossing: een zoek-en-vervangbewerking in de database die http://uwdomein.nl vervangt door https://uwdomein.nl. Gebruik een plugin die met geserialiseerde data overweg kan, of WP-CLI, en maak eerst een back-up.
2. Instellingen van thema en paginabouwer. Een achtergrondafbeelding in de themaopties, een logo in de Customizer, een sectie in Elementor of Divi. Die staan vaak apart opgeslagen en worden door een gewone zoekopdracht gemist. Oplossing: de afbeelding opnieuw selecteren in de instellingen, of de zoek-en-vervangplugin ook op de opties-tabel laten werken.
3. Hardgecodeerde adressen in het thema. Een bouwer heeft ooit een script of een lettertype rechtstreeks in de themabestanden gezet met http://. Oplossing: het bestand aanpassen, bij voorkeur in een child-thema. Gebruik daarbij https:// of laat het protocol helemaal weg door met // te beginnen.
4. Externe bronnen die zelf geen HTTPS bieden. Een oude widget, een teller of een badge van een dienst die nooit is overgestapt. Oplossing: controleren of de dienst inmiddels wel een https-versie heeft. Zo niet, dan is het tijd om er afscheid van te nemen.
5. De cache. U heeft alles gecorrigeerd, maar de site toont nog steeds de oude versie. Cacheplugins, servercache en een CDN bewaren de oude pagina met de oude adressen. Oplossing: alle lagen legen. Wat u daarvoor precies leegt en in welke volgorde, staat in ons artikel over de cache legen als wijzigingen niet zichtbaar zijn.
De juiste volgorde van herstel
Begin niet met een plugin die alles “automatisch fixt”. Zulke plugins herschrijven adressen op het moment dat de pagina wordt opgebouwd, en dat werkt vaak, maar het verbergt het probleem in plaats van het op te lossen. Zet u die plugin ooit uit, dan is alles weer kapot. Doe het daarom in deze volgorde:
- Maak een back-up.
- Voer een zoek-en-vervang uit op de database voor uw eigen domein, inclusief de www-variant.
- Loop de thema-instellingen na en selecteer afbeeldingen opnieuw waar nodig.
- Controleer de Console op overgebleven meldingen en pak de externe bronnen één voor één aan.
- Leeg alle cachelagen.
- Voeg als vangnet de header Content-Security-Policy: upgrade-insecure-requests toe. Die vertelt de browser om http-bronnen automatisch via https op te vragen. Dit is een nette laatste laag, geen vervanging voor de stappen ervoor.
Een voorbeeld: de fysiotherapiepraktijk uit Nijmegen
Een fysiotherapiepraktijk in Nijmegen had na de overstap een homepage met slotje, maar een afsprakenpagina die in Chrome een waarschuwing gaf. In de Console bleek dat de afsprakenwidget van een externe planningsdienst nog via http:// werd geladen; de code was jaren eerder gekopieerd. De dienst had al lang een https-versie, en het aanpassen van één regel in de widgetcode loste het op. Wat langer duurde, was het vinden van de tweede oorzaak: het logo in de themaopties, dat na een zoek-en-vervang nog steeds via http:// laadde omdat het adres in een geserialiseerde instelling stond. Opnieuw selecteren in de Customizer was voldoende.
Voorkomen dat het terugkomt
Mixed content sluipt terug via nieuwe inhoud die iemand kopieert uit een oud document, via een plugin die een oude bron toevoegt of via een hostingverhuizing waarbij de omleidingen ontbreken. Drie gewoontes helpen: voeg afbeeldingen altijd toe via de mediabibliotheek in plaats van met een geplakt adres, controleer na elke grote wijziging kort de Console, en laat een maandelijkse controle op het slotje deel uitmaken van uw onderhoud. Bij WebMaintor zit dat in de monitoring die onder structurele websitebeveiliging valt, maar een gratis online SSL-controle die u zelf maandelijks draait, doet ook al veel.
De basis blijft een goede overstap. Als het bij u structureel misgaat, op meerdere pagina’s en na elke wijziging, dan is die overstap waarschijnlijk niet volledig gedaan. Het stappenplan daarvoor staat in ons artikel over HTTPS goed instellen in WordPress.
Conclusie
Mixed content is zichtbaar, vindbaar en oplosbaar. Open de Console, lees het adres, en u weet binnen twee minuten of het in uw inhoud, uw thema of bij een externe dienst zit. Los het op bij de bron, leeg de cache en zet de upgrade-header erop als vangnet. Daarna staat het slotje op elke pagina, en dit keer blijft het staan.
