关于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> 标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源 ...
随机推荐
- CentOS7 config aliyun yum repository
https://www.cnblogs.com/lpbottle/p/7875400.html 1. 备份原来的yum源 mv /etc/yum.repos.d/CentOS-Base.repo /e ...
- 《移山之道：VSTS软件开发指南》读书笔记
这两天看了<移山之道:VSTS软件开发指南>,对团队软件开发又有了新的认识.也许对于我们这些软件开发的新手来说,最重要的是具体技术与应用框架,但读了这本书后我感觉到,实际团队项目中工具的使 ...
- 每个JavaScript工程师都应懂的33个概念
摘要: 基础很重要啊! 原文:33 concepts every JavaScript developer should know 译文:每个 JavaScript 工程师都应懂的33个概念 作者:s ...
- APP接口做什么？
提交数据:GET POST 有的接口是获取数据和提交数据相结合形式:如检测更新下载
- 多语言网站利器 rel="alternate" hreflang="x"
下面是我在浏览网站时无意看到的,然后就搜了一下,感觉内容不错但我还没有测试,就转载过来做个备注,有时间了在翻过来看看 rel="alternate" hreflang=" ...
- 2017-12-02 编程语言试验之Antlr4+JavaScript实现"圈4"
参考: ANTLR4: Making a compiler with the JavaScript runtime 演示效果虽弱, 还是先上图吧: 在线演示: 地址. 源码库: program-in- ...
- 【代码笔记】Web-HTML-CSS
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 【代码笔记】Web-利用Dreamweaver实现表格
一,打开Dreamweaver---->File---New---->如下图所示.选择HTML,点击OK. 二,会出现如下图所示界面.把光标放到Body处. 三,Insert---> ...
- html标签必备
常用快捷键 Ctrl+c 复制 Ctrl+v 粘贴 Ctrl+x 剪切 Ctrl+a 全选 Ctrl+s 保存 Ctrl+z 撤销一步 Windows+d 返回桌面 Windows+e 我的电脑 Wi ...
- Ansible--常用模块使用
ansible命令解释 通过ansible命令执⾏的任务称为ad-hoc命令(任务),其实它是相对playbook⽽⾔的.通常,命令⾏⽤来实现ansible的批量管理功能,playbook⽤来实现批量 ...