noopener与nofollow之间的区别

最新推荐文章于 2021-06-29 13:44:41 发布

flybirding10011

最新推荐文章于 2021-06-29 13:44:41 发布

阅读量412

点赞数

文章标签： javascript php ViewUI

原文链接：https://yq.aliyun.com/articles/691270

版权

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"

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

来源：万千度博客

flybirding10011

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
noopener与nofollow之间的区别

rel="noopener"是一个HTML属性，添加到所有选择在新浏览器选项卡中打开的WordPress链接。它还伴随着rel="noreferrer"属性。此功能是在WordPress中引入的，用于解决可被恶意网站利用的安全漏洞。先举个栗子<!DOCTYPE html><html lang="en"><hea...
复制链接

扫一扫