In de wereld van webontwikkeling vormen HTML-koppelingen de ruggengraat van het navigeren tussen webpagina’s. Maar zelfs deze fundamentele elementen kunnen beveiligingsrisico’s met zich meebrengen. Dat is waar de rel=“noopener noreferrer” tag om de hoek komt kijken, die een beschermingslaag biedt voor je website en zijn bezoekers.

Wat zijn de onderdelen van deze tag?

Laten we de twee componenten van deze tag eens uit elkaar halen:

  • noopener: Dit onderdeel pakt een beveiligingslek aan dat ontstaat wanneer je links opent in nieuwe tabbladen of vensters met het target=”_blank” attribuut. Een kwaadaardige website die op deze manier wordt geopend, kan gedeeltelijke controle krijgen over het oorspronkelijke venster (het venster waarin je op de link hebt geklikt). Het noopener attribuut voorkomt dit door de verbinding tussen het nieuw geopende tabblad en de oorspronkelijke pagina te verbreken.
  • noreferrer: Dit deel gaat over privacy. Als je op een link klikt, krijgt de website waar je terechtkomt meestal informatie over waar je vandaan komt (de referrer). Het noreferrer attribuut verbergt deze referrer informatie. Dit kan handig zijn als je linkt naar externe sites die je misschien niet per se goedkeurt en als je de privacy van je bezoekers wilt beschermen.

Waarom “noopener noreferrer” gebruiken?

  1. Beveiliging: Deze tag wordt voornamelijk gebruikt om de beveiliging te verbeteren. Door te voorkomen dat nieuw geopende tabbladen of vensters de oorspronkelijke pagina controleren, bescherm je je gebruikers tegen mogelijke exploits.
  2. Privacy: Als je geen referrer informatie wilt doorgeven aan externe websites, zorgt het noreferrer attribuut ervoor dat de browsegeschiedenis van je bezoekers een beetje meer privé blijft.
  3. Prestaties (indirect): Hoewel het geen direct effect heeft, kan noopener leiden tot kleine prestatieverbeteringen. Zonder die verbinding met de oorspronkelijke pagina kan het nieuwe tabblad marginaal sneller laden.

De tag gebruiken

Het opnemen van rel=”noopener noreferrer” in je HTML-links is eenvoudig:

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Visit Example Website</a>

WordPress Opmerking: WordPress voegt deze tag automatisch toe aan alle koppelingen die je instelt om te openen in een nieuw tabblad of venster en biedt zo ingebouwde bescherming.

Moet ik het altijd gebruiken?

Hoewel het over het algemeen als een goede gewoonte wordt beschouwd om rel=”noopener noreferrer” te gebruiken op externe links, zijn er enkele uitzonderingen:

  • Vertrouwde websites: Als je linkt naar bekende, betrouwbare websites, mag je de tag weglaten.
  • Interne koppelingen: Je hoeft deze tag niet te gebruiken als je naar pagina’s binnen je eigen website linkt.

Invloed op SEO

Het goede nieuws is dat het gebruik van rel=”noopener noreferrer” geen directe negatieve invloed zou moeten hebben op de zoekmachine optimalisatie (SEO) van je website. Dat gezegd hebbende, kan de noreferrer component het moeilijker maken om verwijzingsverkeer bij te houden in analyseprogramma’s als je veel vertrouwt op die gegevens.

De rel=”noopener noreferrer” tag lijkt misschien een klein detail, maar hij speelt een belangrijke rol in de beveiliging van websites en de privacy van gebruikers. Door deze tag te begrijpen en toe te passen, creëer je een veiligere en meer verantwoorde online ervaring.

De basis van rel=”noopener noreferrer” tag begrijpen

HTML-koppelingen en het kenmerk target=”_blank

De basis van het navigeren op het web ligt in de bescheiden HTML-link, vaak weergegeven door de tag . Laten we hem eens uit elkaar halen:

  • De basisstructuur: <a href=”https://www.examplewebsite.com”>Klik hier voor Voorbeeldwebsite</a>
  • href specificeert de bestemming van de link
  • De tekst tussen de openende <a > en sluitende </a > tags is wat de gebruiker ziet en waar hij op klikt.
  • De magie van target=”_blank”: Dit attribuut vertelt de browser om de link in een nieuw tabblad of venster te openen, wat een soepelere gebruikerservaring biedt als je bezoekers op je site wilt houden terwijl ze extra bronnen kunnen verkennen.

Mogelijke veiligheidsrisico’s

Hoewel handig, kan het target=”_blank” attribuut, wanneer het zonder voorzorgsmaatregelen wordt gebruikt, onbedoeld een kans openen voor kwaadwillende actoren. Dit is waarom:

De eigenschap window.opener: In een normaal scenario hebben websites beperkte toegang tot andere tabbladen of vensters die je open hebt staan. Als er echter een nieuw tabblad wordt geopend met target=”_blank”, zorgt een speciale JavaScript-eigenschap genaamd window.opener voor een koppeling terug naar het oorspronkelijke tabblad of venster.

De risico’s van manipulatie: Mocht een kwaadaardige website toegang krijgen tot window.opener, dan heeft het de potentie om:

  • Het oorspronkelijke tabblad omleiden naar een schadelijke website (phishing, verspreiding van malware, enz.)
  • Ongewenste inhoud of advertenties op je website plaatsen
  • Misleidende pop-ups of overlays lanceren om bezoekers te misleiden
  • Maak gebruik van een klasse aanvallen die bekend staat als “tabnabbing”.

Verwijzersinformatie en analytics

Elke keer dat je op een link klikt om van de ene website naar de andere te gaan, stuurt je browser meestal een stukje informatie dat bekend staat als de “referrer”. Dit vertelt de bestemmingswebsite waar je vandaan komt. Dit is waarom het belangrijk is:

Inzicht in bezoekersverkeer: Referrer gegevens zijn van onschatbare waarde voor website analytics. Het helpt je:

  • Bekijk welke websites en backlinks bezoekers jouw kant op sturen.
  • Volg het succes van marketingcampagnes.
  • Begrijp hoe mensen door je website navigeren.

Mogelijke privacyoverwegingen: Hoewel het nuttig is voor analyses, kan informatie over verwijzers in bepaalde situaties ook privacyproblemen opleveren:

  • Gevoelige websites (bijv. gezondheidszorg, financiële instellingen) willen misschien niet dat de referrer URL openlijk kan worden doorgegeven.
  • Gebruikers die bang zijn dat hun surfgeschiedenis wordt achterhaald, geven er misschien de voorkeur aan om de gegevens die websites over hen ontvangen te beperken.

Met een basis in HTML links, potentiële kwetsbaarheden en referrer informatie, zijn we klaar om te onderzoeken hoe “noopener” en “noreferrer” helpen om deze risico’s te beperken.

Hoe “noopener” en “noreferrer” werken

De “noopener” label

  • De kernfunctie: De “noopener” tag verbreekt de JavaScript-verbinding (tot stand gebracht via window.opener) tussen het nieuwe tabblad/venster en de oorspronkelijke website. Dit is een cruciale beveiligingsmaatregel.
  • Tabbladmanipulatie voorkomen: Door “noopener” te gebruiken, vertel je de browser in feite: “Geef de nieuwe website geen mogelijkheid om te knoeien met het oorspronkelijke tabblad.” Dit zorgt ervoor dat je bezoekers niet onverwacht worden omgeleid of dat de inhoud op je site wordt gewijzigd.
  • Codevoorbeeld:
<a href="https://externalsite.com" target="_blank" rel="noopener">Visit External Site</a>
  • Voordelen die verder gaan dan beveiliging: “noopener” kan ook de prestaties van websites subtiel verbeteren. Door deze potentiële controle te blokkeren, weet de browser dat hij niet zoveel bronnen hoeft te besteden aan het controleren van interacties tussen de tabbladen.

