理解`target=“_blank“ 属性的使用`

自从我了解到超文本链接的target="_blank"后，我逐渐明白了它在构建可访问性和用户便利性方面的作用。其主要目的是在新标签页中打开链接，这对于保持用户对原始页面的参与度可能是有益的。然而，我了解到它并非在所有情况下都适用，并且存在重大的安全考虑因素。让我们更深入地探讨何时使用target="_blank"，以及它的缺点。

target="_blank"的目的

HTML 锚点（<a>）标签中的target="_blank"属性指示浏览器在新标签页中打开链接的文档。这可以通过允许用户不间断地继续浏览原始页面来增强用户体验。以下是一个基本示例：

 <a href="https://www.learnmore.com" target="_blank">了解更多</a>

target="_blank"的适当使用场景

最初，我在我参与的每个项目中的每个<a>元素上都使用target="_blank"。事实证明，这不应该这样使用，因为有些页面不需要在另一个标签页中打开。以下是使用target="_blank"有意义的情况：

外部链接：指向外部网站的链接是target="_blank"的主要候选对象，因为它们会将用户带离您的网站。在新标签页中打开这些链接可以让用户轻松返回您的网站而不丢失其位置。 补充信息：如果链接提供补充当前内容的附加信息，在新标签页中打开它可能会有所帮助。例如，指向词汇表术语或相关文章的链接，以增强对当前页面内容的理解。 表单和文档：指向表单、文档或其他可下载内容的链接通常受益于在新标签页中打开。用户可以下载或填写表单而无需离开当前正在查看的页面。

然而，并非所有链接都需要在新标签页中打开。以下是一些不应使用target="_blank"的示例：

内部链接：在同一站点内导航的链接通常不应使用target="_blank"。这些链接应帮助用户无缝地在站点内移动，而不会分散他们的浏览体验。 导航链接：菜单项或导航链接通常应在同一标签页中打开，以保持连贯的用户体验。

使用target="_blank"的缺点 虽然target="_blank"可能有益，但它也引入了潜在的安全漏洞：

安全风险：主要风险之一是标签劫持。当使用target="_blank"打开的新标签页可以操纵原始页面，可能将其重定向到恶意站点时，就会发生这种情况。这可能被用于网络钓鱼攻击。

用户控制：覆盖用户偏好可能具有侵入性。用户通常更喜欢使用其浏览器设置或快捷键来决定链接如何打开。

使用noopener和noreferrer解决安全问题 为了减轻与target="_blank"相关的安全风险，使用rel="noopener noreferrer"属性至关重要：

noopener：这可以防止新页面能够访问window.opener属性，从而阻止对原始页面的潜在操纵。这是防范标签劫持的关键防御措施。

noreferrer：此属性确保新页面不会收到有关引用页面的任何信息。虽然这可能不太关键，但它增加了另一层隐私和安全性。

以下是您应该如何构建链接以增强安全性的方式： <a href="https://www.example.com" target="_blank" rel="noopener noreferrer">访问示例</a>

通过结合noopener和noreferrer，您可以保护您的网站和用户免受潜在威胁，同时仍然提供target="_blank"的好处。

查看我之前的文章，我在那里谈到了其他target属性值。