html-a-noreferer

使用 a 标签的问题

HTMl:<a></a> noreferrer noopener nofollow

在使用 VSCode 编辑 Html 代码时:提示

Line 71:36: 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" 属性,以为就这样完事了,没问题!


可到了测试环境发现有一个跳转到下载链接的接口一直身份验证不通过
就去往下排查了一下,发现身份验证逻辑中有:在指定环境下验证请求头中的 referer 属性是否等于 host
的逻辑,

然后就去检查了相关的请求头信息,发现问题了: 没有 referer 属性;

最初以为是Nginx代理接口的时候没有转发对于的头信息,经过排查发现并不是.

后来有继续对比线上环境的接口,同样浏览器下同一个接口出现了 线上环境 请求头与 测试环境请求头不一致的问题.
重点表现: Request Header 中的 Referrer Policy: no referer.

这才知道: a 标签的 noreferrer 会导致跳转地址的请求重设 Referrer Policy

Referrer Policy:

策略

  • No Referrer:任何情况下都不发送Referrer信息
  • No Referrer When Downgrade:仅当协议降级(如HTTPS页面引入HTTP资源)时不发送Referrer信息。是大部分浏览器默认策略。
  • Origin Only:发送只包含host部分的referrer.
  • Origin When Cross-origin:仅在发生跨域访问时发送只包含host的Referer,同域下还是完整的。与Origin Only的区别是多判断了是否Cross-origin。协议、域名和端口都一致,浏览器才认为是同域。
  • Unsafe URL:全部都发送Referrer信息。最宽松最不安全的策略。

使用

  • CSP(Content-Security-Policy)

  • 标签

    • meta
    • a

    html页面的meta标签指定。

    <meta name=referrer content=no-referrer>

    a 标签的referer属性作用的只是当前标签。
    策略只有三中:不传、只host、都传
    针对单个链接设置的策略优先级高。

    <a href="http://example.com" rel="noopener noreferrer" >xxx</a>

  • 最后去掉了 a 标签的 rel=”noopener noreferrer” 😊