• 关于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"属性,那么你就让用户暴露在一个非常简单的钓鱼攻击之下。

  • 相关阅读:
    命令安装mongod作为服务启动
    npm命令
    win服务
    win进程操作
    【数据结构与算法之美】7.排序算法之冒泡、选择、插入
    【leetcode】23.合并K个排序链表
    【leetcode】141.环形链表
    【数据结构与算法之美】6.环形队列
    【数据结构与算法之美】5.基于链表实现队列
    【数据结构与算法之美】4.基于数组实现队列
  • 原文地址:https://www.cnblogs.com/tugenhua0707/p/9709424.html
Copyright © 2020-2023  润新知