在新选项卡中显示链接【html中 target=“_blank“】

原因

如果在同一个选项卡中打开链接，那么有可能很难返回到第一页。所以需要考虑在新选项卡中显示链接。

方法

可以通过在 HTML 中的 a 标签中指定 target 属性来指定链接的显示目的地：

<a href="链接目标URL" target="指定链接显示目标"></a>

指定链接显示目标有以下四种

• 同一选项卡中打开：_self，这是target的默认值，通常省略

• 新选项卡中打开：_blank

• 在新窗口中打开：window.open

• 在内联框架中打开：

  内联框架（iframe）是指在网页中创建一个独立区域，并在其中加载并显示其他网页等内容。

  通过a标签指定要在内联框架中显示的HTML，使用target属性赋予其专属名称，并使用iframe标签进行显示。

  常用于在同一网页内仅切换特定区域的画面，例如显示价格或菜单等场景。

  示例代码：

  <ul>
   <li><a href="sample1.html" target="sample">sample1</a></li>
   <li><a href="sample2.html" target="sample">sample2</a></li>
   <li><a href="sample3.html" target="sample">sample3</a></li>
  </ul>
  
  <div><iframe src="sample1.html" width="250" height="80" name="sample">代替内容</iframe></div>

风险

在target="_blank"和window.open两种打开方式下，如果不知道正确的设置，在新选项卡中打开链接可能会导致个人信息泄露。

风险示例："钓鱼网站攻击"

1. 恶意攻击者制作了一个伪装成大型购物网站的钓鱼网站链接②（表面看起来正常）。
2. 网站运营者在未察觉链接②是由恶意作者制作的页面的情况下予以刊登。
3. 用户点击链接②后：

• 新标签页打开了参考页面；
• 用户之后返回最初浏览的的网页①；
• 不知为何，网页①变成了某大型购物网站的登录页面；
• 用户误以为是真的，输入了账号和密码重新登录；
• 最终用户的信息被盗取。

安全措施

方法一：

不使用新选项卡，直接使用_self，在当前页面中打开

方法二：

<a href="目标链接URL" target="_blank" rel="noopener noreferrer">在新标签页中安全打开</a>

noopener 是一种指定，用于禁止访问在新标签页中打开的链接。

由于链接来源和新标签页中打开的链接会被视为不同的对象，因此这也是一种提升性能的措施。

但是，由于某些浏览器可能不支持 noopener，因此建议同时指定 noreferrer 以应对不支持该功能的浏览器。

由于用于在新窗口中打开链接的 window.open 方法也存在安全漏洞，因此必须同时指定 noopener 和 noreferrer。

target="_blank"有时可能无效

在使用a标签的target="_blank"属性时，有时会出现点击URL链接却打不开的情况。

这种现象在计算机上很少见，但在"某些Android设备 + Google Chrome"的组合中尤为常见。

这是因为target="_blank"存在安全漏洞，系统出于安全考虑而阻止其打开。

如果指定了前面提到的"noopener"和"noreferrer"，就能解决这个问题，因此当部分浏览器或设备无法打开链接时，请检查rel属性的设置。