使用<a>标签时，你可能会忽略的一个安全问题

最新推荐文章于 2023-12-15 20:43:33 发布

muzidigbig

最新推荐文章于 2023-12-15 20:43:33 发布

阅读量1k

点赞数

分类专栏： html标签问题文章标签： a标签的弊端 rel=&quot;noopener&quot; window.opener.location rel=&quot;norefferrer&quot; window.open()

本文链接：https://blog.csdn.net/muzidigbig/article/details/86289377

版权

html标签问题专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在一个新窗口中打开链接是前端开发中一个很常见的逻辑，它可以将用户引导到一个新的域名。我们可以用target='_blank'来实现这个功能。我敢肯定，每个人都会在他的某个项目中使用过target='_blank，但是我不确定是否每个人都知道这种用法的缺陷。

当一个外部链接使用了target='_blank'的方式，这个外部链接会打开一个新的浏览器tab。此时，新页面会打开，并且和原始页面占用同一个进程。这也意味着，如果这个新页面有任何性能上的问题，比如有一个很高的加载时间，这也将会影响到原始页面的表现。如果你打开的是一个同域的页面，那么你将可以在新页面访问到原始页面的所有内容，包括document对象(window.opener.document)。如果你打开的是一个跨域的页面，你虽然无法访问到document，但是你依然可以访问到location对象。

这意味着，如果你在你的站点或者文章中，嵌入了通过新窗口打开一个新页面的链接，这个新页面可以使用window.opener，在一定程度上来修改原始页面。

举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <H2>a页面</H2>
    <a href="b.html" target="_blank" >点我跳到b页面</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h2>b页面</h2>
    <script>window.opener.location.href='https://www.baidu.com/?tn=48021271_12_hao_pg'</script>
</body>
</body>
</html>

其中在a.html中有个超链接，点击后打开新的tab页，神奇的发现原tab页已经变成了百度页面。原因是使用target=_blank打开新的窗口时，赋予了新的窗口一些权限可以操作原tab页，其中window.location就是一个。不使用 rel=noopener就是让用户暴露在钓鱼攻击上。

因此：

当您的页面链接至使用 target="_blank" 的另一个页面时，新页面将与您的原页面在同一个进程上运行。如果新页面正在执行开销极大的 JavaScript，您的原页面性能可能会受影响。

此外，target="_blank" 也是一个安全漏洞。新的页面可以通过 window.opener 访问您的窗口对象，并且它可以使用 window.opener.location = newURL 将您的页面导航至不同的网址。

那么问题来了：我们如何阻止这种情况的发生呢？在所有使用target=_blank打开新页面的链接上，加上rel="noopener"。

使用rel='noopener'的兼容性

rel=noopener

为了防止window.opener被滥用，在使用targrt=_blank时需要加上rel=noopener

<a href="www.baidu.com" target="_blank" rel="noopener" >

rel=norefferrer（存在弊端）

在老浏览器中，你可以使用rel=noreferrer属性，具有同样的效果。但是，这样也会阻止Referer header被发送到新页面。

rel=noopener支持chrome49和opera36，不支持火狐，为了兼容需要加上rel=noreferrer

<a href="b.html" target="_blank" rel="noopener norefferrer" >

使用了rel=noopener以后，当一个新页面通过一个链接打开后，新页面中的恶意JavaScript代码将无法通过window.opener来访问到原始页面。这将保证新页面运行在一个单独的进程里。

在上面的例子中，使用了rel="noreferrer" ，当一个用户点击了这个超链接进入到新页面后，新页面拿不到referrer信息。这将意味着，新页面不知道用户是从哪里来的。

如果你通过JavaScript中的window.open打开一个页面的话，上文所说的都适用，因为你也是打开了一个新的窗口。在这种情况下，你不得不清除掉opener对象：

var newWindow = window.open();
newWindow.opener = null;

window.open().opener的用法：window.open()用法

在我看来，使用第一种解决方案(在每一个target="_blank"的链接中加上rel="noopener")是没有什么明显的坏处的。这个问题表明，在你的网页安全性中找到漏洞是多么的容易。

大多数浏览器都是多进程的，除了Firefox（他们正在改）。每个进程包含多个线程，包括我们常说的“主”线程。解析、样式计算、布局、绘制和非worker的JavaScript都在主线程里执行。就是说，一个域中的JavaScript与另一个标签页或窗口中的域中的JavaScript在不同的线程里。

然而，由于我们可以通过window.opener同步跨窗口地访问DOM，因此通过target="_blank"启动的窗口还在同一个进程（线程）中。通过window.open打开的iframe和窗口也一样。

rel="noopener"会阻止window.opener，因此不存在跨窗口访问。Chromium浏览器为此做过优化，会在独立的进程中打开新页面。

总结

主要介绍了在使用<a target="_blank">标签打开一个新窗口过程中的安全问题。新页面中可以使用window.opener来控制原始页面。如果新老页面同域，那么在新页面中可以任意操作原始页面。如果是不同域，新页面中依然可以通过window.opener.location，访问到原始页面的location对象。

试想一下，你在自己的a页面中，通过<a target="_blank" href="http://b.com">打开新窗口，跳转到了b页面，此刻b页面中有一段代码window.opener.location = 'http://c.com'。这时，a页面就会自动跳转到c页面。如果这个c页面是一个和a页面长得一样的钓鱼网站，那么用户可能就中招了。

解决方法就是：在带有target="_blank"的<a>标签中，加上rel="noopener"属性。如果使用window.open的方式打开页面，将opener对象置为空。这样的副作用是：在某些低版本浏览器中，新页面中拿不到referer信息。

若有不足请多多指教！希望给您带来帮助！