a标签target=”_blank”的安全与性能隐患

前言

我们在使用a标签并设置target="_blank"链接到外部站点的时候,可能会存在安全风险和性能问题。

原因是这个链接到的页面可以通过window.opener来访问原页面对象,这意味着目标页面可以随意修改原页面的内容,即使他们在毫不相干的两个站点上。

Chrome有时会提示:Links to cross-origin destinations are unsafe

另外,Chrome的文档中指出,这种情况下打开的新页面可能与原页面运行在同一个进程上,如果新页面运行大量JavaScript代码导致性能问题,同样可能影响原页面的性能。

问题演示

我们创建两个页面foo.html(正常页面)和bar.html(危险页面)

当我们通过foo.html中的点我跳转访问bar.html时,bar.html中的恶意代码可以通过window.opener操作我们的正常页面对象。例如操作document对原站进行修改,甚至是在跨域的前提下获取cookie,也是说目标页面可以拥有原页面的完整控制权,这给用户带来了危险且十分隐蔽的安全问题。

<!-- foo.html -->
<html>
<head>
    <meta charset="UTF-8">
    <title>我是正经网站</title>
</head>
<body>
<a href="bar.html" target="_blank">点我跳转</a>
</body>
</html>
<!-- bar.html -->
<html>
<head>
    <meta charset="UTF-8">
    <title>我是危险网站</title>
</head>
<body>
<script>
    window.opener.document.getElementsByTagName('a')[0].innerText = '原页面被修改了';
</script>
</body>
</html>

解决问题

为链接到非本站页面的a标签加上rel="noopener"rel="noreferrer"

<a href="https://rainngsite.com" target="_blank" rel="noopener">foo bar</a>

扩展阅读

理解rel链接类型中的noopener noreferrer external nofollow

noopener在新打开的页面中将window.opener置null
noreferer阻止向新打开的页面传递referer
external 通知搜索引擎,此链接指向站点外部
nofollow通知搜索引擎,不要追踪此网页上的链接

小技巧

使用Chrome开发者工具自带的审计可以快速的检查是否存在问题

  1. 按下F12打开Chrome开发者工具
  2. 选择Audits审计工具
  3. 点击Generate Report生成报告
  4. 点击Best Practices查看是否存在问题
使用Chrome检查问题

Azure99

底层码农,休闲音游玩家,偶尔写写代码

看看这些?

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注