<a> 标签通常会配合着使用 noopener, noreferrer 及 nofollow 这些属性, 它们的作用及用法如下。
The <a> tag usually uses the noopener, noreferrer and nofollow attributes. Their functions and usage are as follows.
noopener
When target="_blank" is added to the link, the target webpage will be opened in a new tab. At this time, in the newly opened page, the window object of the source page can be obtained through window.opener, which is safe Hidden dangers.
Specifically,
Your own webpage A has a link to open another three-party address
B
B webpage obtains the window object of webpage A through window.opener, which can make page A jump to a phishing page window.opener.location.href="abc.com". The user did not notice that the address was redirected. Information leakage occurs after the user name and password are entered on the page
In order to avoid the above problems, the rel="noopener" attribute is introduced, so that the newly opened page cannot get the window object of the source page, and the value of window.opener is null at this time.
Therefore, if you want to open a three-party address in a new tab page, it is best to match it with rel="noopener".
noreferrer
Similar to noopener, after setting rel="noreferrer", the newly opened page cannot obtain the window of the source page for attack. At the same time, document.referrer cannot be obtained in the newly opened page.
Information, which contains the address of the source page.
Usually noopener and noreferrer will be set at the same time, rel="noopener noreferrer".
Since the latter also has the former's ability to restrict access to window.opener, why bother to set both at the same time.
Consider compatibility, because some old browsers do not support noopener.
nofollow
The search engine’s weight calculation for a page includes a number of page references (backlinks), that is, if the page is linked from other places, the page will be judged by the search engine as a high-quality page, and the ranking in the search results will rise.
When rel="nofollow" is set, it means to tell search engines that this link does not contribute to the above ranking.
It is generally used to link internal addresses, or some low-quality pages.
related resources
Prevent Reverse Tabnabbing Attacks With Proper noopener, noreferrer, and nofollow Attribution
noopener
当给链接加上 target="_blank" 后， 目标网页会在新的标签页中打开， 此时在新打开的页面中可通过 window.opener 获取到源页面的 window 对象， 这就埋下了安全隐患。
具体来说,
- 你自己的网页 A 有个链接是打开另外一个三方地址
- B
- B 网页通过
window.opener获取到 A 网页的window对象， 进而可以使得 A 页面跳转到一个钓鱼页面window.opener.location.href ="abc.com"， 用户没注意地址发生了跳转， 在该页面输入了用户名密码后则发生信息泄露
为了避免上述问题， 引入了 rel="noopener" 属性， 这样新打开的页面便获取不到来源页面的 window 对象了， 此时 window.opener 的值是 null。
所以， 如果要在新标签页中打开三方地址时， 最好配全着 rel="noopener"。
noreferrer
与 noopener 类似， 设置了 rel="noreferrer" 后新开页面也无法获取来源页面的 window 以进行攻击， 同时， 新开页面中还无法获取 document.referrer
信息， 该信息包含了来源页面的地址。
通常 noopener 和 noreferrer 会同时设置， rel="noopener noreferrer"。
既然后者同时拥有前者限制获取 window.opener 的功能， 为何还要同时设置两者呢。
考虑到兼容性， 因为一些老旧浏览器不支持 noopener。
nofollow
搜索引擎对页面的权重计算中包含一项页面引用数 (backlinks), 即如果页面被其他地方链接得多， 那本页面会被搜索引擎判定为优质页面， 在搜索结果中排名会上升。
当设置 rel="nofollow" 则表示告诉搜索引擎， 本次链接不为上述排名作贡献。
一般用于链接内部地址， 或一些不太优质的页面。
