关于a标签target=“_blank"使用rel=noopener

时间 2019-11-29

标签关于标签 target blank 使用 rel noopener 繁體版

原文原文链接

1、为何要使用rel='noopener'？

先举个栗子javascript

<!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>
    <a href="b.html" target="_blank">da</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>
    <SCRIPT>window.opener.location.href ="http://google.com"</SCRIPT>
</body>
</html>
复制代码

其中在a.html中有个超连接，点击后打开新的tab页，神奇的发现原tab页已经变成了谷歌页面。缘由是使用target=_blank打开新的窗口时，赋予了新的窗口一些权限能够操做原tab页，其中window.location就是一个。不使用 rel=noopener就是让用户暴露在钓鱼攻击上。下图为页面的window信息html

2、使用rel=noopener

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

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

3、rel=norefferrer

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

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

4、eslint提示

vscode中eslint提示安全

eslint提示后根据文档实际尝试了一下，以前忽略的小问题竟然还有这么大安全问题，网络安全不可小觑。

参考文章：eslint提示的官方文档网络

1. a标签属性 rel="noopener noreferrer"
2. 使用rel=noopener
3. rel= "noopener"
4. a标签的 target 使用
5. 聊聊 rel=noopener
6. a 标签打开新窗体 target="_blank" 失效解决办法
7. 慎用target="_blank"
8. 聊聊rel=external nofollow和rel=noopener noreferrer
9. a标签和iframe标签中的target
10. a标签的target问题
更多相关文章...
• MyBatis if标签 - MyBatis教程
• MyBatis foreach标签 - MyBatis教程
• NewSQL-TiDB相关
• Composer 安装与使用