本站承诺永不接任何虚假欺骗、联盟广告、弹窗广告、病毒广告、诱导充值等影响用户体验的广告,广告屏蔽插件会影响本站部分功能,还请不要屏蔽本站广告,感谢支持!

当前位置:首页 / 正文

2021-07-14 | 编程技术 | 3188 次阅读 | 等你评论 | 0 次点赞 | 繁体

一、为什么要使用 rel='noopener'

先举个栗子,有以下两个页面

a.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>

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

图片alt

二、使用 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 提示

图片alt

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

via:
关于 a 标签 target_blank 使用 rel=noopener - 简书
https://www.jianshu.com/p/c8319e095474

标签: html前端安全

猜你喜欢
Typecho纯代码生成sitemap站点地图
想要实现 Typecho 纯代码生成 sitemap 站点地图只需要 2 步就够了。1、在博客主题目录新建 sitemap.php 页面,放入以下代码:<?php /** *HTML版网站...
Lazysizes.js图片懒加载的使用
lazysizes 是一种快速(无垃圾),对 SEO 友好且可自动初始化的 lazyloader,用于图像(包括响应图像 picture/ srcset),iframe,脚本/小部件等。它还通过...
typecho使用文件缓存加快打开速度
typecho 是一个伪静态的博客系统,如果不使用缓存,每次打开页面都会查询数据库,访问人数多了以后服务器压力倍增。但是,typecho 是一个 php 的程序,我们可以利用 php 将实时页面...
Fail2Ban安装使用及常用配置教程
Fail2Ban安装使用教程因为作为一个 linux 入门级别的小白, 很多人都会把一些 web 面板(比如宝塔面板)作为自己管理 vps 的首选, 而当我一段时间登录宝塔面板之后, 有时就会看...
通用的检测到广告屏蔽插件进行弹窗提示实现方法
用的 js 方法来检测,按理说所有博客都能使用,就是在打开网页的时候进行一次判断。如果发现没有加载广告代码,就会出来一个弹窗来提示浏览者将本站加到广告拦截插件的白名单里面。别喷我,个人站长经营实...
javascript | 原生JS多语言切换简单实现
由于项目需要实现一个前端的多语言切换,不想因为一个简单的功能就引入 jQuery,所以经过 google 编程大法摸索出一个原生 JS 就可以实现的多语言前端切换的小例子,仅供参考。<bo...
分享几个免费 IP 定位 api
在做定位的朋友,如果只是单纯的想获取地址而又不想集成高德等第三方 sdk,可以试试以下地址: ``` https://ip.seeip.org/geoip https://ip.seeip.or
JavaScript + imgur API 上传图片
![](https://proxy.wangtwothree.com/proxy/i.imgur.com/jgGhE5d.jpg) 上图如无法正常显示则以下方法可能已失效! 大致比较了一下,支
Pycharm 专业版配置自动同步代码至服务器
每次在本机上面写代码,然后传到服务器上面,在服务器上面运行,这样的方式十分繁琐,效率很低,使用下方配置后可实现本地编辑代码保存自动同步到服务器。 # 使用场景 先说说自己的使用场景,我是在什么
(首次提交评论需审核通过才会显示,请勿重复提交)