添加meta标签

一种方法是给页面添加一个meta标签,在meta标签里指定referrer的值,比如`。网上可以查到各种奇奇怪怪的值,其实我总结了来源于两个地方。
一个是来自[whatwg](https://wiki.whatwg.org/wiki/Meta_referrer)的标准。他给meta标签的referrer属性定义了四个值:
never,always,origin,default。如果需要关闭referrer,就将referrer的值设置成”never”。这个标准还是比较老的,而且在他的主页上也明确写了”This
document is
obsolete.”。不过据我调研,或许正是由于这个标准比较老,反而导致绝大多数浏览器对他的支持都很好,因祸得福蛤蛤。
另外一个是来自[MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta)的标准。他给meta标签的referrer属性定义了五个值,如果要关闭referrer,就将它的值设置成
no-referrer`。
不过我们需要注意的是,meta标签添加的位置也很重要,有的浏览器能够识别非head标签中的meta标签,有的就不行。在实际使用的时候还要小心,这一点下文会有一个更具体的比较。

最近自己写了一个网站玩,在引用别人网站的图片是遇到了一些小问题。

成功引起注意

当时近距离遇到防盗链:这么神奇,这是怎么实现的?

随即chromeF12->开发者工具,取出显示成防盗链样式的图片URL,发现和源链接没有区别。新开一个tab,Ctrl+V->Enter,什么鬼?能正常显示啊!腾讯真nb?能知道我是直接浏览器打开而不是偷偷塞到img标签的src?

直觉告诉我,肯定两种方式发送的请求图片的Request Header有区别

设置方法

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

参考: Web 页面 Meta 的 Referrer Policy

添加ReferrerPolicy属性

添加meta标签相当于对文档中的所有链接都取消了referrer,而ReferrerPolicy则更精确的指定了某一个资源的referrer策略。关于这个策略的定义可以参照MDN。比如我想只对某一个图片取消referrer,如下编写即可:

<img src=”xxxx.jpg” referrerPolicy=”no-referrer” />

1
<img src="xxxx.jpg"  referrerPolicy="no-referrer" />

经过了解,发现这是一个叫做防盗链的东西,网站设置了防盗链的策略,会在后台判断请求的Referrer属性是不是来自于一个非本域名的网站,如果来源不是本域名就返回403 forbidden。我们要做的就是用最方便的方法使得我的页面能够不受他的防盗链策略的影响。我从网上搜到了几个解决方法。

解决方案

目前常用方法无外乎两种,第一种是通过第三方跳板服务:
这些服务一般多是通过后端代理的方式暴露出跳板api,使用方在调用时通过传参的方式将要请求的url传到代理服务器,代理服务器作为中间方再去请求腾讯资源代理服务器的图片资源,拿到资源后返还给调用方,之前有一些稳定的跳板服务,比如QQ浏览器(一家人应该不会有问题)提供的

http://read.html5.qq.com/image?src=forum&q=5&r=0&imgflag=7&imageUrl=

在上述链接后面给出原始图片的url,然后就可以坐等QQ跳板服务为我们取回想要的图片

然鹅。。。

图片 1

QQ浏览器也加了防盗链校验

果然是一家人。。。
只能尝试第二种方式了

第二种方案就是让浏览器发图片请求时,请求头不带上Referer头信息。像这种控制代理动作,一般通过meta标签来进行设置,最终在meta找到了想要的

referrer controlling the content of the HTTP Referer HTTP header
attached to any request sent from this document:

图片 2

referrer取值

参考上面的取值含义,我们只需要在所需页面的<head>中加上:

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

效果图

图片 3

Referer没了,图片也正常显示了[手动滑稽笑脸]

背景:

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

解决方案:

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

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

解决方案

像这个样子,src后面跟的是别的网站的图片的url。

防盗链

盗链是指未经资源代理站点许可而擅自引用其资源。防盗链就是这些资源代理站点,为了避免盗链行为而采取的一种很常见的屏蔽措施,我们这里主要讨论图片方面的防盗链及相关的解决方案

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 信息。正如其名,这是最宽松而最不安全的策略。

Author

发表评论

电子邮件地址不会被公开。 必填项已用*标注