首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用vanilla JS将rel="noopener noreferrer nofollow“添加到所有外部链接的最佳方法

使用vanilla JS将rel="noopener noreferrer nofollow"添加到所有外部链接的最佳方法是通过遍历页面中的所有链接,并检查链接是否指向外部域名。以下是一个实现此功能的示例代码:

代码语言:txt
复制
// 获取页面中的所有链接元素
const links = document.querySelectorAll('a');

// 遍历链接元素并添加rel属性
links.forEach(link => {
  const href = link.getAttribute('href');

  // 检查链接是否指向外部域名
  if (href.startsWith('http') && !href.includes(window.location.hostname)) {
    link.setAttribute('rel', 'noopener noreferrer nofollow');
  }
});

这段代码首先使用querySelectorAll方法选择所有<a>元素,并将其存储在links变量中。然后,使用forEach方法遍历所有链接元素,并获取链接的href属性。

接下来,通过检查链接的href属性是否以http开头且不包含当前页面的域名来判断链接是否指向外部域名。如果是外部链接,就使用setAttribute方法添加rel属性为noopener noreferrer nofollow

这样,所有指向外部链接的<a>元素都会被添加上rel="noopener noreferrer nofollow"属性。

对于此问题,腾讯云没有直接相关的产品或产品介绍链接地址。然而,腾讯云提供了丰富的云计算产品和解决方案,例如云服务器、云数据库、云存储、人工智能等,可用于构建和扩展云计算应用程序。您可以访问腾讯云官方网站(https://cloud.tencent.com/)了解更多信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

WordPress移除外链不再需要的rel=”noopener noreferrer”属性

因为历史原因让开发者习惯一起用,确保没遗漏功能,这也是为什么很早之前 WordPress 会自动给使用 target=”_blank”属性的链接都统一添加 rel=”noopener noreferrer...这样可以全站禁用来源信息发送,无需在每个链接上添加 rel=”noreferrer”。...、前端文章内容移除外链 noopener/noreferrer 属性(所有文章生效,治标不治本)/* * WordPress 文章移除外链 noopener/noreferrer 属性 * https:...noopener/noreferrer 属性(搭配方法一可以彻底解决)// 替换 rel="nofollow noopener noreferrer" 为 rel="nofollow"UPDATE wp_postsSET...5.6 版本已经移除 noreferrer 属性,如果你使用的 WordPress 依然会自动添加 noreferrer 属性,只需升级到 WordPress 最新版本即可,noopener 属性的移除只需将以上方法一代码添加到当前

5900
  • a标签 rel=“external nofollow“ 用法

    这个属性基本上是相当于将两种属性结合起来,大致可以解释为 “这个链接非本站链接,不要爬取也不要传递权重”。因此在SEO的角度来说,是一种绝对隔绝处理的方法,可以有效减少蜘蛛爬行的流失。...rel="nofollow noopener noreferrer" 超链接 target="_blank" 要增加 rel="nofollow noopener noreferrer" 来堵住钓鱼安全漏洞...如果你在链接上使用 target="_blank"属性,并且不加上rel="noopener"属性,那么你就让用户暴露在一个非常简单的钓鱼攻击之下。...在老的浏览器中,可以使用 rel=noreferrer 禁用HTTP头部的Referer属性,使用下面JavaScript代替target='_blank' 的解决此问题: 1 2 3...更多资料,请参考:超链接 target="_blank" 要增加 rel="nofollow me noopener noreferrer" 来堵住钓鱼安全漏洞

    1.4K20

    Hexo博客推荐安装的插件

    比如 设置target=’_blank’, rel=’external nofollow noopener noreferrer’ 告诉搜索引擎这是外部链接,不要将该链接计入权重。...: 'external nofollow noopener noreferrer' domain: 'https://www.antmoe.com/' # 如果开启了防盗链 safety_chain...’ target_blank - 是否为外链的a标签添加target='_blank' - 默认 true link_rel - 设置外链的a标签的rel属性 - 默认 ‘external nofollow...noopener noreferrer’ domain - 如果开启了防盗链,除了 localhost 和 domain 之外调用会跳到主页,同时也是判断链接是否为外链的依据 - 默认 window.location.host...值得注意的是:这个加入了图片压缩,如果不想用图片压缩可以把第154行的 "compressImage", 和第165行的 ,"compressImage" 去掉即可 第二种方法通过插件完成,也是我目前使用的方法

    1.3K20

    UI框架——后台管理系统模板

    :https://itheima2017.gitbooks.io/adminlte2-itheima-doc/ 由于AdminLTE仪表盘代码过于复杂,因为组件太多,要自己灵活的使用要花很多时间了解源代码...因此,自己根据自己的想法,注释并且简洁化的修改了这个模板,可以根据自己的需求很灵活的使用起来。 修改后的界面如下 单页代码 <!...www.layui.com/admin/pro/ layui组件演示:https://www.layui.com/demo/ layui文档:https://www.layui.com/doc/ 使用后台管理系统模板主要的是能自己改写和使用系统中的相关组件和布局样式..."nofollow noopener" rel="nofollow noopener" >所有商品 <dl class="layui-nav-child...: https://www.layui.com/admin/ 也可以点击以下链接下载自己改写后的源代码 链接:https://pan.baidu.com/s/1RODE32nrh62xeoBCRHFteQ

    7.4K41

    安全开发小知识记录

    的框架或者窗口不存在,浏览器将打开一个新的窗口,给这个窗口一个指定的标记,然后超链接文档就可以指向这个新的窗口。...您可以把target=”_blank”理解为新的浏览器窗口打开此超链接; 关键点: 如果您使用了该属性却没有添加rel=”noopener noreferrer”得话就会存在一定得安全风险; 原理解析...:我们唯一的目的就是限制window.opener的访问行为,此时我只需要在标签中加上一个rel="noopener"属性(chrome)或者rel="noreferrer"属性(火狐),当然您可以将两个属性值合并写成...rel="noopener noreferrer"来完整覆盖,此时子页面就再也访问不到父页面的句柄所以更无法操作原窗口的句柄; 也可以通过js来控制限制句柄的访问: var otherWindow =...target=”_blank”后面添加一句rel="noopener noreferrer"。

    70610

    安全开发小知识记录

    的框架或者窗口不存在,浏览器将打开一个新的窗口,给这个窗口一个指定的标记,然后超链接文档就可以指向这个新的窗口。...您可以把target=”_blank”理解为新的浏览器窗口打开此超链接; 关键点: 如果您使用了该属性却没有添加rel=”noopener noreferrer”得话就会存在一定得安全风险; 原理解析...:我们唯一的目的就是限制window.opener的访问行为,此时我只需要在标签中加上一个rel="noopener"属性(chrome)或者rel="noreferrer"属性(火狐),当然您可以将两个属性值合并写成...rel="noopener noreferrer"来完整覆盖,此时子页面就再也访问不到父页面的句柄所以更无法操作原窗口的句柄; 也可以通过js来控制限制句柄的访问: var otherWindow =...target=”_blank”后面添加一句rel="noopener noreferrer"。

    47010
    领券