关于html的a标签的target="__blank "的安全漏洞问题
使用场景：最近项目中使用一个a标签的 target="__blank "链接跳转 页面，打开一个新的 pdf文件(或者外部的一个网页)，然后在chrome浏览器中快速的滑动的时候，页面偶尔会出现空白现象，这可能是一个浏览器的漏洞，如何解决这个问题，需要对a标记需要target="__blank "的链接中，我们加上rel="nofollow noopener noreferrer" 这个就可以解决这个漏洞了。
比如我现在在本地的页面为 index.html, 然后链接引入了一个外部的页面，比如是http://www.b.com这样的一个链接如下：
// 本地页面
<html lang="en">
<body>
<a href="http://www.b.com" target="_blank">http://www.b.com</a>
</body>
</html> // b.com下的页面
<html lang="en">
<body>
<script type="text/javascript">
if (opener) {
opener.window.location.href="http://www.danger.com";
}
</script>
</body>
</html>
当我们点击网页中的超链接的时候，打开http://www.b.com页面，就会发现我们的网页很有可能被篡改成为其他的网页，比如为 www.danger.com。
并且在外部打开的网页有本网页的全部控制权，比如可以获取本页面的cookie等信息。甚至在跨域的情况下也是生效的。
因此 对于使用了 target="_blank" 并且跳转到外部链接的超链接，加上 rel="noopener noreferrer" 属性即可，此时外部链接获取到的 opener 为 null。
rel="noopener" 可以确保 window.opener 为 null 在 Chrome 49+ 和 Opera 36，而对于旧版本浏览器和火狐浏览器，可以加上 rel="noreferrer" 更进一步禁用 HTTP 的 Referer 头，或者使用 js 打开新页面。如下js代码：
<div id="btn">test</div>
<script type="text/javascript">
const safeOpen = url => {
var otherWindow = window.open();
otherWindow.opener = null;
otherWindow.location = url;
}
document.getElementById('btn').onclick = function() {
safeOpen('http://wwww.baidu.com');
}
</script>
理解 rel="external nofollow noreferrer"
rel = 'nofollow' 的作用是：它是来告诉搜索引擎，不要将该链接计入权重，因为在很多情况下，我们可以将一些不想传递权重的链接进行nofollow处理，比如一些非本站的链接，不想传递权重，但是又需要加在页面中，比如一些 统计代码，备案号链接，供用户查询链接等等这些。
rel = 'external' 的作用是：它告诉搜索引擎，这个链接不是本站链接.
rel = 'external nofollow'的作用就是上面两种属性一起的含义了，可以理解为：这个链接非本站链接，不要爬取也不要传递权重。
因此对于SEO角度来讲，可以有效的减少蜘蛛爬行的流失。
rel="nofollow noopener noreferrer" 超链接 target="_blank" 要增加 rel="nofollow noopener noreferrer" 来堵住钓鱼安全漏洞。
如果你在链接上使用 target="_blank"属性，并且不加上rel="noopener"属性，那么你就让用户暴露在一个非常简单的钓鱼攻击之下。
关于html的a标签的target="__blank "的安全漏洞问题的更多相关文章
- HTML <a> 标签的 target 属性
HTML <a> 标签的 target 属性 HTML <a> 标签 定义和用法 <a> 标签的 target 属性规定在何处打开链接文档. 如果在一个 <a ...
- 局部（或全局）设置<a>标签的target属性
对于超链接<a>标签,target属性的设置是比较关键的,在不同的用户场景下选用适合的新页面载入方式,可以大大的提高访客的体验感.我们一般对target的设置可以挨个来,但 ...
- a标签的target指向iframe
<html> <head> <meta charset="utf-8" /> </head> <body> <ta ...
- web安全--<a>标签带有target=“_blank”
面试时遇到安全相关的一个题目 :超链接<a>标签带有target=“_blank”属性的,容易被利用进行诸如钓鱼等攻击,请问如何在书写代码时进行防范?(谷歌和火狐环境). 自己看到这道题目 ...
- html——a标签中target属性
有 4 个保留的目标名称用作特殊的文档重定向操作: _blank 浏览器总在一个新打开.未命名的窗口中载入目标文档. _self 这个目标的值对所有没有指定目标的 <a> 标签是默认目标, ...
- <a>标签的target 属性 全局作用
局部(或全局)设置<a>标签的target属性 对于超链接<a>标签,target属性的设置是比较关键的,在不同的用户场景下选用适合的新页面载入方式,可以大 ...
- 512，a标签的target属性
<a> 标签的 target 属性规定在何处打开链接文档. 1.“_blank”的意思: 浏览器总在一个新打开.未命名的窗口中载入目标文档. 2.“_parent”的意思: 这个目标,使得 ...
- Apache struts2 Freemarker标签远程命令执行_CVE-2017-12611(S2-053)漏洞复现
Apache struts2 Freemarker标签远程命令执行_CVE-2017-12611(S2-053)漏洞复现 一.漏洞描述 Struts2在使用Freemarker模块引擎的时候,同时允许 ...
- a标签的target属性
_blank 浏览器总在一个新打开.未命名的窗口中载入目标文档. _self 这个目标的值对所有没有指定目标的 <a> 标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源 ...
随机推荐
- Java 多态 ——一个案例 彻底搞懂它
最近,发现基础真的hin重要.比如,Java中多态的特性,在学习中就是很难懂,比较抽象的概念.学的时候就犯糊涂,但日后会发现,基础在日常工作的理解中占有重要的角色. 下面,我将用一个代码实例,回忆和巩 ...
- 通过AccessKey调用阿里云CDN接口刷新CDN资源案例
通过AccessKey远程调用阿里云CDN接口,快速实现自动化集成部署. CdnService.java package com.nfky.cdn; import com.aliyuncs.Defau ...
- React Native中Mobx的使用
从今天开始我们来搞搞状态管理可否,这几天没怎么写博客,因为被病魔战胜了,tmd,突然的降温让我不知所措,大家最近注意安全,毕竟年底了,查的严,呸,大家注意保暖 特别声明:写该文只是写一下用MobX的思 ...
- 【读书笔记】iOS-xib,点击事件的连接(三)
紧接着上一节来写 一,选中On按钮,同时按住Control键,连接到FirstViewController.h文件中. 会弹出如下对话框. 二,将Connection处选择为Action,同时将Nam ...
- 第三章————用SQL语句操作数据
第三章————用SQL语句操作数据 *********************新增**************************** 1. insert into 表名(列名1,列名2...) ...
- Linux 内存文件系统
Linux内存文件系统:可满足高IO的要求 ramdisk: 基于虚拟在内存中的其他文件系统(ex2fs). 挂载方式:mount /dev/ram /mnt/ramdisk ramfs: 物理内存文 ...
- Python实例---模拟微信网页登录(day4)
第五步: 获取联系人信息---day4代码 settings.py """ Django settings for weixin project. Generated b ...
- MySQL基本操作命令
数据库的基本操作命令 1.登录MySQL -- 进入数据库的方法一 mysql -uroot -pmysql # mysql 数据库密码(显示) -- 进入数据库的方法二 mysql -uroot - ...
- 5.3Python函数（三）
目录 目录 前言 (一)装饰器 ==1.简单的装饰器== ==2.修饰带参数函数的装饰器== ==3.修饰带返回值函数的装饰器== ==4.自身带参数的装饰器== (二)迭代器 (三)生成器 ==1. ...
- Linux 小知识翻译 - 「小型移动式PC」
这次介绍下新闻上提到的「小型移动式PC」.(这个当时日本新闻上的内容) 最近,经常在日本的大卖场中看到一种小型的移动式PC.不仅是小巧方便携带,而且价格也便宜.而且,省电功能的加入,使电池能工作更长的 ...