Wanneer u met het kenmerk target="_blank"
naar een pagina op een andere site linkt, kunt u uw site blootstellen aan prestatie- en beveiligingsproblemen:
- De andere pagina kan volgens hetzelfde proces worden uitgevoerd als uw pagina. Als de andere pagina veel JavaScript gebruikt, kunnen de prestaties van uw pagina eronder lijden.
- De andere pagina heeft toegang tot uw
window
met de eigenschapwindow.opener
. Hierdoor kan de andere pagina uw pagina omleiden naar een kwaadaardige URL.
Door rel="noopener"
of rel="noreferrer"
aan uw target="_blank"
-links toe te voegen, vermijdt u deze problemen.
Hoe de Lighthouse cross-origin bestemmingsaudit mislukt
Lighthouse signaleert onveilige links naar cross-origin-bestemmingen:
Lighthouse gebruikt het volgende proces om links als onveilig te identificeren:
- Verzamel alle
<a>
-tags die hettarget="_blank"
attribuut bevatten, maar niet derel="noopener"
ofrel="noreferrer"
attributen. - Filter eventuele links naar dezelfde host eruit.
Omdat Lighthouse links naar dezelfde host uitfiltert, is er een randgeval waar u rekening mee moet houden als u op een grote site werkt: als een pagina een target="_blank"
-link naar een andere pagina op uw site bevat zonder rel="noopener"
, zijn de prestatie-implicaties van deze audit nog steeds van toepassing. U ziet deze links echter niet in uw Lighthouse-resultaten.
Hoe u de prestaties van uw site kunt verbeteren en beveiligingsproblemen kunt voorkomen
Voeg rel="noopener"
of rel="noreferrer"
toe aan elke link in uw Lighthouse-rapport. Over het algemeen moet u, wanneer u target="_blank"
gebruikt, altijd rel="noopener"
of rel="noreferrer"
toevoegen:
<a href="https://examplepetstore.com" target="_blank" rel="noopener">
Example Pet Store
</a>
-
rel="noopener"
voorkomt dat de nieuwe pagina toegang heeft tot de eigenschapwindow.opener
en zorgt ervoor dat deze in een afzonderlijk proces wordt uitgevoerd. -
rel="noreferrer"
heeft hetzelfde effect, maar voorkomt ook dat deReferer
header naar de nieuwe pagina wordt verzonden. Zie Linktype "noreferrer" .
Zie het bericht Cross-origin-bronnen veilig delen voor meer informatie.