a标签rel=”noopener noreferrer”属性的作用详解_CamilleZJ的博客-CSDN博客
a标签rel=”noopener noreferrer”属性的作用详解
CamilleZJ
于 2021-09-15 14:45:55 发布
6381
收藏
10
分类专栏：
前端
h5
文章标签：
html
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/CamilleZJ/article/details/120306971
版权
前端
同时被 2 个专栏收录
123 篇文章
1 订阅
订阅专栏
h5
7 篇文章
0 订阅
订阅专栏
<a href="https://www.xinshouzhanzhang.com/" target="_blank">跳转到一个新页面</a>
没有rel=“noopener noreferrer”的情况下使用target=“_blank”是有安全风险，超链接a标签的rel="noopener noreferrer"属性是一种新特性，它能让网站更安全，超链接添加rel="noopener noreferrer"来防止钓鱼网站，因为它获取的window.opener的值为null。
"Google官方解释"
大致解释如下:
当您的页面链接至使用 target="_blank" 的另一个页面时，新页面将与您的页面在同一个进程上运行。 如果新页面正在执行开销极大的 JavaScript，您的页面性能可能会受影响。
target="_blank"也是一个安全漏洞。新的页面可以通过window.opener 访问您的窗口对象，并且它可以使用 window.opener.location = newURL将您的页面导航至不同的网址。
其实就是当你使用target="_blank"打开一个新的标签页时，新页面的window对象上有一个属性 opener ,它指向的是前一个页面的window对象，因此，后一个新打开的页面就可以控制前一个页面了，事情就是这么的可怕。而且不管它是否跨域了，都是可以的。
在新打开的页面中，通过window.opener可以获取到源页面的部分控制权，即使新打开的页面是跨域也可以获取部分控制权。当a标签中加入了rel="noopener noreferrer"属性，就会window.opener会为null。
CamilleZJ
关注
关注
点赞
10
收藏
打赏
知道了
评论
a标签rel=”noopener noreferrer”属性的作用详解
<a href="https://www.xinshouzhanzhang.com/" target="_blank">跳转到一个新页面</a>没有rel=“noopener noreferrer”的情况下使用target=“_blank”是有安全风险，超链接a标签的rel="noopener noreferrer"属性是一种新特性，它能让网站更安全，超链接添加rel="noopener noreferrer"来防止钓鱼网站，因为它获取的window.opener的值为null.
复制链接
扫一扫
专栏目录
vue实现a标签点击高亮方法
11-30
如下所示：
<!DOCTYPE html>
<html
lang="en">
<head>
<title></title>
<meta
charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1">
<!--<link href="css/style.css" rel="external nofollow" rel="stylesheet">-->
[removed][removed]
[removed]</s
js a标签点击事件
11-30
当我们在处理a标签上的点击事件时发现即使href=””里面为空，点击事件的效果也不明显，这种情况该如何处理呢?常见的处理方法有以下几种：
1.a href=”[removed]void(0);” rel=”external nofollow” onclick=”method()”
这种方法是比较最常用的方法，也是最周全的方法，onclick方法负责执行js函数，而void是一个操作符，void(0)返回undefined，地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。
2.a href=”[removed];” rel=”external nofo
参与评论
您还未登录，请先
登录
后发表或查看评论
＜a＞ 标签属性 rel=“noopener noreferrer“ 原来这么有用
Acx7的博客
11-09
1679
<a> 标签中 rel=“noopener noreferrer”
<a> 标签的 rel 属性用于指定当前文档与被链接文档的关系。
只有在使用了 href 属性后才能使用 rel 属性。
使用了 target="_blank" 后需要增加 rel=“noopener noreferrer” 来保证安全。
使用 rel=“noopener noreferrer” 如何提高安全性
在 <a> 标签中给链接加上 target="_blank" 后，目标网页会在新的标签页中
a 标签中 rel=“noopener noreferrer“属性的含义和功能
草巾冒小子的博客
11-21
2407
a标签：网页超链接中隐藏的钓鱼攻击
先看一条代码：
<a href="" rel="noopener noreferrer" >跳转到2页</a>
1. target="_blank" 导致的钓鱼攻击
target="_blank" 导致的钓鱼攻击
2. window.opener.location
为什么说window.opener.location.href恶意跳转？
3. 资源统计：
html a标签链接里面为什么要使用 rel="noopener norefe
window.open()打开页面出现黑白屏的性能问题
最新发布
m0_73430799的博客
02-13
71
window.open()方法 黑白屏 性能优化
html 链接nofollow,超链接的noopener、noreferrer以及nofollow属性
weixin_42384267的博客
06-29
407
项目中有条eslint规则 react/jsx-no-target-blank，当代码中有超链接且是新页打开的情况下，如果你没有加上 rel="noopener noreferrer" 时，就会出现下面的报错：Usingtarget="_blank"withoutrel="noopenernoreferrer"isasecurityrisk:seehttps://mathias...
a标签中rel的属性定义
ProHc的博客
05-21
453
rel = “relationship” 于 关系的意思；
即rel标签用来规范标签的href属性和后面链接所指向的目标文档与当前页面之间的关系
如果没使用href 则不能使用rel属性
用法：
alternate文档的可选版本（例如打印页、翻译页或镜像）。
stylesheet文档的外部样式表。
start集合中的第一个文档。
next集合中的下一个文档。
prev集合中的前一个文档。
contents文档目录。
index文档索引。
glossary文档中所用字词的术语表或解释。
co
标签属性rel=“noopener noreferrer“的作用及含义
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
09-15
975
下面说说a标签rel="noopener noreferrer"属性的作用那么rel="noopener noreferrer"是什么意思？超链接a标签的rel="noopener noreferrer"属性是一种新特性，它能让网站更安全，超链接添加rel="noopener noreferrer"来防止钓鱼网站，因为它获取的window.opener的值为null。
a标签rel设置“noopener noreferrer”
wzp20092009的博客
05-07
1929
描述
<a> 的 rel 属性指定了目标对象到链接对象的关系。该值是空格分隔的列表类型值。
属性值
描述
支持元素
不支持元素
noopener
指示浏览器打开链接而不授予新的浏览上下文对打开它的文档的访问权限-通过在打开的窗口中不设置Window.opener属性（返回null）。当打开不受信任的链接时，这特别有用，以确保它们无法通过Window.opener属性来篡改原始文档（有关更多详细信息，请参阅 About rel=noopener），同时仍提供 Referer H
标签属性 rel=“noopener noreferrer“ 原来这么有用
m0_66047725的博客
11-13
380
标签属性 rel="noopener noreferrer" 原来这么有用
a标签属性 rel="noopener noreferrer"
huangli007的博客
11-02
356
Links using target=’_blank’ gain partial access to the linking page via the window.opener object.
当你浏览一个页面点击一个a标签连接 <a href=“www.baidu.com” target="_blank"> 跳转到另一个页面时，
在新打开的页面（baidu）中可以通过 windo...
rel="noopener noreferrer"
热门推荐
大鸡腿的博客
11-13
2万+
今天新学到一个安全知识，就是a标签target为_blank时，要加上rel="noopener noreferrer"。
为啥呢？我在网上搜索，http://www.cnblogs.com/ilinuxer/p/5245983.html
比如这一篇，发现window.open这个可以获得父窗口的很多参数，所以有获得原网站的部分权限的说法https://www.cnblogs.com/tang...
a标签属性 rel=noopener noreferrer
Love Code
07-03
4980
当你浏览一个页面点击一个a标签链接跳转到另一个页面时，<a href="http://www.baidu.com" target="_blank">百度</a>在新打开的页面（http://www.baidu.com）中可以通过 window.opener 获取到源页面的部分控制权，即使新打开的页面是跨域的也照样可以（例如 location 就不存在跨域问题）。rel=no...
聊聊rel=external nofollow和rel=noopener noreferrer
IT小天博客
07-07
1万+
来源：IT小天博客https://www.xtboke.com
大家应该都知道rel=’nofllow’的作用，它是告诉搜索引擎，不要将该链接计入权重。因此多数情况下，我们可以将一些不想传递权重的链接进行nofllow处理；例如一些非本站的链接，不想传递权重，但是又需要加在页面中的像 统计代码、备案号链接、供用户查询的链接等等。
除了rel=’nofollow’还有两种链接属性形式，一...
eleventy-plugin-automatic-noopener:一个11ty插件，可以自动将rel =“ noopener”或rel =“ noreferrer”属性添加到所有外部链接
05-15
自动开门器
一个插件，可将rel="noopener"或rel="noreferrer"属性自动添加到所有外部链接。
安装
npm install eleventy-plugin-automatic-noopener
用法
在您的（默认为.eleventy.js ）：
const automaticNoopener = require ( 'eleventy-plugin-automatic-noopener' ) ;
module . exports = function ( eleventyConfig ) {
eleventyConfig . addPlugin ( automaticNoopener ) ;
HTML
如果您已经在使用 ，则可以通过使用posthtml导出作为现有PostHTML语法树的插件来减少构建时间。 它提供了自动Noopener的独立PostH
HTML <link> 标签的 rel 属性
evilcry2012的专栏
07-30
962
HTML 标签的 rel 属性
HTML 标签
实例
在下面的例子中，rel 属性指示被链接的文档是一个样式表：
rel="stylesheet" type="text/css" href="theme.css" />
亲自试一试
定义和用法
rel 属性规定当前文档与被链接文档之间的关系。
浏览器支持
只有
a标签上的rel=noopener
程小博衍的博客
01-30
82
a标签上的rel=noopener
rel=noopener可以提升性能
gwdgwd123的博客
09-11
207
rel=noopener可以提升性能
原文链接：jakearchibald.com
如果你的链接指向其他站点，那么应该使用rel="noopener"，尤其是点击后会在新标签页/窗口中打开的链接。
<a href="http://example.com" target="_blank" rel="noopener">
Example site
</a>
...
关于a标签的rel=nooppener
caiqian97的博客
07-23
100
a 链接 rel nooppener 作用
noopener、noreferrer使用
判断一个点是否在闭合曲线内
01-11
786
noopener
a标签的**target="_blank"**时，会打开一个新的页面，此时新的窗口的window对象上有一个opener属性，新的页面获得了前一个页面控制权，就会出现安全问题，noopener就可以解决这个问题，设置后，新页面的window.opener就为null了，
noreferrer
noreferrer不久可以把window.opener设置为 null，还禁止...
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
CamilleZJ
CSDN认证博客专家
CSDN认证企业博客
码龄7年
暂无认证
132
原创
22万+
周排名
9076
总排名
43万+
访问
等级
4026
积分
69
粉丝
150
获赞
39
评论
396
收藏
私信
关注
热门文章
高效制作动画-Adobe Animate CC
41646
phpstudy本地搭建域名访问
32770
js 动态拼接已有的变量名并调用
24671
CSS 设置文字间距
20203
select下拉框、input输入框在IOS中背景变黑、出现阴影
17937
分类专栏
浏览器原理
javascript
8篇
react
9篇
算法
2篇
前端代码规范
2篇
typescript
2篇
协议
2篇
h5
7篇
web安全
2篇
bash
1篇
自动化测试
2篇
项目流程
1篇
技术文章
1篇
高并发
1篇
工具
1篇
css
1篇
phpmyadmin
2篇
php
7篇
编辑器
2篇
前端
123篇
前端，thinkphp框架
1篇
phpstudy
1篇
git
6篇
mysql
5篇
CI框架
1篇
工具
10篇
Sass
2篇
bootstrap
1篇
css
18篇
原理
2篇
环境搭建
1篇
架构
2篇
webpack
10篇
最新评论
CSS 设置文字间距
超甜的仙女啊:
csstransform失效
两队PK进度条效果
可502:
请教一下 如果动态根据数据 这个怎么算百分比呀，同问
牛客网JavaScript（V8）输入输出操作指南
秃头007号robot:
输入如果是链表节点呢。。
如何对分布式锁进行高并发优化？
m0_61082488:
给上一下代码啊 我们项目就有这样的 ，
牛客网JavaScript（V8）输入输出操作指南
大家一起学编程（python）:
999
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
前端权限-react
解决git commit提交记录消失
webpack中hash、chunkhash、contenthash区别
2023年4篇
2022年13篇
2021年36篇
2020年20篇
2019年50篇
2018年27篇
2017年18篇
2016年10篇
目录
目录
分类专栏
浏览器原理
javascript
8篇
react
9篇
算法
2篇
前端代码规范
2篇
typescript
2篇
协议
2篇
h5
7篇
web安全
2篇
bash
1篇
自动化测试
2篇
项目流程
1篇
技术文章
1篇
高并发
1篇
工具
1篇
css
1篇
phpmyadmin
2篇
php
7篇
编辑器
2篇
前端
123篇
前端，thinkphp框架
1篇
phpstudy
1篇
git
6篇
mysql
5篇
CI框架
1篇
工具
10篇
Sass
2篇
bootstrap
1篇
css
18篇
原理
2篇
环境搭建
1篇
架构
2篇
webpack
10篇
目录
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
祝福语
请填写红包祝福语或标题
红包数量
红包个数最小为10个
红包总金额
红包金额最低5元
余额支付
当前余额3.43元
前往充值 >
需支付：10.00元
取消
确定
下一步
知道了
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝
规则
hope_wisdom 发出的红包
打赏作者
CamilleZJ
你的鼓励将是我创作的最大动力
¥2
¥4
¥6
¥10
¥20
输入1-500的整数
余额支付
(余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付
您的余额不足，请更换扫码支付或充值
打赏作者
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值