a标签中rel=”noopener”使用方法及作用

软文外链

手动发布相关内容软文,多域名、多C段、带锚文本、性价比实惠又便宜

¥软文1毛1篇

高权重分类目录

高权重1~5的分类目录,任意挑选数量,最低只要10元1个

¥10元一个
首页 » SEO教程 » a标签中rel=”noopener”使用方法及作用

很多人不懂a标签中加上rel=”noopener”有什么作用,下面萌新SEO整理了一篇rel=”noopener”使用方法及作用给大家做参考,先举个栗子。

 

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>
    <a href="b.html" target="_blank">da</a>
</body>
</html>

 

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就是让用户暴露在钓鱼攻击上。

a标签中rel=

二、使用rel=noopener

为了防止window.opener被滥用,在使用targrt=_blank时需要加上rel=noopener
<a href="www.baidu.com" target="_blank" rel="noopener" >

三、rel=norefferrer

rel=noopener支持chrome49和opera36,不支持火狐,为了兼容需要加上rel=noreferrer
<a href="www.baidu.com" target="_blank" rel="noopener norefferrer" >

四、eslint提示

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

未经允许不得转载:作者:萌新SEO, 转载或复制请以 超链接形式 并注明出处 萌新SEO
原文地址:《a标签中rel=”noopener”使用方法及作用》 发布于2020-03-25

分享到:
赞(0) 打赏

评论 抢沙发

9 + 9 =


觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

成都SEO优化教程
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册