项目背景:因为图片的数据是爬取的别人的图片,而且保存的数据仅仅是图片地址链接,为了减少数据存储和服务器压力,但是这就引发一个问题,有的图片地址没有做防盗处理,可以随意的下载使用;但有些图片的服务器做了处理,其他的域名访问图片都拒绝请求,我遇到的就是使用了HTTP Referer的方式获取,从哪个网站发起的请求,如果不是本网站都拒绝,这样就没有办法获取他的图片;最后查阅资料发现有很多的办法去解决这个问题。

先介绍 Referer :

一、Referer 的含义

现实生活中,购买服务或加入会员的时候,往往要求提供信息:"你从哪里知道了我们?"

这叫做引荐人(referrer),谁引荐了你?对于公司来说,这是很有用的信息。

互联网也是一样,你不会无缘无故访问一个网页,总是有人告诉你,可以去那里看看。服务器也想知道,你的"引荐人"是谁?

HTTP 协议在请求(request)的头信息里面,设计了一个Referer字段,给出"引荐网页"的 URL。

这个字段是可选的。客户端发送请求的时候,自主决定是否加上该字段。

很有趣的是,这个字段的拼写是错的。Referer的正确拼写是Referrer,但是写入标准的时候,不知为何,没人发现少了一个字母r。标准定案以后,只能将错就错,所有头信息的该字段都一律错误拼写成Referer

二、Referer 的发生场景

浏览器向服务器请求资源的时候,Referer字段的逻辑是这样的,用户在地址栏输入网址,或者选中浏览器书签,就不发送Referer字段。

主要是以下三种场景,会发送Referer字段。

(1)用户点击网页上的链接。

(2)用户发送表单。

(3)网页加载静态资源,比如加载图片、脚本、样式。


<!-- 加载图片 -->
<img src="foo.jpg">
<!-- 加载脚本 -->
<script src="foo.js"></script>
<!-- 加载样式 -->
<link href="foo.css" rel="stylesheet">

上面这些场景,浏览器都会将当前网址作为Referer字段,放在 HTTP 请求的头信息发送。

浏览器的 JavaScript 引擎提供document.referrer属性,可以查看当前页面的引荐来源。注意,这里采用的是正确拼写。

三、Referer 的作用

Referer字段实际上告诉了服务器,用户在访问当前资源之前的位置。这往往可以用来用户跟踪。

一个典型的应用是,有些网站不允许图片外链,只有自家的网站才能显示图片,外部网站加载图片就会报错。它的实现就是基于Referer字段,如果该字段的网址是自家网址,就放行。

由于涉及隐私,很多时候不适合发送Referer字段。

这里举两个例子,都不适合暴露 URL。一个是功能 URL,即有的 URL 不要登录,可以访问,就能直接完成密码重置、邮件退订等功能。另一个是内网 URL,不希望外部用户知道内网有这样的地址。Referer字段很可能把这些 URL 暴露出去。

此外,还有一种特殊情况,需要定制Referer字段。比如社交网站上,用户在对话中提到某个网址。这时,不希望暴露用户所在的原始网址,但是可以暴露社交网站的域名,让对方知道,是我贡献了你的流量。

四、rel属性

由于上一节的原因,浏览器提供一系列手段,允许改变默认的Referer行为。

对于用户来说,可以改变浏览器本身的全局设置,也可以安装浏览器扩展。这里就不详细介绍了。

对于开发者来说,rel="noreferrer"属性是最简单的一种方法。<a><area><form>三个标签可以使用这个属性,一旦使用,该元素就不会发送Referer字段。


<a href="..." rel="noreferrer" target="_blank">xxx</a>

上面链接点击产生的 HTTP 请求,不会带有Referer字段。

注意,rel="noreferrer"采用的是正确的拼写。

五、Referrer Policy 的值

rel属性只能定制单个元素的Referer行为,而且选择比较少,只能发送或不发送。W3C 为此制定了更强大的 Referrer Policy