De “noreferrer” label

Referrer informatie beheren: De “noreferrer” tag instrueert de browser om de referrer informatie achter te houden wanneer een gebruiker op de link klikt. Dit heeft invloed op het bijhouden van website analytics.

Privacy en gebruikssituaties: Hier lees je wanneer je “noreferrer” zou kunnen gebruiken:

  • Linken naar gevoelige websites waar anonimiteit belangrijk is.
  • Werk samen met websites waar je de herkomstgegevens van het verkeer privé wilt houden.
  • Voorrang geven aan gebruikersprivacy boven diepgaande verkeersanalyse

Code voorbeeld

Externe site bezoeken

De tags combineren

Voor maximale bescherming en flexibiliteit is het standaard om “noopener” en “noreferrer” samen te combineren:

Maximale beveiliging: Deze aanpak pakt zowel het risico van tabbladmanipulatie als mogelijke privacy- of analyseproblemen in één enkele stap aan.

Code voorbeeld

<a href="https://externalsite.com" target="_blank" rel="noopener noreferrer">Visit External Site</a>

WordPress, Elementor en “noopener noreferrer”.

WordPress Standaard Gedrag

WordPress, dat bekend staat om zijn inzet voor beveiliging, neemt een proactieve houding aan ten opzichte van de “noopener noreferrer” tags. Dit is wat je moet weten:

  • Automatisch opnemen: Sinds WordPress versie 5.1 wordt “noopener noreferrer” automatisch toegevoegd aan alle links die zijn ingesteld om te worden geopend in een nieuw tabblad of venster. Dit zorgt ervoor dat zelfs website-eigenaren zonder diepgaande technische kennis beschermd zijn tegen veelvoorkomende kwetsbaarheden.

Elementor Link Instellingen

Elementor, de toonaangevende WordPress websitebouwer, biedt intuïtieve visuele bediening om linkbeheer te stroomlijnen, inclusief de optie om links in nieuwe tabbladen te openen:

  • Gebruiksgemak: Wanneer je in de editor van Elementor de optie “Openen in nieuw tabblad” inschakelt voor een link (knoppen, tekst, afbeeldingen), voegt Elementor automatisch “noopener noreferrer” in op de achtergrond.
  • Gebruiksvriendelijke beveiliging: Met deze integratie kunnen gebruikers van Elementor een veiligere en gebruiksvriendelijkere webervaring creëren zonder handmatig HTML-code te bewerken.

SEO overwegingen en best practices

“nofollow” vs. “noreferrer”

Hoewel beide tags invloed hebben op links, is het cruciaal om te onthouden dat ze verschillende doelen dienen:

“nofollow” (rel=”nofollow”): Deze tag instrueert zoekmachines vooral om de link niet te volgen en geen “link juice” (rankingkracht) door te geven aan de bestemmingswebsite. Het wordt vaak gebruikt voor:

  • Betaalde links of gesponsorde inhoud
  • Onbetrouwbare websites of door gebruikers gegenereerde opmerkingen

“noreferrer”: Deze tag is gericht op beveiliging en verbergt referrer-informatie voor privacy en bescherming van de gebruiker tegen exploits.

Invloed op verwijzingsverkeer

Begrijpen hoe “noreferrer” analytics kan beïnvloeden is de sleutel tot het behouden van nauwkeurige inzichten in je websiteverkeer:

Toewijzing van verkeer: Omdat “noreferrer” de bronwebsite verhult, kunnen deze bezoeken verschijnen als “direct verkeer” in analyseplatforms zoals Google Analytics, waardoor het moeilijker wordt om te achterhalen waar de kliks vandaan komen.

Oplossingen en workarounds:

  • UTM-parameters: Zorgvuldig gemaakte links met UTM-codes helpen trackinggegevens te behouden, zelfs met “noreferrer” op zijn plaats.
  • Geavanceerde analyseplatforms: Sommige oplossingen kunnen automatisch bekende verwijzingsbronnen herkennen.

