【HTML并不简单】笔记1-常用rel总结:nofollow、noopener、opener、noreferrer,relList

文章目录

    • rel="nofollow"
    • rel="noopener"与rel="opener"
    • rel="noreferrer"
    • relList对象

《HTML并不简单:Web前端开发精进秘籍》张鑫旭,一些摘要:

HTML,这门语言的知识体系非常庞杂,涉及Web交互开发、SEO(搜索引擎优化)​、安全、无障碍访问等各个领域,并不仅仅是单纯的标签结构。
大家之所以对HTML有错误认知,一是因为不关心,二是因为认为它可替代,三是因为它缺少好的科普著作。

过去,这是前端开发中的常识,而如今却是冷知识,知者甚少。
一方面是因为前端知识图谱更广了,从业者学习的精力有限,无暇顾及这部分内容;另一方面是产品形态更加多样化,例如移动端产品、工具类产品是不需要SEO知识的;当然,还有一部分原因是,这些知识的匮乏对业务收益的影响是不可见的,或者可以通过其他策略规避因开发人员不懂rel="nofollow"给产品带来的损失。


a元素,想要跳转到某个页面,使用href属性即可。若想新窗口打开目标页面,则:

<a href="/" target="_blank">首页</a>

即可。


a元素支持rel属性。
HTML 属性:rel - HTML(超文本标记语言) | MDN (mozilla.org)

在这里插入图片描述
我们这里关注几个值:

  • nofollow
  • noopeneropener
  • noreferrer

rel=“nofollow”

给a元素设置rel="nofollow"是SEO中的常用策略,用来告诉搜索引擎不要追踪这个链接。一般情况下,有两种情况需要设置此属性:

  • 目标页面是无效信息,或含有敏感信息
  • 目标是外站,不希望共享权重

不希望共享权重的详细描述:

SEO中有个策略,如果一个权重很高的网站,直接外链一个权重不高的中小网站,同时没有设置rel=“nofollow”,那么这个中小网站的权重有一定的概率会被提高

如果不想权重外泄,可以设置此属性。

相关链接:

何为Nofollow及如何正确地使用? - 知乎 (zhihu.com)

如何用其他方法规避不懂rel="nofollow"带来的损失?

方法:将所有的外链都换成本站地址进行中转

专门申请一个域名,A网站想要外联B网站,点击B网站先跳到中转站,再跳去B网站。这样可以避免权重外泄,也可以统计外链的点击量。

CSDN就是这样做的:
在这里插入图片描述

https://link.csdn.net/?from_id=xxxxxxxx&target=https%3A%2F%2Fzhuanlan.zhihu.com%2Fp%2F315000749

rel="noopener"与rel=“opener”

省流版:如果是不信任的链接地址,只要是新窗口打开的target="blank",一定要设置rel="noopener"

有场景如下:

主页面有一个“登录”按钮,点击后会开启一个新窗口进行登录,现在希望用户登录成功后,主页面自动刷新,该如何实现?

或许可以用以下方法:

  • visibilitychange事件
  • postMessage实现跨页面通信
