文章中英模式

布鲁斯前端面试题目 - 如何正确开启外部链接

掌握在新分页中安全开启外部链接的完整指南，了解target、rel属性的正确使用，以及如何防范安全风险和改善用户体验。

文章中英模式

懒得看文章？那就来看视频吧

开启外部链接的基本方法

在HTML中，使用target="_blank"属性可以在新分页或新窗口中开启链接。当用户点击这样的链接时，浏览器会保留当前页面，并在新的分页中加载目标URL。

<a href="https://example.com" target="_blank">访问示例网站</a>

target属性的可能值

_blank: 在新分页或窗口开启
_self: 在当前窗口开启（默认行为）
_parent: 在父框架中开启
_top: 在整个窗口中开启，取消所有框架
framename: 在指定的已命名框架中开启

安全隐患与解决方案

仅使用target="_blank"开启外部链接存在安全隐患。新开启的页面可以通过window.opener访问原页面的window对象，这可能导致链接劫持（tabnabbing）攻击。

潜在风险示例

// 在恶意网站上可能执行的代码
if (window.opener) {
  // 可以访问原页面的window对象
  window.opener.location = 'https://malicious-site.com/fake-login.html';
  
  // 用户返回原标签页时，可能已被重定向到钓鱼页面
}

为防止这种情况，应该始终在开启外部链接时添加rel="noopener noreferrer"属性：

<a 
  href="https://example.com" 
  target="_blank" 
  rel="noopener noreferrer"
>
  安全地访问外部网站
</a>

rel="noopener"

1. 阻止新开窗口访问window.opener
2. 防止链接劫持攻击
3. 现代浏览器在使用target="_blank"时默认添加

rel="noreferrer"

1. 防止在请求头中发送Referer信息
2. 增强隐私保护，不透露来源网站
3. 提供对较旧浏览器的向后兼容性

🔥 常见面试题目

(一) target="_blank"存在什么安全隐患？如何解决？

答：使用target="_blank"开启链接时存在以下安全隐患：

1. 窗口引用漏洞：新页面可以通过window.opener访问原页面，甚至可以修改原页面的URL。
2. 性能问题：新页面与原页面共享处理程序，可能影响原页面性能。
3. Referer信息泄露：可能泄露用户来源网站信息。

解决方案：添加rel="noopener noreferrer"属性

<!-- 不安全的写法 -->
<a href="https://example.com" target="_blank">访问外部网站</a>

<!-- 安全的写法 -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">访问外部网站</a>

说明：

noopener：使window.opener返回null，防止链接劫持。
noreferrer：防止发送Referer头信息，保护隐私。