Referrer Policy 可以设定8个值。

(1)no-referrer

不发送Referer字段。

(2)no-referrer-when-downgrade

如果从 HTTPS 网址链接到 HTTP 网址,不发送Referer字段,其他情况发送(包括 HTTP 网址链接到 HTTP 网址)。这是浏览器的默认行为。

(3)same-origin

链接到同源网址(协议+域名+端口 都相同)时发送,否则不发送。注意,https://foo.com链接到http://foo.com也属于跨域。

(4)origin

Referer字段一律只发送源信息(协议+域名+端口),不管是否跨域。

(5)strict-origin

如果从 HTTPS 网址链接到 HTTP 网址,不发送Referer字段,其他情况只发送源信息。

(6)origin-when-cross-origin

同源时,发送完整的Referer字段,跨域时发送源信息。

(7)strict-origin-when-cross-origin

同源时,发送完整的Referer字段;跨域时,如果 HTTPS 网址链接到 HTTP 网址,不发送Referer字段,否则发送源信息。

(8)unsafe-url

Referer字段包含源信息、路径和查询字符串,不包含锚点、用户名和密码。

六、Referrer Policy 的用法

Referrer Policy 有多种使用方法

(1)HTTP 头信息

服务器发送网页的时候,通过 HTTP 头信息的Referrer-Policy告诉浏览器。


Referrer-Policy: origin

(2)<meta>标签

也可以使用<meta>标签,在网页头部设置。


<meta name="referrer" content="origin">

(3)referrerpolicy属性

<a><area><img><iframe><link>标签,可以设置referrerpolicy 属性。


<a href="..." referrerpolicy="origin" target="_blank">xxx</a>

七、退出页面重定向

还有一种比较老式的技巧,但是非常有效,可以隐藏掉原始网址,谷歌和 Facebook 都在使用这种方法。

链接的时候,不要直接跳转,而是通过一个重定向网址,就像下面这样。


<a href="/exit.php?url=http%3A%2F%2Fexample.com">Example.com</a>

上面网址中,先跳转到/exit.php,然后再跳转到目标网址。这时,Referer字段就不会包含原始网址。

以上的介绍是来自阮老师的文章HTTP Referer 教程

回到项目

一开始我先是在index.html文件里插入meta标签:

<meta charset="utf-8" name="referrer" content="no-referrer">

能行,但是这会引发另外的一个问题,就是我项目中使用的百度统计(后期改用了友盟统计),这样会干扰我的数据统计,不可行;

于是乎,既然是img标签,我就直接在img标签上添加referrerpolicy属性;

<img class="detailImg" referrerpolicy="no-referrer" :src="url"/>

这样他就只在请求图片的时候才会禁止携带源信息;