document.addEventListener('visibilitychange',function(){if(document.visibilitychange==='visible'){// 登陆成功}
})

但是这两种方法,要么有运行冗余外加执行时机滞后的问题,要么学习成本高,不好。

本小节的rel='opener'就可以精确又轻松地实现上述需求:

<a href="/" target="_blank" rel="opener">登录</a>

在登录成功后,执行:

window.opener.location.reload()

但是,这样会有安全隐患。window对象的权限太高了,不仅挂载在window对象上的属性和方法可以被执行,任何document对象的属性和方法也可以被执行,因为document对象可以通过window.document访问。

有可能出现被恶意修改主页面内容,或被人通过window.opener.document.cookie获取用户的敏感信息并进行身份伪造等。

作者写了一个页面来演示这种情况:https://www.htmlapi.cn/2/1-1.html

在2021年以前,很多浏览器针对新窗口打开的链接,都是默认放开window.opener的,即,如有链接如下:

<a href="https://www.aaa.com" target="_blank">登录</a>

那么,此网站www.aaa.com可以通过window.opener对来源页面为所欲为,无论是跳转到恶意网站、注入恶意信息、伪造用户身份,都是有可能的。

因此,那时有一个技术常识,设置了target="blank"的外站一定要设置rel="noopener",这样,外站页面的window.operer就是null,也就没有安全隐患了。

不过,从2020年开始,许多浏览器设置target="blank"的链接元素默认不再是operer,而是noopener。但是,我们还是要手动设置rel="noopener",以防万一。

对于上述场景的需求,让我们看看gpt怎么说:

  1. 在主页面中,创建一个链接,点击该链接会在新窗口中打开登录页面:
<a href="/login" target="_blank" rel="noopener noreferrer">登录</a>
  1. 在新窗口的登录成功后的处理逻辑中,添加一行代码,用于刷新主页面:
if (window.opener) {window.opener.location.reload();
}

这段代码检查window.opener是否存在,如果存在(即当前窗口是由另一个窗口打开的),则刷新打开当前窗口的窗口。

请注意,出于安全原因,你应该总是在使用target="_blank"时添加rel="noopener noreferrer"属性。这可以防止新窗口通过window.opener修改打开它的窗口的location,并防止Referer Header泄露信息。

rel=“noreferrer”

首先要了解document.referrer这个API。

document.referrer可以返回当前页面的来源地址(当前页面的上一个页面)。用户可以直接在浏览器的地址栏输入URL地址进行访问。若通过设置了rel='noreferrer'的链接元素访问,那么document.referrer就是空字符串。

如edge首页:

在这里插入图片描述

如我从内容管理访问我自己的文章:

在这里插入图片描述

所有知名的网站分析工具,如百度统计和谷歌分析,都是通过document.referrer来判断多少 PV(页面访问量) 来自搜索引擎,多少PV来自社交媒体,以及多少PV来自直接访问的。

我们可以借用document.referrer来完成一些开发任务,与细节体验相关。有两个例子。

例一:

在移动端开发中,页面左上角往往会有一个“返回”按钮,但如果用户是通过点击某个分享链接进入的,那么这个返回的逻辑就不对,因为并没有上一页,此时这个“返回”按钮显示为“主页”按钮更合适。此时,我们就可以使用document.referrer来优化此细节,如果document.referrer是空字符串,则点击左上角的按钮会回到首页;如果不是,则会返回上一页。

例二:

在某列表页面,点击任意列表会进入详情页,然后希望再次返回(通过页面内链接,而非浏览器的“后退”按钮)到列表页的时候,页面依然定位在之前的滚动位置,但如果是从其他页面进入的,则滚动置顶。

可以通过在路由里加参数实现,若从列表项返回则:

<a href='/list.html?from=detail'>返回列表<a>

若从其他地方返回,则没有此参数:

<a href='/list.html?from=detail'>返回列表<a>

但是这样不够优雅,产生了副作用。可以使用浏览器自带的API:

if(/detail\.html/.test(document.referrer)){// 为true说明来源页面,即上一个页面是detail.html,即从详情页来的,执行滚动还原
}

例如,如果用户从"http://example.com/detail.html"页面导航到当前页面,那么这个if语句将为true,并执行其内部的代码。如果用户从"http://example.com/otherpage.html"或直接在浏览器中输入URL来访问当前页面,那么这个if语句将为false,并跳过其内部的代码。

作者提供的例子:https://www.htmlapi.cn/2/1-2.html

那么,我们要在什么时候给链接设置rel="noreferrer"

  • 自己产品的链接都不要设置:设置了会影响用户访问路径的追踪,进而影响页面的流失率等数据的统计
  • 外站链接,作者建议都设置:URL中含有大量信息,甚至有隐私内容,如搜索结果落地页的URL会包含搜索关键词,最好不要泄露
  • 若产品是社交媒体,可以不设置:如微博、知乎等。这种产品以社交为主,更看重信息传播。暴露referrer信息有助于第三方网站溯源,间接增加访问量和热度。

(如上述截图,CSDN也没有设置)

注意,我们会经常看见如下代码,即noopener和noreferrer同时设置:

<a href='xxxx' target="_blank" rel="noopener noreferrer">外部网站<a>

但是,社交媒体就不担心隐私泄露了吗?实际上,rel="noreferrer"的确存在不足,其设置与否的效果就像是0和1,并没有折中的说法,也就是说,无法兼顾信息传播和隐私保护

于是,2016年,各大浏览器开发商陆续支持一个新的HTML属性,referrerpolicy,可以兼顾信息传播和隐私保护,之后会讲。

还有一种少见的场景:

链接地址直接是外部图片,而这个图片设置了防外链,此时,给链接元素设置rel="noreferrer"有可能让图片可以访问。如:https://www.htmlapi.cn/2/1-3.html

原因:

防止热链的策略通常是通过检查HTTP的Referer头来实现的。当你从一个网页访问另一个网页时,你的浏览器会发送一个Referer头,告诉服务器你是从哪个页面跳转过来的。如果服务器发现Referer头不是它期望的值(例如,不是同一域名下的页面),那么它可能会拒绝提供服务,例如不返回图片内容。
rel="noreferrer"属性会告诉浏览器在请求资源时不要发送Referer头。 这样,即使图片的服务器设置了防止热链的策略,也无法检查Referer头,因此可能会正常提供服务。

对于作者例子https://www.htmlapi.cn/2/1-3.html,若图片被浏览器缓存了,点第一个链接也可以访问到图片(点完第二个再点第一个就可以访问了,因为缓存了)。

relList对象

对于rel="noopener noreferrer",我们发现rel属性支持使用空格分隔多个值。相似地,class也可以。

class可以用classList.remove移除某个类。rel也可以:使用relList.remove移除某个rel。

它们有专门的接口interface:DOMTokenList

DOMTokenList - Web API | MDN (mozilla.org)

rel属性要比很多人预想的要强大得多,具有其他HTML属性所没有的、独立的API。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/54339.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python数据结构与算法问题详解

Python数据结构与算法问题详解 Python 作为一种高级编程语言&#xff0c;凭借其简洁的语法和强大的内置库&#xff0c;成为了数据结构与算法学习的绝佳工具。本文将深入解析几种常见的数据结构&#xff0c;并结合具体的算法&#xff0c;展示如何在实际问题中高效解决问题。通过…

《PMI-PBA认证与商业分析实战精析》第7章 解决方案评价

第7章 解决方案评价 本章主要内容&#xff1a; 评价的建议思维 解决方案的评价计划 确定评价什么 何时以及如何验证解决方案的结果 评价验收标准和解决缺陷 促进通过/不通过的决策 获得解决方案的签字确认 评价解决方案的长期绩效 解决方案替换/淘汰 本章涵盖的考试…

36 指针与 const 的多种搭配:指向常量的指针、常量指针、指向常量的常量指针、指针到指针的常量(涉及双重指针)

目录 1 指向常量的指针 1.1 概念 1.2 语法格式 1.3 声明与初始化 1.4 实际应用 1.4.1 保护数据 1.4.2 函数参数 1.4.3 字符串常量 2 常量指针 2.1 概念 2.2 语法格式 2.3 声明与初始化 2.4 实际应用 2.4.1 保护指针指向的地址 2.4.2 数组处理 2.4.3 函数参数 …

ASP.NET Core 创建使用异步队列

示例图 在 ASP.NET Core 应用程序中&#xff0c;执行耗时任务而不阻塞线程的一种有效方法是使用异步队列。在本文中&#xff0c;我们将探讨如何使用 .NET Core 和 C# 创建队列结构以及如何使用此队列异步执行操作。 步骤 1&#xff1a;创建 EmailMessage 类 首先&#xff0c…

1、Spring Boot 3.x 集成 Eureka Server/Client

一、前言 基于 Spring Boot 3.x 版本开发&#xff0c;因为 Spring Boot 3.x 暂时没有正式发布&#xff0c;所以很少有 Spring Boot 3.x 开发的项目&#xff0c;自己也很想了踩踩坑&#xff0c;看看 Spring Boot 3.x 与 2.x 有什么区别。自己与记录一下在 Spring Boot 3.x 过程…

Linux下的IO模型

阻塞与非阻塞IO&#xff08;Input/Output&#xff09; 阻塞与非阻塞IO&#xff08;Input/Output&#xff09;是计算机操作系统中两种不同的文件或网络通信方式。它们的主要区别在于程序在等待IO操作完成时的行为。 阻塞IO&#xff08;Blocking IO&#xff09; 在阻塞IO模式下…

详细介绍:API 和 SPI 的区别

文章目录 Java SPI (Service Provider Interface) 和 API (Application Programming Interface) 的区别详解目录1. 定义和目的1.1 API (Application Programming Interface)1.2 SPI (Service Provider Interface) 2. 使用场景2.1 API 的应用场景2.2 SPI 的应用场景 3. 加载和调…

PyGWalker:让你的Pandas数据可视化更简单,快速创建数据可视化网站

1、PyGWalker应用: 在数据分析的过程中,数据的探索和可视化是至关重要的环节,如何高效地将分析结果展示给团队、客户,甚至是公众,是很多数据分析师和开发者面临的挑战,接下来介绍的两大工具组合——PyGWalker与Streamlit,可以帮助用户轻松解决这个问题,即使没有复杂的代…

调用智谱AI,面试小助手Flask简单示例

文章目录 1.接入AI获取API密钥Python代码 2.小助手的实现流程3.Flask应用示例Python文件.pyindex.html运行Flask应用地址栏输入 http://localhost:5000/ 1.接入AI 获取API密钥 在智谱AI的官方网站上注册&#xff0c;右上角点击API密钥&#xff0c;新建并复制一个 API Key&…

个人网络安全的几个重点与防御

1 浏览器 firefox 这是第一选择 如果你真的不明白可以找找各个浏览器漏洞 mail 的危险的 来自与代理和漏洞 浏览器溢出漏洞 实时注意更新就可以 2 防火墙 大家都用windows 只需在 gpedit.msc 设置 但有什么未知漏洞就不得而知了 因为美国的计划问题 网络端口溢出漏洞 但…

流行前端框架Vue.js详细学习要点

Vue.js是一款流行的JavaScript前端框架&#xff0c;用于构建用户界面&#xff0c;特别是在构建交互式Web应用程序时表现出色。以下是Vue.js详细学习的一些要点&#xff1a; 1. Vue.js基础 定义与特点&#xff1a;Vue.js是一款渐进式JavaScript框架&#xff0c;提供响应式数据…

AI不可尽信

看到某项目有类似这样的一段代码 leaves : make([]int, 10) leaves leaves[:0]没理解这样的连续两行,有何作用? 初始化一个长度和容量都为10的切片,接着把切片长度设置为0 即如下demo: (在线地址) package mainimport "fmt"func main() {leaves : make([]int, 1…

MongoDB-aggregate流式计算:带条件的关联查询使用案例分析

在数据库的查询中&#xff0c;是一定会遇到表关联查询的。当两张大表关联时&#xff0c;时常会遇到性能和资源问题。这篇文章就是用一个例子来分享MongoDB带条件的关联查询发挥的作用。 假设工作环境中有两张MongoDB集合&#xff1a;SC_DATA&#xff08;学生基本信息集合&…

Flask-2

文章目录 请求全局钩子[hook]异常抛出和捕获异常abort 主动抛出HTTP异常errorhandler 捕获错误 context请求上下文(request context)应用上下文(application context)current_appg变量 两者区别&#xff1a; 终端脚本命令flask1.0的终端命令使用自定义终端命令 flask2.0的终端命…

基于深度学习的视频生成

基于深度学习的视频生成是一项极具前景的技术&#xff0c;旨在通过神经网络模型生成逼真的动态视频内容。随着生成对抗网络&#xff08;GANs&#xff09;、自回归模型、变分自编码器&#xff08;VAEs&#xff09;等深度学习模型的发展&#xff0c;视频生成技术已经取得了显著进…

⌈ 传知代码 ⌋ 将一致性正则化用于弱监督学习

&#x1f49b;前情提要&#x1f49b; 本文是传知代码平台中的相关前沿知识与技术的分享~ 接下来我们即将进入一个全新的空间&#xff0c;对技术有一个全新的视角~ 本文所涉及所有资源均在传知代码平台可获取 以下的内容一定会让你对AI 赋能时代有一个颠覆性的认识哦&#x…

查看 Git 对象存储中的内容

查看 Git 对象存储中的内容 ls -C .git/objects/<dir>ls: 列出目录内容的命令。-C: 以列的形式显示内容。.git/objects/<dir>: .git 是存储仓库信息的 Git 目录&#xff0c;objects 是其中存储对象的子目录。<dir> 是对象存储目录下的一个特定的子目录。 此…

mysql学习教程,从入门到精通,SQL 修改表(ALTER TABLE 语句)(29)

1、SQL 修改表&#xff08;ALTER TABLE 语句&#xff09; 在编写一个SQL的ALTER TABLE语句时&#xff0c;你需要明确你的目标是什么。ALTER TABLE语句用于在已存在的表上添加、删除或修改列和约束等。以下是一些常见的ALTER TABLE语句示例&#xff0c;这些示例展示了如何修改表…

H.264编解码 - I/P/B帧详解

一、概述 在H.264编解码中,I/P/B帧是一种常见的帧类型。以下是它们的解释: I帧(关键帧):也称为关键帧,它是视频序列中的第一个帧或每个关键时刻的第一个帧。I帧是完整的、自包含的图像帧,不依赖于其他帧进行解码。它存储了关键时刻的完整图像信息。 P帧(预测帧):P帧…

<STC32G12K128入门第十六步>获取NTP网络时间

前言 这里主要讲解如何通过NTP服务器获取网络时间。 一、NTP是什么? NTP全名“Network TimeProtocol”,即网络时间协议,是由RFC 1305定义的时间同步协议,用来在分布式时间服务器和客户端之间进行时间同步。 NTP基于UDP报文进行传输,使用的UDP端口号为123。使用NTP的目的…