通过 HTML 超链接标记,可以创建一个元素,点击该元素就可以引用网页上的另一个文档或部分。超链接使用 HTML <a>
标签定义,如下所示:
<a href="/about">About Page"></a>
href
属性指定链接的目标地址,另一个常见的属性是target
,target
属性是 <a>
标签的一个可选属性,它用于指定链接的目标窗口或框架。这个属性可以控制点击链接后在哪个窗口或标签页中打开链接的目标地址。以下是 target
属性的一些常见值以及它们的作用:
1、_self:
默认值,链接将在当前窗口或标签页中打开。
<a href="example.html" target="_self">Link</a>
2、_blank:
链接将在新的标签页或窗口中打开。这是最常用的值之一,特别是在需要保持当前页面不变的情况下。
<a href="example.html" target="_blank">Link</a>
3、_parent:
链接将在父框架集中打开,如果没有父框架集,则行为类似于 _self
。
<a href="example.html" target="_parent">Link</a>
4、_top:
链接将加载到整个浏览器窗口中,清除所有框架。
<a href="example.html" target="_top">Link</a>
5、自定义名称:
可以使用任何自定义字符串作为 target
值,这样的值通常用于标识特定的框架或窗口。如果不存在具有该名称的窗口或框架,则会根据浏览器的行为打开一个新的窗口或标签页。
<a href="example.html" target="myFrame">Link</a>
_blank
时,考虑到安全性和用户体验,推荐使用 rel="noopener"
或 rel="noopener noreferrer"
来增加安全性,避免潜在的 window.opener
漏洞。_parent
和 _top
时要小心,因为它们的行为依赖于页面是否嵌套在框架中。通过合理地使用 target
属性,可以更好地控制页面导航体验,并提高应用的安全性。
window.opener
安全漏洞当一个新窗口或标签页被打开时,新页面可以访问到打开它的原始窗口(即 opener)。如果新窗口中的 JavaScript 代码能够与 opener 进行交互,那么就存在潜在的安全风险,包括但不限于以下几种情况:
跨站脚本攻击 (XSS): 如果一个恶意网站能够诱使用户点击其提供的带有 target="_blank"
的链接,那么该网站就可以利用这个新打开的窗口来执行脚本,这可能会对用户的个人信息造成威胁。
DOM 操纵: 新窗口可以修改 opener 页面的 DOM,这可能导致用户数据被窃取或者页面功能被篡改。
社会工程学攻击: 攻击者可以创建一个看似可信的新窗口,并通过与 opener 的交互来欺骗用户进行某些操作,例如提供敏感信息。
为了防止上述安全问题的发生,有几种方法可以减少这些风险:
1、禁用 window.opener
:
可以通过设置新窗口的 noopener
属性来避免这种情况。HTML5 引入了一个 rel
属性值 noopener
,它可以用来关闭从新窗口访问 opener 的权限。
<a href="url" target="_blank" rel="noopener">Link</a>
2、使用 rel="noreferrer"
:
使用 noreferrer
可以阻止 HTTP referer 头的发送,从而保护 opener 的地址不被泄露给第三方站点。但是需要注意的是,noreferrer
不会阻止对 opener 的访问。
<a href="url" target="_blank" rel="noreferrer">Link</a>
3、组合使用 noopener
和 noreferrer
【建议】:
为了更安全,可以同时使用这两个属性。
<a href="url" target="_blank" rel="noopener noreferrer">Link</a>
4、JavaScript 解决方案:
在某些情况下,可能需要在 JavaScript 中进行额外的检查来确保安全性,比如验证 opener 是否来自可信源。
通过以上方法,可以有效地提高使用 target="_blank"
打开新窗口或标签页时的安全性。务必注意,安全是一个持续的过程,应该始终关注最新的安全实践和漏洞报告。