项目中使用http referer,为了盗取图片资源的更多相关文章

  1. iOS 清理Xcode项目中没有使用到的图片资源和类文件

    接手到一个旧的项目,但是发现里面有太多的无用资源,包括升级app后,一些无用的图片资源并没有被删掉,导致app在打包成ipa包以后,文件变大.手边这个项目IM要更换成环信的IM,之前的一些旧的SDK, ...

  2. Android 项目中文件夹的说明与作用(转)

    (转自:http://blog.csdn.net/goodshot/article/details/11529731) Android 项目中文件夹的作用 1. src:存放所有的*.java源程序. ...

  3. Android中项目中各个文件夹的含义和用途详解

    1.src:存放所有的*.java源程序. 2.gen:为ADT插件自动生成的代码文件保存路径,里面的R.java将保存所有的资源ID. 3.assets:可以存放项目一些较大的资源文件,例如:图片. ...

  4. extjs6整合到web项目中

    最近有一个项目需要应用extjs作为前端界面,因此研究了一下如何将extjs 6引入到项目中.以下是操作步骤 extjs6下载地址 extjs 6有gpl版本的,下载地址https://www.sen ...

  5. 【Android】项目中每个文件夹的作用

    1. src:存放所有的*.java源程序. 2. gen:为ADT插件自动生成的代码文件保存路径,里面的R.java将保存所有的资源ID. 3. assets:可以存放项目一些较大的资源文件,例如: ...

  6. 如何正确的在项目中接入微信JS-SDK

    微信JS-SDK的功能 如果你点进来,那么我相信你应该知道微信的JS-SDK可以用来做什么了.微信的官方文档描述如下. 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. ...

  7. 最新广商小助手 项目进展 OpenGL ES 3D在我项目中引用 代码太多只好选重要部分出来

    package com.example.home; import java.io.IOException; import java.io.InputStream; import javax.micro ...

  8. Android 项目中文件夹作用(res文件夹详细介绍)

    1. src:存放所有的*.Java源程序. 2. gen:为ADT插件自动生成的代码文件保存路径,里面的R.java将保存所有的资源ID. 3. assets:可以存放项目一些较大的资源文件,例如: ...

  9. 9. spring项目中web.xml详解解读

    引言:本篇博客的内容大部分都来自网上,有的是直接copy,有的是自己整理而来.既然网上已经有了,为啥还有自己copy呢? 感觉是因为网上的东西太散了或者是样式不够美观,所以自己又copy了一遍.如有侵 ...

随机推荐

  1. Python面向对象-继承和多态特性

    继承 在面向对象的程序设计中,当我们定义一个class时候,可以从现有的class继承,新的class成为子类,被继承的class称为基类,父类或超类. 比如,编写一个名为Animal的class: ...

  2. PromiseKit基本使用及源码解析

    Promise处理一系列异步操作的应用框架,能够保证顺序执行一系列异步操作,当出错时可以通过catch捕获错误进行处理.Promise框架也是很好的诠释了swift的面相协议编程以及函数式编程 两种类 ...

  3. sql server重建全库索引和更新全库统计信息通用脚本

    重建全库索引: exec sp_msforeachtable 'DBCC DBREINDEX(''?'')' 更新全库统计信息: --更新全部统计信息 exec sp_updatestats 实例反馈 ...

  4. Appium(七):Appium API(一) 应用操作

    1. 应用操作 本章所罗列的方法主要针对应用的操作,如应用的安装.卸载.关闭.启动等. 把前面的启动代码放在这里,后面只展示不同的部分. # coding:utf-8 from appium impo ...

  5. 让终端更好看--Ubuntu OhMyZsh配置指南

    查看shell列表 cat /etc/shells 如果发现没有zsh就安装 安装zsh sudo apt install zsh 设置默认shell chsh -s $(which zsh) 重启主 ...

  6. java自学-常用api

    API(Application Programming Interface),应用程序编程接口.Java API是JDK中提供给我们使用的类的说明文档.即jdk包里边写好的类,这些类将底层的代码实现封 ...

  7. 使用Mybatis实现动态SQL(二)

    使用Mybatis实现动态SQL 作者 : Stanley 罗昊 [转载请注明出处和署名,谢谢!] 写在前面:        *本章节适合有Mybatis基础者观看* 使用Mybatis实现动态SQL ...

  8. mysql字符集与比较规则

    MySQL有4个级别的字符集和比较规则,分别是: 服务器级别 数据库级别 表级别 列级别 查看服务器级别命令: mysql> SHOW VARIABLES LIKE 'character_set ...

  9. V4 Reduce Transportable Tablespace Downtime using Cross Platform Incremental Backup (Doc ID 2471245.1)

    V4 Reduce Transportable Tablespace Downtime using Cross Platform Incremental Backup (Doc ID 2471245. ...

  10. Vi/Vim常用命令(附快捷切换方法)

    vi/vim有两种模式,正常(命令行)模式 和编辑模式,在命令行模式下,任何键盘输入都是命令,在编辑模式下,键盘输入的才是字符. 启动/关闭Vi/Vim 启动:vi 打开 Vi/Vim编辑器vi 文件 ...