Verdwijnt het slotje in je browser of breken er ineens onderdelen op je site? In deze blog lees je wat mixed content is, waarom het je veiligheid, snelheid, SEO en Core Web Vitals schaadt, en hoe je het snel opspoort en definitief verhelpt. Met praktische checks in DevTools en slimme inzet van 301-redirects, HSTS en CSP maak je je site weer volledig https en win je vertrouwen en conversie terug.
Wat is mixed content
Mixed content ontstaat wanneer je een pagina laadt via HTTPS (een versleutelde, veilige verbinding), maar die pagina nog onderdelen binnenhaalt via HTTP, dus onversleuteld. Denk aan scripts, stylesheets, iframes, afbeeldingen, video’s of lettertypes die vanaf een http-adres komen terwijl jouw pagina https gebruikt. Daardoor krijg je een mix van veilige en onveilige bronnen, wat het beveiligingsniveau van de hele pagina ondermijnt. Browsers maken onderscheid tussen actieve mixed content (zoals scripts, iframes en CSS die de pagina kunnen wijzigen) en passieve mixed content (zoals afbeeldingen of video’s die meestal geen code uitvoeren). Actieve mixed content wordt vaak volledig geblokkeerd, omdat het direct misbruikt kan worden; passieve content kan soms nog laden, maar levert waarschuwingen en een gebroken slotje op.
Mixed content ontstaat vaak door hardcoded http-links in je thema of content, verouderde plug-ins, absolute URL’s in je CMS, externe scripts die niet via https beschikbaar zijn, of een CDN dat niet goed is ingesteld. Het effect merk je aan waarschuwingen in de browser, ontbrekende styling of functionaliteit en minder vertrouwen bij je bezoekers. Ook kan je performance en SEO hieronder lijden, omdat resources niet laden of traag worden omgeleid. Kort gezegd: zolang één onderdeel onveilig binnenkomt, is je pagina niet echt veilig. Daarom is het cruciaal om alle bronnen via https te laten lopen of automatisch te upgraden.
Hoe mixed content ontstaat op je site
Mixed content ontstaat meestal na een migratie naar https waarbij niet alle verwijzingen zijn meegegaan. Je thema of templates kunnen nog hardcoded http-links bevatten voor scripts, stylesheets, afbeeldingen of lettertypes. Ook in je WYSIWYG-editor plak je soms per ongeluk een http-afbeelding of video-embed, waardoor die bron onversleuteld wordt geladen. Externe diensten zoals analytics, chatwidgets, fonts of advertentienetwerken leveren soms nog http-urls, of je gebruikt een CDN zonder volledig https-certificaat.
Absolute urls in je CMS-instellingen, een oude base href, of incorrecte rewrite- en redirectregels zorgen er eveneens voor dat assets via http binnenkomen. Tot slot kunnen caching- of proxyconfiguraties mixed content vasthouden, waardoor je ondanks aanpassingen nog steeds waarschuwingen ziet totdat je cache en CDN-purge goed geregeld zijn.
Actieve versus passieve mixed content
Deze vergelijking laat in één oogopslag het verschil zien tussen actieve en passieve mixed content, inclusief grensgevallen, met risico’s en hoe moderne browsers ermee omgaan.
| Type mixed content | Definitie / kern | Typische voorbeelden | Browsergedrag (modern) |
|---|---|---|---|
| Actieve mixed content | HTTP-subresources op een HTTPS-pagina die code kunnen uitvoeren of de DOM kunnen wijzigen; hoog veiligheidsrisico. | Scripts (src), iframes, CSS (link), XHR/fetch, WebSocket (ws://), lettertypen (font-face), plugins. | Standaard geblokkeerd door moderne browsers; functionaliteit kan breken; console meldt “Mixed Content” fouten. Oplossing: serveer via HTTPS of verwijder/vervang; overweeg CSP upgrade-insecure-requests. |
| Passieve mixed content | HTTP-subresources die geen code uitvoeren; lager maar reëel risico (manipuleerbare weergave, tracking, metadata-lekken). | Afbeeldingen, video, audio. | Vaak toegestaan met waarschuwing of “Niet veilig”-indicatie; sommige browsers en/of CSP proberen eerst te upgraden naar HTTPS, anders blokkeren. Oplossing: migreer assets naar HTTPS en gebruik CDN/CMS met absolute HTTPS-URL’s. |
| Gemengde formulierinzendingen (grensgeval) | HTTPS-pagina die data post naar een HTTP-endpoint; risico op diefstal van inlog- of betaalgegevens. | Form action=”http://…”, AJAX-post naar http://. | Sterk ontraden; moderne browsers waarschuwen en kunnen blokkeren of functies (autofill, Payment) uitschakelen. Oplossing: gebruik altijd HTTPS-endpoints en HSTS. |
| Gemengde downloads/links (grensgeval) | HTTPS-pagina die naar een HTTP-bestand linkt; risico op manipulatie van downloads. | Links naar .exe/.zip/.pdf via http:// vanaf een HTTPS-pagina. | Browsers blokkeren of waarschuwen steeds vaker bij risicovolle mixed downloads. Oplossing: host downloads via HTTPS, teken bestanden, en vervang onveilige links. |
Kern: actieve mixed content wordt standaard geblokkeerd door het hoge risico; passieve lijkt onschuldig maar verzwakt beveiliging en wordt steeds vaker geüpgraded of geblokkeerd. Fix alles door resources consequent via HTTPS te serveren en waar nodig CSP/HSTS te gebruiken.
Actieve mixed content omvat scripts, stylesheets, iframes en XHR/fetch-aanvragen die de DOM kunnen aanpassen of code uitvoeren, waardoor een aanvaller je pagina kan manipuleren. Browsers blokkeren dit meestal volledig op https-pagina’s, of proberen eerst het verzoek te upgraden naar https. Passieve mixed content gaat om bronnen zoals afbeeldingen, video’s en audio die geen code uitvoeren. Dat lijkt minder risicovol, maar het ondermijnt nog steeds integriteit en privacy: iemand kan bestanden onderweg vervangen, meelezen wat je laadt of tracking toevoegen.
In de praktijk zorgt actieve mixed content voor kapotte functionaliteit, terwijl passieve mixed content het slotje breekt, waarschuwingen triggert en soms je layout of prestaties aantast. De oplossing is hetzelfde: alles via https serveren, automatisch upgraden en alle http-verzoeken elimineren.
[TIP] Tip: Gebruik Content-Security-Policy upgrade-insecure-requests om mixed content automatisch te upgraden.
Waarom mixed content je site schaadt
Mixed content ondermijnt het hele voordeel van https, omdat je via een veilige pagina toch onversleutelde bronnen binnenhaalt. Daardoor kan een aanvaller meelezen of content onderweg aanpassen, en markeert de browser je pagina als “niet veilig”, toont waarschuwingen of blokkeert onderdelen volledig. Het gevolg zie je direct: kapotte functionaliteit in formulieren, zoekfuncties of checkout, ontbrekende fonts en styles die je layout doen verspringen, en trager laden door mislukte verzoeken of extra redirects. Dat raakt je conversie en vertrouwen, want bezoekers haken eerder af zodra het slotje ontbreekt of iets niet werkt.
Ook je SEO lijdt eronder: https is een bevestigde rankingfactor en gemengde resources kunnen de rendering door Googlebot verstoren, waardoor critical CSS, JavaScript of afbeeldingen niet worden gezien. Bovendien verslechteren Core Web Vitals als LCP en CLS wanneer belangrijke assets niet of te laat laden. Daarbovenop lek je mogelijk privacygevoelige informatie via http-verzoeken. Kortom, mixed content tast veiligheid, prestaties, vindbaarheid én merkvertrouwen tegelijk aan.
Browserwaarschuwingen en geblokkeerde resources
Browsers beschermen je bezoekers actief tegen mixed content en laten dat duidelijk merken. In Chrome, Firefox en Safari verdwijnt het slotje, verschijnt “Niet beveiligd” naast de adresbalk en zie je in de console foutmeldingen over gemengde inhoud. Actieve mixed content, zoals scripts, stylesheets, iframes en fetch-aanvragen, wordt standaard geblokkeerd of eerst automatisch naar https geüpgraded; lukt dat niet, dan valt functionaliteit uit, breekt je layout en laden formulieren, menu’s of checkout-steps niet meer.
Passieve bronnen, zoals afbeeldingen en video’s, kunnen soms nog laden, maar ze breken wel het veiligheidsicoon en schaden vertrouwen. Je vindt de oorzaken snel via DevTools in het Security- en Network-paneel, waar je precies ziet welke http-urls blokkeren en welke je moet vervangen of upgraden naar https.
Impact op je SEO, core web vitals en conversie
Mixed content raakt drie sleuteldomeinen tegelijk. Voor SEO verzwak je het https-signaal, en als cruciale CSS, JavaScript of afbeeldingen via http worden geblokkeerd, kan Google je pagina niet goed renderen, waardoor content, interne links of structured data gemist worden en rankings dalen. Core Web Vitals lijden direct: LCP verslechtert wanneer je hero-afbeelding of critical CSS niet laadt, CLS stijgt door ontbrekende fonts en late style-injecties, en INP kan oplopen door foutende scripts en time-outs.
Voor conversie is het dubbel pijnlijk: het slotje verdwijnt, vertrouwen zakt en formulieren, betaalmodules of tracking breken, wat zorgt voor uitval in je funnel en minder herhaalbezoek. Kortom, mixed content kost je zichtbaarheid, snelheid én omzet.
[TIP] Tip: Detecteer mixed content met de console en vervang onveilige HTTP-bronnen.
Mixed content opsporen en analyseren
Je begint met je browser: open DevTools en check Console, Network en het Security-tabblad om exact te zien welke http-urls geladen of geblokkeerd worden en vanaf welke bron ze komen (pagina, script, stylesheet of iframe). Draai vervolgens een sitebrede crawl met een scanner die mixed content logt, zodat je ook dieperliggende templates en oude pagina’s meepakt. Combineer dat met een zoekactie naar “http://” in je code, thema’s en database, want hardcoded links zijn vaak de oorzaak. Lighthouse en het Issues-paneel geven aanvullende signalen, net als server- en CDN-logs waarop je filtert op outbound http-verkeer.
Voor een grondige analyse zet je tijdelijk een Content Security Policy in Report-Only met upgrade-insecure-requests en een reporting-endpoint; zo verzamel je nette meldingen zonder direct productie te breken. Test op verschillende paginatypen (home, product, checkout, blog) en in verschillende staten (ingelogd/uitgelogd) om conditionele resources te vangen. Na fixes purge je caches en je CDN, herhaal je de crawl en automatiseer je checks in je releaseproces, zodat nieuw gemors met http direct wordt onderschept.
Snel checken met browsertools en online scanners
De snelste check start in je browser. Open DevTools, ververs met cache uitgeschakeld en kijk in de Console naar “Mixed Content”-meldingen; in het Security-tabblad zie je meteen of bronnen onveilig via http binnenkomen. In het Network-paneel voeg je de kolom Scheme toe of filter je op “http://” om alle onveilige requests te spotten, inclusief scripts, styles, fonts en iframes.
Klik door naar Initiator om te zien welke pagina, template of script de link triggert. Parallel kun je een online scanner gebruiken: plak je URL in, laat één pagina crawlen en krijg een lijst met onveilige resources, statuscodes en soms een suggestie om automatisch naar https te upgraden. Herhaal dit voor een paar representatieve paginatypes voor een snelle nulmeting.
Diepgaande analyse met logs, CSP-rapporten en crawls
Voor een volledige inventarisatie combineer je drie sporen. Begin met server- en CDN-logs: filter op http-verzoeken vanaf https-pagina’s, bekijk referrer/initiator en statuscodes om te zien welke template, plug-in of asset de call triggert. Zet daarna een Content Security Policy in Report-Only met een report-endpoint, zodat je violation-rapporten krijgt wanneer mixed content zou worden geblokkeerd; zo verzamel je bewijs zonder functionaliteit te breken.
Parallel draai je een renderende crawl die JavaScript uitvoert, ingelogde en uitgelogde states meeneemt en css-url() en inline embeds scant, zodat je ook conditionele en dieperliggende issues vangt. Koppel de crawler-output aan je log- en CSP-data, dedupliceer per template of component en prioriteer fixes op basis van traffic, kritieke gebruikerspaden en impact op vitals.
[TIP] Tip: Gebruik browserconsole; filter op mixed content en herstel onveilige bronnen.
Mixed content oplossen en voorkomen
Begin met een complete inventarisatie en vervang alle http-links door https in thema’s, templates, scripts en je database; pak zowel content als configuratie mee en voorkom herhaling door één bron van waarheid voor assets te gebruiken. Zet op de server een 301-redirect van http naar https aan, activeer HSTS (bij voorkeur met includeSubDomains en eventueel preload) en zorg dat elk subdomein en je CDN een geldig certificaat heeft. Schakel waar nodig CSP in: start met upgrade-insecure-requests om resterende http-verzoeken automatisch op te waarderen en zet, na testen, een striktere policy aan die gemengde inhoud blokkeert. Update externe scripts, widgets en font-urls naar https-varianten of kies alternatieven die wel veilig laden; let bij fonts en API-calls op juiste CORS-headers.
Maak je URL-strategie robuust met origin-relative of centraal gegenereerde https-urls, en gebruik een assetmanager die cache-busting en het juiste domein afdwingt. Na elke wijziging purge je caches en je CDN, test je kritieke paden en herhaal je een crawl. Voorkomen doe je door een CMS-linter te gebruiken die http signaleert, editors te trainen, en mixed-content checks in je CI/CD op te nemen. Zo herstel je niet alleen de huidige problemen, maar borg je structureel veiligheid, prestaties en vertrouwen.
Stappenplan: van inventarisatie naar definitieve fix
Begin met een nulmeting: gebruik DevTools, een renderende crawl en een zoekactie op “http://” in code, thema’s en database om alle bronnen te vinden. Bundel hits per template of component en prioriteer paden met hoge impact zoals checkout, login en homepage. Los vervolgens systematisch op: vervang urls door https of centraal gegenereerde veilige urls, activeer 301-redirects van http naar https, valideer certificaten op alle subdomeinen en je CDN.
Zet een CSP in Report-Only met upgrade-insecure-requests om restjes te vangen, fix die en test elke kritieke flow ingelogd en uitgelogd. Purge caches en je CDN, herhaal de crawl tot het aantal mixed-content hits nul is. Borg het resultaat met een CMS-linter, code reviews en CI-checks die http blokkeren, zet HSTS aan en maak je CSP daarna strikter om regressies te voorkomen.
Technische oplossingen: redirects, HSTS, CSP en assetbeheer
Begin met harde 301-redirects van http naar https op je webserver én aan de edge van je CDN, zodat elk verzoek direct veilig binnenkomt en duplicaat-URL’s verdwijnen. Activeer HSTS met een royale max-age, includeSubDomains en pas na grondige tests de preload-vlag, zodat browsers alleen nog https gebruiken en downgrade-aanvallen geen kans krijgen. Gebruik een Content Security Policy: start in Report-Only met upgrade-insecure-requests om restjes automatisch op te waarderen, schakel daarna over naar een striktere policy die alleen https-bronnen toestaat.
Regel assetbeheer centraal: genereer altijd absolute https-urls, vermijd protocolrelatieve links, voorzie je CDN en subdomeinen van geldige certificaten, en gebruik cache-busting en een vaste asset-host. Voor externe scripts en fonts voeg je waar nodig CORS en Subresource Integrity toe en monitor je continu op “http://” in code en build.
Structureel voorkomen: workflows, CMS-instellingen en CDN-strategie
Voorkomen begint bij je proces. Stel in je CMS standaard https in voor site- en media-urls, forceer absolute https-links en blokkeer invoer van http via validatie of een automatische upgrade bij plakken. Gebruik environment-variabelen zodat builds altijd het juiste https-origin pakken en laat een linter in staging en productie scannen op “http://”. In je workflow voeg je pre-commit hooks en CI-checks toe die http-urls afkeuren, en geef je editors duidelijke richtlijnen en een veilige embed-module.
Aan de CDN-kant regel je geldige certificaten op alle hosts, edge-redirects van http naar https, HSTS en consistente cache-keys per https-origin. Serve assets vanaf één vast, versleuteld domein met versiebeheer en cache-busting, en monitor continu met CSP-rapportage om regressies meteen te spotten.
Veelgestelde vragen over mixed
Wat is het belangrijkste om te weten over mixed?
Mixed content ontstaat wanneer een HTTPS-pagina onveilige HTTP-resources laadt. Browsers tonen waarschuwingen of blokkeren assets. Actieve mixed content (scripts, iframes) is riskanter dan passieve (afbeeldingen). Het schaadt beveiliging, prestaties, SEO en conversie.
Hoe begin je het beste met mixed?
Begin met een snelle check: open de DevTools, bekijk het slotje en de Console voor mixed-contentmeldingen. Scan je site met online tools. Prioriteer actieve resources. Leg daarna redirects, HSTS, CSP en centraal assetbeheer vast.
Wat zijn veelgemaakte fouten bij mixed?
Veelgemaakte fouten: alleen links fixen maar templates, CMS-velden en CDN-origin vergeten; derde-partydiensten niet upgraden; HSTS en CSP onvoldoende configureren; geen logs of CSP-rapporten monitoren; tijdelijke workarounds laten staan; crawls of regressietests overslaan.