noopener与nofollow之间的区别

简介: rel="noopener"是一个HTML属性,添加到所有选择在新浏览器选项卡中打开的WordPress链接。它还伴随着rel="noreferrer"属性。 此功能是在WordPress中引入的,用于解决可被恶意网站利用的安全漏洞。


rel="noopener"是一个HTML属性,添加到所有选择在新浏览器选项卡中打开的WordPress链接。它还伴随着rel="noreferrer"属性。

此功能是在WordPress中引入的,用于解决可被恶意网站利用的安全漏洞。

先举个栗子


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

有一些JavaScript功能允许新选项卡控制其引用窗口。如果您链接到受恶意代码影响的外部网站,则该网站可以使用window.opener JavaScript属性更改原始页面(您的网站)以窃取信息并传播恶意代码。

添加rel="noopener"会阻止新标签利用此JavaScript功能。同样,rel="noreferrer"属性可防止将引用者信息传递给新选项卡。

WordPress始终保持领先地位,以帮助提高网站安全性。当您添加链接并选择“在新标签页中打开”时,WordPress会将rel="noopener"和rel="noreferrer"添加到链接代码中。

一、使用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" >

三、noopener与nofollow之间有什么区别?

noopener属性可以防止您的网站被跨站点黑客攻击并提高WordPress的安全性。

另一方面nofollow属性可以防止您的网站将SEO链接名传递给链接的网站。

搜索引擎会查找并考虑nofollow属性。但是,他们不会考虑noopener标签。

四、rel=noreferrer”会影响WordPress中的联盟链接吗

rel=noreferrer”不会影响WordPress中的联盟链接。一些用户认为这样做是因为rel ="noreferrer"阻止将引用者信息传递给新选项卡。

大多数联盟提供具有会员ID的唯一网址。

这意味着您的会员ID将作为URL参数传递给其他要跟踪的网站。

五、WordPress中禁用rel ="noopener"

如果必须将其删除,则必须在WordPress中禁用Gutenberg块编辑器并使用旧的经典编辑器。之后,您需要将以下代码添加到主题的functions.php文件或特定于站点的插件中。


add_filter('tiny_mce_before_init','wpb_disable_noopener');
function wpb_disable_noopener( $mceInit ) {
$mceInit['allow_unsafe_link_target']=true;
return $mceInit;
}

rel="noopener"有利于网站的安全性,并且对的网站没有任何性能或SEO影响。

添加之后新发布的内容附带的链接如果设置为新窗口打开那么将不会再自动添加Noopener Noreferrer属性。

如果之前发布的文章已经附带了该属性即使添加之后也不会自动去除,你需要手动编辑然后依次删除新属性。

即手动编辑文章并将编辑器切换到文本模式然后将

rel ="noopener noreferrer"

删除掉然后保存更新就行了。

来源:万千度博客 

目录
相关文章
|
21天前
|
缓存 前端开发 JavaScript
CSS 的 link 标签放在 head 标签之间的作用
CSS 的 link 标签放在 head 标签之间的作用
21 1
|
数据安全/隐私保护
thymleaf th:text 和 th:utext 之间的区别
1 th:text属性 可对表达式或变量求值,并将结果显示在其被包含的 html 标签体内替换原有html文本 文本连接:用“+”符号,若是变量表达式也可以用“|”符号 e.g. 若home.welcome=Welcome to our fantastic grocery store! 用解析结果为:   Welcome to our fantastic grocery store!   2 th:utext属性 解决方案 即可。
1640 0
|
4月前
|
存储 JavaScript 安全
js中多个页面之间如何进行通信?有什么区别?
js中多个页面之间如何进行通信?有什么区别?
38 0
|
4月前
|
JavaScript 前端开发 Go
<script> 标签的 defer 和 asnyc 属性的作用以及二者的区别
<script> 标签的 defer 和 asnyc 属性的作用以及二者的区别
28 0
|
6月前
|
前端开发
|
9月前
|
前端开发
link标签的好处
link标签的好处
|
前端开发
iframe的运用---特别是获取父子页面的元素
iframe的运用---特别是获取父子页面的元素
468 0
|
算法 搜索推荐 索引
网页权重和百度快照之间的关系
网页权重和百度快照之间的关系www.20200824.com
|
机器学习/深度学习 人工智能 知识图谱
ACL 2020 | CASREL: 不受重叠三元组影响的关系抽取方法
ACL 2020 | CASREL: 不受重叠三元组影响的关系抽取方法
451 0
ACL 2020 | CASREL: 不受重叠三元组影响的关系抽取方法
|
搜索推荐 SEO
nofollow标签的作用 nofollow标签添加方法
nofollow标签的作用 nofollow标签添加方法 nofollow标签是seo优化常用的一个标签,它的作用是告诉搜索引擎不要追踪这个链接,也就是阻止搜索引擎向这个网页或链接传递权重。 nofollow有两种写法: 1、将&quot;nofollow&quot;写在网页上的meta标签上。 这段代码的意思是告诉搜索引擎,整个页面都不要追踪 2、将&quot;nofollow&quot;放在超链接中。
461 0