Links naar cross-origin-bestemmingen zijn onveilig

Wanneer u met het kenmerk target="_blank" een koppeling maakt naar een pagina op een andere site, kunt u uw site blootstellen aan prestatie- en beveiligingsproblemen:

  • De andere pagina draait mogelijk op hetzelfde proces als uw pagina. Als de andere pagina veel JavaScript gebruikt, kan dit de prestaties van uw pagina negatief beïnvloeden.
  • De andere pagina kan toegang krijgen tot uw window met de eigenschap window.opener . Dit kan de andere pagina in staat stellen uw pagina om te leiden naar een schadelijke URL.

Door rel="noopener" of rel="noreferrer" te voegen aan uw target="_blank" -links, voorkomt u deze problemen.

Hoe de Lighthouse cross-origin bestemmingsaudit faalt

Lighthouse markeert onveilige links naar bestemmingen met een andere oorsprong:

Lighthouse-audit die onveilige links naar bestemmingen met een andere oorsprong aantoont.

Lighthouse gebruikt het volgende proces om links als onveilig te identificeren:

  1. Verzamel alle <a> -tags die het kenmerk target="_blank" bevatten, maar niet de kenmerken rel="noopener" of rel="noreferrer" .
  2. Filter alle links naar dezelfde host.

Omdat Lighthouse links van dezelfde host filtert, is er een randgeval waar u op moet letten wanneer u op een grote site werkt. Als een pagina een target="_blank" -link naar een andere pagina op uw site bevat zonder rel="noopener" te gebruiken, zijn de prestatie-implicaties van deze audit nog steeds van toepassing. U ziet deze links echter niet in uw Lighthouse-resultaten.

Verbeter de prestaties van uw site en voorkom beveiligingsproblemen

Voeg rel="noopener" of rel="noreferrer" toe aan elke link die in uw Lighthouse-rapport is geïdentificeerd. Over het algemeen geldt: wanneer u target="_blank" gebruikt, voegt u altijd rel="noopener" of rel="noreferrer" toe:

<a href="https://examplepetstore.com" target="_blank" rel="noopener">
  Example Pet Store
</a>
  • rel="noopener" voorkomt dat de nieuwe pagina toegang heeft tot de eigenschap window.opener en zorgt ervoor dat deze in een afzonderlijk proces wordt uitgevoerd.
  • rel="noreferrer" heeft hetzelfde effect en voorkomt ook dat de Referer header naar de nieuwe pagina wordt verzonden.

Lees 'Cross-origin resources veilig delen' voor meer informatie.

Bronnen