Web 页面 Meta 的 Referrer Policy

一个图片,本站或者外站,都要想办法拿到

前言介绍

近期在一个项目中,需要引用大量外部网站的图片,竟意外的发现在生成环境中没有问题,但在本地的开发环境下,有部分图片无法显示。于是就开启了跨域图片显示的斗争中。

名词解释

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

目前很多网站的防盗链机制都是用头部定义 Referrer 来判断是否是盗链。其实这个很容易破解,自己在请求时加上 Referrer 头部就行。

在哪些情况下会设置引用头呢?一般来说,加载一个 HTML 页面之后,本 HTML 页面里的 JavaScript 文件,CSS 文件,画面文件都会设置 Referrer。然后,点击这个 HTML 页面里的链接,跳转其它画面时,也会设置 Referrer。

Referrer Policy 的值

  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,其他的不会。

同源的意思是指同一个域名且同一协议。

如果设置成 same-origin,那么 aaa.com 引用 bbb.com 的资源,不会发送 referrer。子域名也不是同一个域名,aaa.com 引用 test.aaa.com 的资源,不会发送 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 信息。正如其名,这是最宽松而最不安全的策略。

Referrer Policy 的设置方法

我们可以用以下方法来设置引用策略(Referrer Policy)。

  • 通过 http 响应头中的 Referrer-Policy 字段
  • 通过 meta 标签,name 为 referrer
  • 通过<a><area><img><iframe><link>元素的 referrerpolicy 属性。
  • 通过<a><area><link>元素的 rel=noreferrer 属性。

通过 http 响应头中的 Referrer-Policy 字段

Content-Security-Policy: referrer no-referrer|no-referrer-when-downgrade|origin|origin-when-cross-origin|unsafe-url;

Apache 下,设置方法如下:

<IfModule mod_headers.c>
  Header set Content-Security-Policy: "referrer=no-referrer"
</IfModule>

通过 meta 标签,name 为 referrer

<meta name="referrer" content="no-referrer|no-referrer-when-downgrade|origin|origin-when-crossorigin|unsafe-url">

通过标签的 referrer 属性

<a href="http://example.com" referrer="no-referrer|origin|unsafe-url">xxx</a>

Referrer 策略还有其他历史遗留的值

Referrer 策略还有其他历史遗留的值,不过不建议使用。

  • never 等价于 no-referrer
  • default 等价于 no-referrer-when-downgrade
  • always 等价于 unsafe-url

小结

所以在我当前的项目中使用same-origin是最好的选择了,在其他情况下就根据实际应用场景来进行选择即可


附上个人博客传送门:https://blog.paddings.cn/2018/07/17/html/Meta-Referrer-Policy/

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 141,390评论 1 297
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 60,682评论 1 254
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 93,205评论 0 211
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 40,718评论 0 171
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 48,406评论 1 250
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 38,590评论 1 170
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,271评论 2 267
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,052评论 0 163
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 28,801评论 6 227
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 32,404评论 0 212
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,176评论 2 212
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 30,489评论 1 222
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 24,156评论 0 31
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,031评论 2 210
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 31,402评论 3 201
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,583评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 25,927评论 0 163
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 33,352评论 2 228
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 33,478评论 2 229

推荐阅读更多精彩内容

  • 当用户在浏览器上点击一个链接时,会产生一个 HTTP 请求,用于获取新的页面内容,而在该请求的报头中,会包含一个 ...
    xnotepad阅读 3,709评论 0 3
  • 摘要 目前有许多的恶意攻击都是以网站及其用户作为目标,本文将简要介绍在 Web 服务器一侧的安全加固和测试方法。 ...
    RiboseYim阅读 1,409评论 0 4
  • 虽然之前我有整理过一次meta 标签,但是心中对于meta 标签还是一知半解,所以再次对meta 标签进行整理,并...
    微风玉米阅读 1,084评论 0 0
  • 每次都很努力以一副很严肃的样子走进教室,尽力抑制内心所有的波澜。因为我要面对的是八十多个孩子,由于外表生的很不占优...
    宓美人阅读 596评论 6 7
  • 在家中做饭,偶然听到一期电台节目《谁的婚姻不委屈》。突然间,仿佛醍醐灌顶,茅塞顿开。 在这之前,我和言爸已经冷战了...
    阿犟阅读 416评论 2 3