target="_Blank"属性的安全漏洞

HTML 超链接标记允许您创建一个元素，单击该元素可以引用网页上的其他文档或部分。超链接是用 HTML 标记定义的，如下所示：<a> ``` <a href="/about">About Page"></a> ``` # HTML 目标属性 虽然该属性指定链接的目标地址，但另一个常见属性是用于指定打开链接的目标地址的位置。您可以在以下位置打开链接 + _self - 这将在单击链接的同一窗口或选项卡中打开链接（PS：这是所有链接的默认值） + _blank - 这将在新窗口或选项卡中打开链接 + _parent - 这将在下一级父框架中打开链接。如果没有父级，它的行为类似于_self + _top - 这将在窗口最顶部的框架中打开链接。如果没有顶部框架，它的行为类似于_self 大多数情况下，您会发现自己只使用_blank target 属性，因为 和 标签在 HTML5 中已经过时。 # 漏洞 每个新窗口都有打开程序 API，当您单击带有 的外部链接时，新选项卡有一个指向父窗口的窗口，并且可以在与父窗口相同的进程上运行（除非启用了站点隔离）。因此，当用户单击外部链接时，打开的新页面可以控制父文档的窗口对象。 由于新页面可以使用该属性访问父窗口对象，因此它可以将外部页面重定向到恶意 URL，这会使您的网站或用户容易受到攻击，并受到数据盗窃或其他网络钓鱼攻击（并且由于用户已经信任您的网站，因此他们很容易成为受害者）。 ``` window.opener.location = newURL ``` # 解决方案 使用 target blank 属性时，请确保添加属性以避免利用每个页面上可用的 window.opener API。 在父元素上添加该属性将允许新窗口在单独的进程中运行，并阻止设置 window.opener 引用，这意味着该属性将等于 null。 ``` var newWindow = window.open(); newWindow.opener = null; newWindow.location = url; ``` 当用户从 URL A 移动到 URL B 时，URL B 仍会收到有关上一个网址 （URL A） 的信息（如流量数据），即使该网址归其他用户所有。在父级上添加属性将阻止在两个位置之间发送请求“反向链接”标头信息。rel="noreferrer" + rel=“noopener” 保护 window.opener 属性从外部窗口访问的新窗口，并确保它在单独的进程中运行。 + rel=“noreferrer” 与 noopener 类似，只是它还会阻止目标窗口看到引用的 URL。 ``` <a href="https://hashnode.com/devblog" target="_blank" rel="noopener noreferrer"> Create your Devblog today </a> ``` 通过将 or 属性添加到外部链接，它将防止新选项卡利用 JavaScript 属性，从而提高站点的安全性和性能（由于新窗口在单独的进程上运行，因此其上的任何脚本都不会影响引用窗口或父窗口）。