Beveiliging en functionaliteit in evenwicht brengen

De sleutel is om weloverwogen beslissingen te nemen over wanneer je voorrang geeft aan beveiliging boven een nauwgezette toewijzing van verkeer:

  • Geef prioriteit aan veiligheid: Gebruik altijd “noopener noreferrer” op externe links om je bezoekers en de reputatie van je website te beschermen.
  • Strategisch gebruik van “noreferrer”: Als gedetailleerde verwijzingsgegevens onontbeerlijk zijn voor bepaalde links (bijv. diepgaande campagnetracking), weeg dan de potentiële risico’s af voordat je de “noreferrer” tag verwijdert.
  • Interne links: Omdat je je eigen website beheert, heb je om veiligheidsredenen meestal geen “noopener noreferrer” nodig op interne links.

Wanneer “noopener noreferrer” gebruiken?

Externe koppelingen

  • De gouden regel: Als een best practice voor beveiliging pas je altijd “noopener noreferrer” toe op alle links die leiden naar websites die je niet bezit of beheert. Dit geldt voor links in je blogberichten, zijbalken, navigatie, enz.
  • Waarom het belangrijk is: Je kunt de beveiligingspraktijken of intenties van elke externe website niet garanderen. Proactieve bescherming minimaliseert het risico dat je site en bezoekers in gevaar komen door kwetsbaarheden die je niet kunt beïnvloeden.

Affiliate links

Beveiliging en analyse: Affiliate links, hoewel noodzakelijk voor monetariseringsstrategieën, vereisen extra aandacht:

  • Veiligheid: Bescherm jezelf en je bezoekers tegen mogelijke manipulatie door affiliatepartners.
  • Volgen: Gebruik UTM-parameters naast “noreferrer” om campagnetrackinggegevens te behouden en tegelijkertijd prioriteit te geven aan beveiliging.

Door gebruikers gegenereerde inhoud

  • Het belang van waakzaamheid: Als je site commentaren, forums of andere vormen van door gebruikers ingezonden inhoud met links toestaat, kunnen kwaadwillenden schadelijke links invoegen.
  • Geautomatiseerde bescherming: Veel websiteplatforms kunnen automatisch “noopener noreferrer” toevoegen aan door gebruikers gegenereerde links. Controleer je instellingen en gebruik zo nodig plugins om deze beveiligingslaag af te dwingen.

Onbetrouwbare websites

  • Ga voorzichtig te werk: Als je naar een website linkt waar je niet zeker van bent, zelfs als het voor informatieve/vergelijkende doeleinden is, biedt “noopener noreferrer” een extra veiligheidslaag.
  • Prioriteit geven aan de reputatie van je site: Door je bezoekers te beschermen tegen mogelijke gevaren, versterk je het vertrouwen dat ze in je website hebben.

Voorbij “noopener noreferrer”

Aanvullende linkgerelateerde beveiligingsattributen

Hoewel “noopener noreferrer” sterren van linkbeveiliging zijn, is het de moeite waard om andere kenmerken voor specifieke gebruikssituaties te noemen:

  • rel=”ugc” Voor links naar door gebruikers gegenereerde inhoud geeft deze tag aan zoekmachines aan dat je de gelinkte inhoud niet per se onderschrijft.
  • rel=”gesponsord”. Deze wordt gebruikt voor betaalde of gesponsorde links om transparantie te garanderen voor zowel gebruikers als zoekmachines.

Conclusie

In het onderling verbonden weblandschap stelt het begrijpen van ogenschijnlijk eenvoudige concepten als “noopener noreferrer” je in staat om een veiligere en meer geoptimaliseerde online ervaring te creëren. Door prioriteit te geven aan verantwoordelijke linkingpraktijken bescherm je je website, je bezoekers en je online reputatie.