- A+
所属分类:Web前端
a标签打开新页面时需要添加 rel="noopener noreferrer"
否则,在新打开的页面(http://www.baidu.com)中可以通过 window.opener 获取到源页面的部分控制权,即使新打开的页面是跨域的也照样可以(例如 location 就不存在跨域问题)。
在 Chrome 49+,Opera 36+,打开添加了 rel=noopener 的链接, window.opener 会为null。在老的浏览器中,可以使用 rel=noreferrer 禁用HTTP头部的Referer属性
如下:
<a href="http://www.baidu.com" target="_blank" rel="noopener noreferrer">百度</a>
在element UI中 el-link 相当于a标签
<el-table-column label="查看" prop="url" width="70"> <template slot-scope="{row}"> <el-link :href='row.url' :underline="false" target="_blank" rel='noopener noreferrer' > <i class="el-icon-view el-icon--right"></i> </el-link> </template> </el-table-column>
另外,可以使用 window.open 打开页面,手动将 opener 设置为 null。
var otherWindow = window.open('http://www.baidu.com'); otherWindow.opener = null; otherWindow.location = url;
参考:
https://blog.csdn.net/huolang110/article/details/80905596
https://element.eleme.cn/#/zh-CN/component/link