rel="noreferrer", rel="noopener"以及rel="nofollow"的区别

在编写网页代码的时候，你可能已经听说过或使用了"rel"属性。"rel"属性用于指定链接与当前文档之间的关系。在本文中，我们将讨论三个用于指定关系的常见值：rel="noreferrer", rel="noopener"以及rel="nofollow"。

rel="noreferrer"

当我们在链接中同时使用了rel="nofollow"和target="_blank"属性时，当用户点击链接时，浏览器会在新标签页中打开该链接，并将该标签页与当前页面的会话进行共享。这意味着，如果在新标签页中使用了敏感信息，那么可能会有一些安全风险。为了避免这种情况，我们可以同时使用rel="noreferrer"属性。

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

当用户点击链接时，浏览器会在新标签页中打开该链接，但是会禁用该标签页的referrer信息。

如果你希望禁用当前站点的referrer，可以只写rel="noreferrer"。

rel="noopener"

当你在链接中使用了target="_blank"时，新的标签页会与当前标签页共享会话。而且，如果一个网站使用了JavaScript来控制新的标签页，那么就可能会破坏希望通过新的标签页打开链接的用户的体验。要解决这个问题，我们可以使用rel="noopener"属性。

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

rel="nofollow"

如果我们不想将某个链接的权重（PageRank）传递给被链接的网页，我们可以使用rel="nofollow"属性。这种情况通常出现在评论系统、广告，或者用户生成的内容中。

<a href="https://www.example.com" rel="nofollow">Click Here</a>

通常而言，你应该使用rel="noreferrer noopener"来打开新标签页，而不是使用rel="noopener"，因为前者比后者提供的安全保护更严格。