Meta 的 referrer 干什么用

背景:

最近在做一个 vue 项目,项目中的一些图片来自外网,动态的赋值给src属性,结果加载不出来,如果拿上地址直接给src属性,可以加载出来, 查看控制台的network,错误信息为 403(forbidden)

解决方案:

index.htmlhead标签内加上一个meta标签

<meta name="referrer" content="no-referrer"/>

Referrer Policy(引用策略)

引用策略就是从一个文档发出请求时,是否在请求头部定义 Referrer 的设置。

referrer 的值

  1. 空字符串
  2. no-referrer
  3. no-referrer-when-downgrade
  4. same-origin
  5. origin
  6. strict-origin
  7. origin-when-cross-origin
  8. strict-origin-when-cross-origin
  9. unsafe-url
  • 默认值: 一般浏览器的默认值是 no-referrer-when-downgrade
  • no-referrer: 所有请求不发送 referrer
  • no-referrer-when-downgrade: 当请求安全级别下降时不发送 referrer。目前,只有一种情况会发生安全级别下降,即从 HTTPS 到 HTTP。HTTPS 到 HTTP 的资源引用和链接跳转都不会发送 referrer。
  • same-origin:对于同源的链接和引用,会发送referrer,其他的不会。
  • origin:会发送 referrer,但只会发送源信息。源信息包括访问协议和域名。
  • strict-origin:这个相当于 origin 和 no-referrer-when-downgrade 的 AND 合体。即在安全级别下降时不发送 referrer;安全级别未下降时发送源信息。
    注意:这个是新加的标准,有些浏览器可能还不支持。
  • origin-when-cross-origin:这个相当于 origin 和 same-origin 的 OR 合体。同源的链接和引用,会发送完全的 referrer 信息;但非同源链接和引用时,只发送源信息。
  • strict-origin-when-cross-origin:这个比较复杂,同源的链接和引用,会发送 referrer。安全级别下降时不发送 referrer。其它情况下发送源信息。注意:这个是新加的标准,有些浏览器可能还不支持。
  • unsafe-url:无论是否发生协议降级,无论是本站链接还是站外链接,统统都发送 Referrer 信息。正如其名,这是最宽松而最不安全的策略。

设置方法

  • 通过 http 响应头中的 Referrer-Policy 字段
  • 通过 meta 标签,name 为 referrer(本次使用)
  • 通过<a>、<area>、<img>、<iframe>、<link>元素的 referrerpolicy 属性。

参考: Web 页面 Meta 的 Referrer Policy

推荐阅读更多精彩内容

  • 一个图片,本站或者外站,都要想办法拿到 前言介绍 近期在一个项目中,需要引用大量外部网站的图片,竟意外的发现在生成...
    lancelot_lewis阅读 2,420评论 0 2
  • 当用户在浏览器上点击一个链接时,会产生一个 HTTP 请求,用于获取新的页面内容,而在该请求的报头中,会包含一个 ...
    xnotepad阅读 1,482评论 0 3
  • 摘要 目前有许多的恶意攻击都是以网站及其用户作为目标,本文将简要介绍在 Web 服务器一侧的安全加固和测试方法。 ...
    RiboseYim阅读 697评论 0 4
  • 片段8《不抱怨的世界》 P19 R: 抱怨:一种包含能量的语言,它让你将精力投注于当下存在的问题,而不是问题的解决...
    时光书屋阅读 19评论 0 0
  • 01 我说:“做我女朋友吧!” 阿欣坐在我的对面,眼神闪烁,看着窗外的车流和人群。手里不停的用吸管搅动着没喝完的饮...
    与你讲故事阅读 266评论 3 7