rel="noopener noreferrer"属性的作用是告诉浏览器在打开新页面时采取一些安全措施,以防止新页面利用原页面的窗口对象执行恶意脚本,来防止钓鱼网站,提高页面安全性。具体来说: rel="noopener":防止新页面通过window.opener访问原页面的窗口对象,避免潜在的恶意行为。 rel="noreferrer":防止新页面将来源地址发送给目标页面...
通常noopener 和 noreferrer 会同时设置,rel=“noopener noreferrer”。因为一些老旧浏览器不支持 noopener。 使用target="_blank" 在新标签页中打开第三方地址时, 必须设置 rel=“noopener noreferrer”。
rel=noopener 新特性 <a href="www.baidu.com" target="_blank" rel="noopener noreferrer"></a> 在chrome 49+,Opera 36+,打开添加了rel=noopener的链接,window.opener会为null。在老的浏览器中,可以使用 rel=noreferrer 禁用HTTP头部的Referer属性,使用下面JavaScript代替target='_blank'的解决此问题: varother...
`rel="noreferrer noopener"` 是 HTML 中 `<a>` 标签的属性，用于控制链接的行为。- `noreferrer`：...
rel="noopener":防止新页面通过window.opener访问原页面。 rel="noreferrer":防止浏览器发送HTTP引用来源(referrer)头。 <a>标签是HTML中最基础也是最常用的元素之一,主要用于实现页面跳转。它通过href属性指定目标URL,可以跳转到外部网站、网站内其他页面、甚至页面中的特定位置。你还可以通过target属性控制链接的打开方...
你的页面如果不加上这个rel="noopener"会被人链接到别的网站,而noreferrer是一些旧浏览器的规范。 一般情况下,这两个合并使用,例如: <ahref="www.baidu.com"target="_blank"rel="noopener noreferrer"></a> 原理 [2] 网页A: <!DOCTYPE html><htmllang="en"dir="ltr"><head><metacharset="utf-8"><...
在Chrome 49+,Opera 36+,打开添加了 rel=noopener 的链接, window.opener 会为null。在老的浏览器中,可以使用 rel=noreferrer 禁用HTTP头部的Referer属性,使用下面JavaScript代替 target=’_blank’ 来解决此问题: var otherWindow = window.open('http://www.baidu.com'); otherWindow.opener = null; otherWin...
rel="noopener noreferrer":增强安全,阻止新窗口对原窗口的控制,防止安全漏洞。 download:指示浏览器下载URL指向的资源,而非导航到它。 🚀实战演练:超链接的多样玩法 🌈内链与外链 内链:链接到网站内部的页面,提升用户体验和SEO。 <a href="/about">关于我们</a> ...
【解决方案】a标签中添加一个rel属性,rel=”noopener noreferrer”举个例子: <a href=”目标链接” target=”_blank” rel=”noopener noreferrer”><span>了解更多</span></a> 这样就完美解决了a标签跳转超链接为空白页的问题,博客里做个记录,也方便网友参考借鉴。
所以,如果要在新标签页中打开第三方地址,最好是给a标签代码添加rel="noopener"属性。 noreferrer属性作用 类似于 noopener。 设置rel="noreferrer"后,新打开的页面无法获取源页面的窗口进行攻击。 同时,无法从新打开的页面获取document.referrer信息。 此信息包含源页面的地址。