Kijk uit voor Mixed-Content problemen op SSL websites

logo pdb
Backups, updates & easy restores for Joomla & Wordpress (read the review). Use coupon JOOMLASEO for €25 in free credits to try it out.

Ik voer regelmatig SEO Audits uit voor klanten. Vooral de laatste maanden zie ik veel fouten bij SSL-implementaties. De financiele drempel om een SSL certificaat te installeren is de laatste tijd veel lager geworden, vooral door de beschikbaarheid van gratis Let's Encrypt certificaten. Er komt echter wel meer bij kijken dan simpelweg het certificaat installeren...

Ik zie vooral fouten in de volgende categorieen:

  1. Er wordt alleen een SSL-certificaat geinstalleerd, maar het verkeer wordt niet over https geforceerd
  2. Na installatie wordt simpelweg al het verkeer over https geforceerd, zonder te checken of dat wel 100% goed gaat

Laten we beide problemen eens onder de loep nemen:

SSL toegang afdwingen

Als je een regelmatige bezoeker van mijn blog bent kun je wel raden waarom je je verkeer echt over https moet afdwingen na installatie van een SSL certificaat: beide versies van je website zijn anders gewoon benaderbaar, met en zonder SSL. Oftwel: http://example.com en https://example.com werken beide. Ten eerste levert dit duplicate content op (zelfde artikel op 2 URL's), maar daarnaast komen bezoekers willekeurig wel en niet op een SSL beveiligde URL uit, en dat is geen volledige security natuurlijk. De oplossing is gemakkelijk: dwing https af in je Algemene Instellingen (server tabje) (lees mijn eerdere blog over dit onderwerp):

global configuration ssl

Vermijd Mixed-Content waarschuwingen in je browser

Tot hier gaat het bij de meeste webdesigners wel goed. Dan werpen ze een snelle blik op de homepage, zien een groen slotje en denken dat alles goed staat. Dat kan, maar vaak is dat niet per definitie het geval, vooral bij websites die al wat langer bestaan. Als je website SSL beveiligd is, moeten ook alle bronnen benodigd voor het laden van de site, zowel intern (plaatjes, CSS) als extern (Google fonts, Analytics scripts, enzovoorts), over een HTTPS-verbinding geladen worden. Zolang deze bronnen met een relatief pad geladen worden gaat dat wel goed: als de site zelf over HTTPS geladen wordt, geldt dat automatisch voor de bronnen die met een relatief pad geladen worden.

logo 500

Er is echter een probleem als je ooit zaken geladen hebt met een absoluut pad. Stel dat je ooit een plaatje hebt ingevoerd in een artikel met een volledig pad, bijvoorbeeld: http://example.com/images/plaatje.jpg. Ook als je de site zelf op HTTPS zet, zal dit plaatje vanaf HTTP geladen worden. Je browser zal dan niet meer een groen slotje tonen:

unsafe browsing

Als je op zo'n pagina een formulier probeert in te vullen kunnen de waarschuwingen zelfs nog extremer worden, wat je natuurlijk te allen tijde moet vermijden. Dit noemen we nu een Mixed-Content probleem: HTTP-content op een HTTPS-website.

Oorzaken voor Mixed-Content

Naast de genoemde hardcoded plaatjes zijn er nog wel meer oorzaken te noemen:

  • Embedded video's van Youtube.Tot een paar jaar geladen was de standaard embed code van Youtube niet-veilig (HTTP). Als je nog dit soort video's hebt kun je dit makkelijk oplossen: voeg gewoon een 's' toe na HTTP, de code blijft dan gewoon netjes werken. Hetzelfde geldt voor allerlei andere embed en iframe codes.
  • Slechte templates met hardcoded referenties. Dat kunnen zelfs lokale referenties naar CSS en Javascript bestanden zijn, maar vaak ook externe, naar bijvoorbeeld Google Webfonts of Jquery libraries. Je zult dan zelf de template moeten (laten) bijwerken.
  • Slechte formulier extensies die HTTP Javascript validatie bestanden laden. Dit heb ik meerdere malen gezien: vraag dan de developer dit te corrigeren.
  • Allerlei scripts voor statiestieken en tracking scripts
  • En allerlei andere exotische varianten

Hoe vind ik alle issues?

Dit is vaak het probleem. Als je een kleine website met slechts enkele tientallen pagina's hebt is het nog wel redelijk makkelijk: loop ze gewoon allemaal even snel na en let op het groene slotje. Dit is alleen niet te doen als je een paar honderd of zelfs meer URL's hebt. Gelukkig zijn er een paar handige tooltjes voor, die je ook nog eens gratis kunt gebruiken:

Screaming Frog SEO Spider

Ik heb dit tooltje al vaak behandeld. Het scant je sites op allerlei SEO issues en dus ook op Mixed-Content. Je vindt deze optie onder de Reports sectie:

insecure content screaming frog

Je krijgt dan een CSV-bestand met alle URL's waarop problemen aangetroffen zijn. Het tooltje is gratis tot 500 URL's en je kunt het hier downloaden.

Website Auditor van SEO Powersuite

Deze gebruik ik tegenwoordig zelf veel.Het biedt grofweg hetzelfde als Screaming Frog,maar de interface is een stuk vriendelijker en overzichtelijker. Ook kun je de Mixed-Content URL's direct in het overzicht zien, zonder ze eerst te moeten downloaden. Je vindt ze dan onder HTTPS pages with mixed content issues:

website auditor

Op deze manier vind je snel al je URL's met fouten. Het is gratis te gebruiken in de basisversie. Je kunt je werk alleen niet opslaan, maar als je dat wel wilt kun je de Pro-versie kopen, die is ook heel betaalbaar. Downloaden kan hier (het hele pakket bevat 4 tools, waarvan de Website Auditor er een is).

Nu je de lijst met URL's hebt moet je tenslotte nog de resources opsporen die het probleem geven. Dat gaat vrij makkelijk: Ga naar de URL en open je Chrome Inspector. Je ziet dan direct een foutmelding van de Mixed-Content:

chrome inspector

Vervang van de Mixed-Content items simpelweg het HTTP-deel in HTTPS en het probleem is opgelost. Met een beetje mazzel heb je maar een paar issues en ben je zo klaar. In sommige gevallen zal je dit meer moeite kosten. Stel dat je ontzettend veel losse items met problemen hebt, dan moet je een meer systematische oplossing zoeken. Ik doe dit zelf nog al eens Quick & Dirty met de handige tooltjes van Regularlabs. Met DBreplacer of ReReplacer kun je soms op een slimme manier honderden items oplossen. Wees wel voorzichtig en vervang dan niet simpelweg HTTP door HTTPS, anders pik je mogelijk net te veel op. Als ik bijvoorbeeld alleen problemen met plaatjes heb gebruik ik als zoekstring http://example.com/images/ met als vervang-string https://example.com/images.

Als je dit netjes doet heb je hopelijk op al je URL's een mooi slotje en is Google ook 100% tevreden ;)

Over deze site

Joomlaseo.com is volledig gebouwd en geschreven door Simon Kloostra, SEO Specialist en Webdesigner uit Utrecht. Ik heb ook een boek geschreven en blogs voor bedrijven als OStraining, TemplateMonster, SEMrush en dergelijke.