noreferrer noopener 介绍

当我们使用<a>标签来创建链接时，有时候我们希望在新的标签页中打开链接，但同时又不希望打开的新标签页能够访问原有页面的window对象，这个时候就可以用到noreferrer noopener属性。

noreferrer

noreferrer是指禁止打开页面时发送HTTP Referer头。HTTP Referer是指向当前页面的来源页面的URI。如果在新的页面中做了某些操作，发现操作时浏览的网址是一个线上商店，浏览器会将你在该网站网页上的浏览状态发送给该网站。通过这种方式，网站可以收集发生在其网站上的流量信息。

通过加上noreferrer，我们就可以避免被原有页面跟踪，同时也能实现在新标签页中打开链接。下面是HTML代码片段：

<a href="https://example.com" target="_blank" rel="noreferrer">example.com</a>

在上述代码中，我们指定了链接的目标为新标签页并加上了noreferrer属性。

noopener

在原有页面和新打开的页面之间，存在一定的互动性。具体来说，可以在新标签页中执行window.opener对象，该对象在JavaScript中有很多用途。有时候，在新的页面中通过window.opener可以访问原有页面的内容，如果前者具有恶意，就可以用window.opener黑掉原有页面。

为了避免这一安全风险，我们可以使用noopener属性。下面是HTML代码片段：

<a href="https://example.com" target="_blank" rel="noopener">example.com</a>

noreferrer noopener

最后，我们来看看如何同时使用noreferrer和noopener。这样做的好处是既避免了被原有页面跟踪，也阻止了新页面访问原有页面的window.opener对象。下面是HTML代码片段：

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

在日常开发中，为了保证网站安全，我们建议在所有需要在新标签页中打开的链接上都添加noreferrer noopener属性。