a标签 链接 target=”_blank” 为什么要增加 rel=”noopener noreferrer”

  • 1
  • 719 次浏览
  • A+
所属分类:建站教程

在<a></a>中使用target="_blank"

a标签 链接 target=

那么会得到以下错误提示:

Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener [react/jsx-no-target-blank]

意思就是必须要加rel="noopener noreferrer",但是,为什么呢

参考原文:https://mathiasbynens.github.io/rel-noopener/

关于rel = noopener

它解决了什么问题呢?

当你正在浏览index.html

想象一下以下的链接是你网站上用户生成的内容。

点击上面的链接,新打开malicious.html在新的页面(使用target=_blank)。就本身而言,并不是一件让人兴奋的事情。

但是malicious.html文档在一个新的tab页包含了一个window.opener,它指向你当前正在浏览的页面。

这意味着一旦用户点击了链接,malicious.html就可以对文档的window的对象有着觉得的控制权。

index.html:

<a target=_blank  href="./malicious.html">
    Click me !! one (same-origin)
</a>

malicious.html

// window.opener 返回打开当前窗口的那个窗口的引用
if(window.opener){
    opener.location = 'http://localhost:63342/Security/index.html/#hax'
    // Just `opener.location.hash = '#hax'` only works on the same origin.

}

注意,当index.html和malicious.html如果是不同源,这也是有效的,windoe.opener.location可以跨源访问!(像window.opener.document是不能跨源访问的,因此CORS不适用在此处)。

在此概念证明中,malicious.html用index.html#hax替换包含index.html的选项卡,index.html#hax选项卡显示隐藏的信息。这是一个相对无害的示例,但它可以重定向到网页仿冒页面,设计看起来像真正的index.html,要求用户填写登录凭据。用户可能不会注意到这一点,因为当重定向发生在后台时,用户焦点会集中在新窗口中的恶意页面上。通过在重定向到后台的网络钓鱼页面之前添加延迟,可以使此攻击更加微妙。

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 运维交流群
  • 扫一扫二维码加入群聊
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0

    • jay 0

      牛逼nice :wink: :wink: :wink: :wink: :wink: