使用场景：最近项目中使用一个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 "的安全漏洞问题的更多相关文章

  1. HTML <a> 标签的 target 属性

    HTML <a> 标签的 target 属性 HTML <a> 标签 定义和用法 <a> 标签的 target 属性规定在何处打开链接文档. 如果在一个 <a ...

  2. 局部（或全局）设置<a>标签的target属性

            对于超链接<a>标签,target属性的设置是比较关键的,在不同的用户场景下选用适合的新页面载入方式,可以大大的提高访客的体验感.我们一般对target的设置可以挨个来,但 ...

  3. a标签的target指向iframe

    <html> <head> <meta charset="utf-8" /> </head> <body> <ta ...

  4. web安全--<a>标签带有target=“_blank”

    面试时遇到安全相关的一个题目 :超链接<a>标签带有target=“_blank”属性的,容易被利用进行诸如钓鱼等攻击,请问如何在书写代码时进行防范?(谷歌和火狐环境). 自己看到这道题目 ...

  5. html——a标签中target属性

    有 4 个保留的目标名称用作特殊的文档重定向操作: _blank 浏览器总在一个新打开.未命名的窗口中载入目标文档. _self 这个目标的值对所有没有指定目标的 <a> 标签是默认目标, ...

  6. <a>标签的target 属性 全局作用

    局部(或全局)设置<a>标签的target属性           对于超链接<a>标签,target属性的设置是比较关键的,在不同的用户场景下选用适合的新页面载入方式,可以大 ...

  7. 512，a标签的target属性

    <a> 标签的 target 属性规定在何处打开链接文档. 1.“_blank”的意思: 浏览器总在一个新打开.未命名的窗口中载入目标文档. 2.“_parent”的意思: 这个目标,使得 ...

  8. Apache struts2 Freemarker标签远程命令执行_CVE-2017-12611(S2-053)漏洞复现

    Apache struts2 Freemarker标签远程命令执行_CVE-2017-12611(S2-053)漏洞复现 一.漏洞描述 Struts2在使用Freemarker模块引擎的时候,同时允许 ...

  9. a标签的target属性

    _blank 浏览器总在一个新打开.未命名的窗口中载入目标文档. _self 这个目标的值对所有没有指定目标的 <a> 标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源 ...

随机推荐

  1. Django Rest Framework之认证

    代码基本结构 url.py: from django.conf.urls import url, include from web.views.s1_api import TestView urlpa ...

  2. 汇编语言--CPU资源和存储器（二）

    二.CPU资源和存储器 需要访问的硬件资源主要有:CPU内部资源.存储器和I/O端口. 1.寄存器组 (1)16位寄存器组 16位CPU所含有的寄存器有(见图2.1中16位寄存器部分): 4个数据寄存 ...

  3. JavaScript一团乱，这是好事

    译者按: JavaScript从简单变复杂了,作者从另一个角度看待这个问题. 原文: JavaScript’s a mess – and that’s a good thing 译者: Fundebu ...

  4. nginx重启服务

    修改完nginx配置后,需要使用 nginx -s reload使修改的配置生效,配置生效是平滑的,不会对访问产生任何影响reload后会启动新的进程接受新请求,对于未处理完的请求还是用老的配置,直到 ...

  5. linux学习笔记-lrmi源码包的编译安装方法

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 官方的lrmi包没有人更新了,如果碰到需要这个编译安装这个包,可以参考我的解决思路,如下: https://pkgs.org/这 ...

  6. HDU 6138 Fleet of the Eternal Throne(后缀自动机)

    题意 题目链接 Sol 真是狗血,被疯狂卡常的原因竟是 我们考虑暴力枚举每个串的前缀,看他能在\(x, y\)的后缀自动机中走多少步,对两者取个min即可 复杂度\(O(T 10^5 M)\)(好假啊 ...

  7. 【读书笔记】iOS-微定位技术

    在大型商场,医院或是大楼里,你是否曾经有过找不到想去的地方的经历呢?这种情况下采用传统的定位方法就有些力不从心了.首先这些地方不能采用GPS定们,而Wifi和蜂窝式移动电话基站定位误差比较大.这种情况 ...

  8. excel单元格内换行的方法

    方法一:调整单元格格式换行 选定单元格,选择“格式→单元格”,在弹出的对话框中单击“对齐”,选中“自动换行”,单击[确定]按钮即可. 方法二:Alt+Enter键(使用强行换行时,系统会同时选择自动换 ...

  9. okhttp 的使用

    ①在OK HTTP 的GitHub上下载  jar 包 或者添加 grad'le依赖  OK HTTP 的地址 : https://github.com/square/okhttp ②导入jar包不想 ...

  10. springcloud 入门 10 (eureka高可用)

    eureka高可用: 说白了,就是加一个实例作为原实例的备份,然后一起对外提供服务.这样可以保证在一台机器宕机的时候,整个系统不会死掉.保证其继续对外服务. eureka的集群化: 服务注册中心Eur ...