HTTP之Referrer和Referrer-policy

news2024/12/24 0:23:49

目录

HTTP之Referrer和Referrer-policy   

Referer

Referrer-policy

如何设置referrer

盗链

防盗链的工作原理

绕过图片防盗链

利用https网站盗链http资源网站,refer不会发送

设置meta

设置referrerpolicy="no-referrer"

利用iframe伪造请求referer

客户端在请求时修改header头部

利用XMLHttpRequest

利用fetch

服务器作防盗链图片中转

常见防盗链方法

利用nginx

服务器端判断referer

防止网址被 iframe


HTTP之Referrer和Referrer-policy   

Referer

        定义 --- 当一个用户点击当前页面中的一个链接,然后跳转到目标页面时,目标页面会收到一个信息,即用户是从哪个源链接跳转过来的。

        包含 --- 当前请求页面的来源页面的地址,即表示当前页面是通过此来源页面里的链接进入的

        作用 --- 识别访问来源,可能会以此统计分析、日志记录以及缓存优化等。

注意:

        Referer请求头可能会暴露用户的浏览历史、涉及到用户的隐私问题。

Referrer-policy

        作用 --- 为了控制请求头中referer的内容

        包含 --- 

                no-referrer --- 整个referee首部会被移除,访问来源信息不随着请求一起发送。

                no-referrer-when-downgrade --- 在没有指定任何策略的情况下用户代理的默认行为。在同等安全级别的情况下,引用页面的地址会被发送(HTTPS->HTTPS),但是在降级的情况下不会被发送 (HTTPS->HTTP).

                origin --- 在任何情况下,仅发送文件的源作为引用地址。例如 https://example.com/page.html 会将 Example Domain 作为引用地址。

                origin-when-cross-origin ---  对于同源的请求,会发送完整的URL作为引用地址,但是对于非同源请求仅发送文件的源。

                same-origin --- 对于同源的请求会发送引用地址,但是对于非同源请求则不发送引用地址信息。

                strict-origin ---  在同等安全级别的情况下,发送文件的源作为引用地址(HTTPS->HTTPS),但是在降级的情况下不会发送 (HTTPS->HTTP)。

                strict-origin-when-cross-origin --- 对于同源的请求,会发送完整的URL作为引用地址;在同等安全级别的情况下,发送文件的源作为引用地址(HTTPS->HTTPS);在降级的情况下不发送此首部 (HTTPS->HTTP)。

                unsafe-url ---  无论是同源请求还是非同源请求,都发送完整的 URL(移除参数信息之后)作为引用地址。(最不安全了)

        浏览器兼容性(https://caniuse.com/?search=referer-policy):

如何设置referrer

1. 在HTML里设置meta 

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

        如下图:  

 

2. 或者用<a>、<area>、<img>、<iframe>、<script> 或者 <link> 元素上的 referrerpolicy 属性为其设置独立的请求策略。

<script src='/javascripts/test.js' referrerpolicy="no-referrer"></script>

 

         未加referrerpolicy属性的link元素:

盗链

        定义 --- 指在自己的页面上展示一些并不在自己服务器上的一些内容, 获取别人的资源地址,绕过别人的资源展示页面,直接在自己的页面上向最终用户提供此内容。 一般被盗链的都是图片、可执行文件、音视频文件、压缩文件等资源。通过盗链的手段可以减轻自己服务器的负担

         比如在自己页面里引入百度贴吧里的一张照片:

<body>
    <img src="https://tiebapic.baidu.com/forum/w%3D580%3B/sign=f88eb0f2cf82b9013dadc33b43b6ab77/562c11dfa9ec8a135455cc35b203918fa1ecc09c.jpg"> 
</body>

         但实际上是无法展示的(如下图),之所以无法展示是因为百度的图片做过防盗链处理

防盗链的工作原理

        通过Referrer或者签名,网站可以检测目标网页访问的来源网页,如果是资源文件,则可以追踪到显示它的网页地址 一旦检测到来源不是本站,即进行阻止或者返回指定的页面

绕过图片防盗链

        那么现在的很多网站是如何利用referrer来进行防图片盗链的呢?

        三种情况下允许引用图片:

               1. 本网站。

                2.无referer信息的情况。(服务器认为是从浏览器直接访问的图片URL,

                   所以这种情况下能正常访问)

                3.授权的网址。

我们只能从情况2入手,通过设置referrer为空进行绕过防盗链。

利用https网站盗链http资源网站,refer不会发送

        先利用openssl生成自签名证书(具体可看Blog/HTTP相关/Demos/referer/demo03 at main · zxl925768661/Blog · GitHub) client.js

let https = require("https");
let fs = require("fs");
let url = require("url");
let path = require("path");
​
​
var options = {
  hostname: "localhost",
  port: 8000,
  path: "/",
  method: "GET",
  rejectUnauthorized: false,
  key: fs.readFileSync("./keys/client.key"),
  cert: fs.readFileSync("./keys/client.crt"),
  ca: [fs.readFileSync("../ca/ca.crt")],
};
​
// 创建服务器
https.createServer(options, function (req, res) {
​
  let staticPath = path.join(__dirname, "src");
  let pathObj = url.parse(req.url, true);
​
  if (pathObj.pathname === "/") {
    pathObj.pathname += "index.html";
  }
  //  读取静态目录里面的文件,然后发送出去
  let filePath = path.join(staticPath, pathObj.pathname);
  fs.readFile(filePath, "binary", function (err, content) {
    if (err) {
      res.writeHead(404, "Not Found");
      res.end("<h1>404 Not Found</h1>");
    } else {
      res.writeHead(200, "Not Found");
      res.write(content, "binary");
      res.end();
    }
  });
​
}).listen(8080);
​

        index.html

<div id="container">
    <img src="http://localhost:9999">
</div>

        启动结果如下: 提示: 由于我们使用了自签名的证书,访问页面时可能会看到浏览器的证书警告,可能需要手动点击信任当前证书,或者手动点击链接确认访问该页面。例如Chrome 提醒“您的连接不是私密连接”,并禁止你访问。你可以直接在当前页面输入 thisisunsafe,不是在地址栏输入,而是直接敲击键盘输入,页面会自动刷新进入网页。

设置meta

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

设置referrerpolicy="no-referrer"

        以上已验证过,只是存在部分兼容性问题。

https://images.weserv.nl/?url=${你的图片地址}

        因为网址是国外的速度有点慢效果还行,目的就是返回一个不受限制的图片,但是 GIF 格式会返回jpg也就是没有了动画效果。

利用iframe伪造请求referer

        内容参考 如何绕开referrer防盗链 - 掘金

function showImg(src, wrapper ) {
    let url = new URL(src);
    let frameid = 'frameimg' + Math.random();
    window.img = `<img id="tmpImg" width=400 src="${url}" alt="图片加载失败,请稍后再试"/> `;
​
    // 构造一个iframe
    iframe = document.createElement('iframe')
    iframe.id = frameid
    iframe.src = "javascript:parent.img;" // 通过内联的javascript,设置iframe的src
    // 校正iframe的尺寸,完整展示图片
    iframe.onload = function () {
        var img = iframe.contentDocument.getElementById("tmpImg")
        if (img) {
            iframe.height = img.height + 'px'
            iframe.width = img.width + 'px'
        }
    }
    iframe.width = 10
    iframe.height = 10
    iframe.scrolling = "no"
    iframe.frameBorder = "0"
    wrapper.appendChild(iframe)
}
​
showImg('https://tiebapic.baidu.com/forum/w%3D580%3B/sign=f88eb0f2cf82b9013dadc33b43b6ab77/562c11dfa9ec8a135455cc35b203918fa1ecc09c.jpg', document.querySelector('#container'))

        结果如下:

客户端在请求时修改header头部

        内容参考 如何绕开referrer防盗链 - 掘金

利用XMLHttpRequest

        XMLHttpRequest中setRequestHeader方法,用于向请求头添加或修改字段。我们能不能手动将修改 referer字段呢?

// 通过ajax下载图片
function loadImage(uri) {
    return new Promise(resolve => {
        let xhr = new XMLHttpRequest();
        xhr.responseType = "blob";
        xhr.onload = function() {
            resolve(xhr.response);
        };
​
        xhr.open("GET", uri, true);
        // 通过setRequestHeader设置header不会生效
        // 会提示 Refused to set unsafe header "Referer"
        xhr.setRequestHeader("Referer", ""); 
        xhr.send();
    });
}
  
​
// 将下载下来的二进制大对象数据转换成base64,然后展示在页面上
function handleBlob(blob) {
    let reader = new FileReader();
    reader.onload = function(evt) {
        let img = document.createElement('img');
        img.src = evt.target.result;
        document.getElementById('container').appendChild(img)
    };
    reader.readAsDataURL(blob);
}
​
const imgSrc = "https://tiebapic.baidu.com/forum/w%3D580%3B/sign=f88eb0f2cf82b9013dadc33b43b6ab77/562c11dfa9ec8a135455cc35b203918fa1ecc09c.jpg";
​
loadImage(imgSrc).then(blob => {
    handleBlob(blob);
});
​

上述代码运行时会发现控制台提示错误:

        Refused to set unsafe header "Referer"

        可以看见setRequestHeader设置referer响应头是无效的,这是由于浏览器为了安全起见,无法手动设置部分保留字段,不幸的是Referer恰好就是保留字段之一,详情列表参考Forbidden header name。

利用fetch

// 将下载下来的二进制大对象数据转换成base64,然后展示在页面上
function handleBlob(blob) {
    let reader = new FileReader();
    reader.onload = function(evt) {
        let img = document.createElement('img');
        img.src = evt.target.result;
        document.getElementById('container').appendChild(img)
    };
    reader.readAsDataURL(blob);
}
​
const imgSrc = "https://tiebapic.baidu.com/forum/w%3D580%3B/sign=f88eb0f2cf82b9013dadc33b43b6ab77/562c11dfa9ec8a135455cc35b203918fa1ecc09c.jpg";
​
​
function fetchImage(url) {
    return fetch(url, {
        headers: {
            // "Referer": "", // 这里设置无效
        },
        method: "GET",  
        referrer: "", // 将referer置空
        // referrerPolicy: 'no-referrer', 
    }).then(response => response.blob());
}
​
fetchImage(imgSrc).then(blob => {
    handleBlob(blob);
});

        通过将配置参数referrer置空,可以看见本次请求已经不带referer了

        或者设置 referrerPolicy为"no-referrer"

服务器作防盗链图片中转

        这里我们使用express index.js

const express = require('express');
const app = express();
​
app.use('/img', require('./routers/index.js'))
​
app.listen(3000);
routers/index.js

var express = require('express');
var router = express.Router();
var request = require('request');
​
router.get('/', function(req, res, next) {
    var options = {
        method: 'GET',
        url: 'https://tiebapic.baidu.com/forum/w%3D580%3B/sign=f88eb0f2cf82b9013dadc33b43b6ab77/562c11dfa9ec8a135455cc35b203918fa1ecc09c.jpg',
        headers: {
            'Referer': '',
        }
    };
    request(options).pipe(res)
    
});
​
module.exports = router;

常见防盗链方法

        防盗链一般有下面几种方式:

                1.动态文件名,或者定期修改文件名称或路径

                2.判定引用地址,一般是判断浏览器请求时HTTP头的Referer字段的值

                3.使用登录验证,cookie

                4.图片加水印

利用nginx

        ngx_http_referer_module用于阻挡来源非法域名的请求 nginx指令valid_refers,全局变量$invalid_refer 对资源的防盗链nginx配置为

location ~.*\.(gif|jpg|png|bmp|flv|swf|rar|zip)$
{
    valid_referers none blocked test.com *.test.com;   // 加none的目的是确保浏览器可以直接访问资源
    if($invalid_referer)
    {
        #return 403;  // 直接返回403
        rewrite ^/ http://www.test.com/403.jpg; // 返回指定提示图片
    }
}

        这种方法是在server或者location段中加入:valid_referers

        这个指令在referer头的基础上为 $invalid_referer 变量赋值,其值为0或1。如果valid_referers列表中没有Referer头的值, $invalid_referer将被设置为1。 如果 $invalid_referer等于 1,在if语句中返回一个 403 给用户,这样用户便会看到一个 403 的页面, 如果使用下面的rewrite,那么盗链的图片都会显示 403.jpg。 该指令支持none和blocked:

  • 其中none表示空的来路,也就是直接访问,比如直接在浏览器打开一个文件

  • blocked表示被防火墙标记过的来路,*..com表示所有子域名

        但是传统的防盗链也会存在一些问题,因为refer是可以伪造的, 所以可以使用加密签名的方式来解决这个问题。 什么是加密签名?就是当我们请求一个图片的时候,我要给它带一些签名过去,然后返回图片的时候我们判断下签名是否正确,相当于对一个暗号。 更多内容请参考 防盗链的原理以及实现 - 知乎

服务器端判断referer

        我们能通过对比req.headers['referer']和req.url中的host来确认资源请求是否是别的站点发来的。 接着,当我们知道了资源请求的来源,我们就能通过一系列手段来决定是否响应请求以及怎样响应。 通常的做法是设置一个白名单,在白名单内的请求我们就响应,否则就不响应。

let http = require("http");
let fs = require("fs");
let url = require("url");
let path = require("path");
// 白名单
const whiteList = ["localhost:8080"];
​
/**
 * 三种情况下允许引用图片:
 * 1. 本网站
 * 2. 无referer信息的情况。(服务器认为是从浏览器直接访问的图片URL,所以这种情况下能正常访问)
 * 3. 授权的网址。(配置白名单)
 */
​
http
  .createServer(function (req, res) {
​
    let refer = req.headers["referer"] || req.headers["refer"];
    console.log('refer----', refer, req.url);
    res.setHeader("Access-Control-Allow-Origin", "*");
    if (refer) {
      let referHostName = url.parse(refer, true).host;
      let currentHostName = url.parse(req.url, true).host;
      console.log(referHostName, currentHostName, '--==')
      // 当referer不为空, 但host未能命中目标网站且不在白名单内时, 返回错误的图
      if (
        referHostName != currentHostName &&
        whiteList.indexOf(referHostName) == -1
      ) {
        res.setHeader("Content-Type", "image/jpeg");
        fs.createReadStream(path.join(__dirname, "/src/img/403.jpg")).pipe(res);
        return;
      }
    }
    // 当referer为空时, 返回正确的图
    res.setHeader("Content-Type", "image/jpeg");
    fs.createReadStream(path.join(__dirname, "/src/img/1.jpg")).pipe(res);
    
  })
  .listen(9999);
     利用http启动一个客户端: client.js
let http = require("http");
let fs = require("fs");
let url = require("url");
let path = require("path");
​
// 创建服务器
http.createServer(function (req, res) {
  let staticPath = path.join(__dirname, "src");
  let pathObj = url.parse(req.url, true);
​
  if (pathObj.pathname === "/") {
    pathObj.pathname += "index.html";
  }
  //  读取静态目录里面的文件,然后发送出去
  let filePath = path.join(staticPath, pathObj.pathname);
  fs.readFile(filePath, "binary", function (err, content) {
    if (err) {
      res.writeHead(404, "Not Found");
      res.end("<h1>404 Not Found</h1>");
    } else {
      res.writeHead(200, "Not Found");
      res.write(content, "binary");
      res.end();
    }
  });
}).listen(8080);
​

        index.html

<div id="container">
    <img src="http://localhost:9999">
</div>

分别启动客户端和服务器:

        如果我们修改下服务器端whiteList:

// 白名单
const whiteList = [];

        重启服务器端,访问客户端后 我们发现响应结果变成了403图片:

防止网址被 iframe

        在页面底部或其它公用部位加入如下代码:

// 用js方法检测地址栏域名是不是当前网站绑定的域名,如果不是,则跳转到绑定的域名上来,这样就不怕网站被别人iframe了
if(window!=parent) {
    window.top.location.href = window.location.href; 
}

注:

        以上代码地址: Blog/HTTP相关/Demos/referer at main · zxl925768661/Blog · GitHub

参考资料:

Referrer-Policy - HTTP | MDN

Referer - HTTP | MDN

如何绕开referrer防盗链 - 掘金

referer与防盗链 - 掘金

八种常见的防盗链方法总结及分析 - ForeverPine - 博客园

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/193010.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C语言指针变量的运算

指针变量保存的是地址&#xff0c;而地址本质上是一个整数&#xff0c;所以指针变量可以进行部分运算&#xff0c;例如加法、减法、比较等&#xff0c;请看下面的代码&#xff1a;#include<stdio.h>intmain(){ int a 10,*pa &a,*paa &a; double b 99.9,*pb &a…

JTAG和SWD调试器

文章目录一、调试器二、JTAG三、SWD三、各自优缺点一、调试器 当我们开发单片机程序时&#xff0c;通常是在Windows或Linux上进行代码编写和编译&#xff0c;但是单片机并不直接集成在电脑上&#xff0c;怎么验证我们的单片机程序是否正确并烧录到单片机中&#xff0c;此时就需…

某游戏平台检测加速辅助案例分析

加速类辅助会对游戏平衡造成极大的破坏&#xff0c;这类辅助会通过HOOK api的方式来达到修改游戏对时间判断的目的&#xff0c;一般情况下&#xff0c;在R3层&#xff0c;这类辅助会在 QueryPerformanceCounter TimeGetTime GettickCount这三个API上HOOK&#xff0c;修改他们的…

Java-黑马Java学习作业-day15面向对象进阶(抽象类接口内部类)

学习视频链接&#xff1a;https://www.bilibili.com/video/BV17F411T7Ao 文章目录第一题&#xff1a;&#xff08;抽象类求面积和周长&#xff09;第二题&#xff1a;&#xff08;接口实现新旧手机功能&#xff09;第三题&#xff1a;&#xff08;使用子类和匿名内部类调用接口…

大厂高薪测试在线讲解Jmeter全套性能测试

Jmeter进行性能测试基本包含如下基本过程&#xff1a;1&#xff09;新增线程组创建测试线程组&#xff0c;并设置线程数量及线程初始化启动方式。2&#xff09;新增 JMeter 元组创建各种默认元组及测试元组&#xff0c;填入目标测试静态资源请求和动态资源请求参数及数据。3&am…

Task9:Excel数据透视表

文章目录一 Excel数据透视表1 数据透视表2 切片器3 数据透视的注意事项4 透视表常用法二 Excel数据透视图一 Excel数据透视表 1 数据透视表 什么是透视表&#xff1a;把明细表分类汇总的过程&#xff0c;可以按照不同的组合方式进行数据计算使用场景&#xff1a; 1.大量数据&…

QT入门Buttons之QCheckBox

目录 一、界面布局介绍 1、布局器中的位置及使用 2、常用属性 二、属性功能介绍 1、常用信号 2、测试信号stateChanged(int) 3、组合框效果 三、Demo展示 此文为作者原创&#xff0c;转载标明出处&#xff01; 一、界面布局介绍 1、布局器中的位置及使用 QCheckBox复选…

除了console.log,你还用过console其它的属性么?

目录前言console.infoconsole.debugconsole.errorconsole.warnconsole.time 和 console.timeEndconsole.group 和 console.groupEndconsole.table前言 刚学习前端的时候&#xff0c;vue还没用vue-devtools&#xff0c;react还没用 React Developer Tools&#xff0c;我们经常通…

fastjson 1.2.47 RCE漏洞保姆级复现

1.漏洞概述 Fastjson提供了autotype功能&#xff0c;允许用户在反序列化数据中通过“type”指定反序列化的类型&#xff0c;Fastjson自定义的反序列化机制时会调用指定类中的setter方法及部分getter方法&#xff0c;那么当组件开启了autotype功能并且反序列化不可信数据时&…

Sklearn中的算法效果评估手段

我们曾在《算法效果评估&#xff1a;均方根误差&#xff08;RMSE&#xff09;/ 标准误差》一文中介绍过评估算法效果使用的主要方法&#xff1a;均方根误差&#xff08;RMSE&#xff09;&#xff0c;但在实际应用中&#xff0c;评估算法效果还有更多内容&#xff0c;本文我们以…

VsCode安装及修改插件存储位置

【官网】&#xff1a; https://code.visualstudio.com/ 【修改插件仓库】&#xff1a; 创建名为VSCODE_EXTENSIONS的环境变量&#xff0c;内容指向自定义的文件夹即可&#xff08;位置无需限制&#xff09;。 【需要安装的插件】&#xff1a;

SBOM的介绍与syft和grype的使用

文章目录SBOM介绍工具syftgrypeSBOM介绍 SBOM&#xff08;软件物料清单&#xff09;是给定产品的中所有软件组件&#xff08;专有和开源代码&#xff09;、开源许可证和依赖项的清单。它提供了对软件供应链以及可能存在的任何许可证合规性、安全性和质量风险的可见性。 SBOM可…

Hystrix如何达到高可用

小型电商网站的页面展示采用页面全量静态化的思想。数据库中存放了所有的商品信息,页面静态化系统,将数据填充进静态模板中,形成静态化页面,推入Nginx服务器。用户浏览网站页面时,取用一个已经静态化好的html页面,直接返回回去,不涉及任何的业务逻辑处理。 用户每次浏览…

python输出不重复的字符

项目场景&#xff1a; 输入一个字符串&#xff0c;把最左边的10个不重复的字符&#xff08;大小写算不同字符&#xff09;挑选出来。 如不重复的字符不到10个&#xff0c;则按实际数目输出。问题描述 输出一个字符串&#xff0c;包含字符串s最左边10个不重复的字符。不到10个…

Canal与Kafka数据传输协议protocol buffer

1.写在前面 实时数仓开发中&#xff0c;利用Canal伪装slave获取MySQL的增量数据&#xff0c;获取后的数据由Kafka生产者接收&#xff0c;交由Flink实时流计算。传输数据量较大时&#xff0c;会占用内存及带宽&#xff0c;所以考虑将数据序列化和反序列化操作&#xff0c;这里介…

KNN(K-近邻)算法

1、概述 KNN(K−NearestNeighbor)KNN \left( K-Nearest Neighbor \right)KNN(K−NearestNeighbor)是机器学习中最基础的算法之一。既可以用于分类也可以用于回归&#xff0c;KNNKNNKNN通过测量不同特征值之间的距离来进行分类。 2、实例理解 如果k3k 3k3&#xff0c;绿色圆点…

【Cocos新手入门】使用 cocos creator 创建单行文本输入框及多行文本输入框

本篇文章主要讲解使用 cocos creator 创建单行文本输入框及多行文本输入框&#xff0c;并绑定文本框获取文本输入数据的方法。 作者&#xff1a;任聪聪 日期&#xff1a;2023年2月2日 cocos引擎版本2.4.3 实际效果 单行文本效果、多行文本效果 说明&#xff1a;如果不清楚按钮…

jquery:表单请求、序列化+案例

表单请求提交原则name相同的表单提交&#xff0c;name出现多次&#xff0c;对应不同表单的值没有name&#xff0c;含有disabled&#xff08;禁用&#xff09;禁止提交多选单选下拉列表需要设置value属性才能取值表单提交事件名称写法描述提交方式method“get”get不安全取数据&…

30. 面向对象高级编程

1. __solts__ 正常情况下&#xff0c;当我们定义了一个class&#xff0c;创建了一个class的实例后&#xff0c;我们可以给该实例绑定任何属性和方法&#xff0c;这就是动态语言的灵活性。 from types import MethodTypeclass Student:def __init__(self):passdef set_num(sel…

OSCP_VULHUB_Matrix3

文章目录简介扫描ida汇编ssh登录/提权简介 下载地址&#xff1a; https://download.vulnhub.com/matrix/Machine_Matrix_v3.ova 环境&#xff1a; VMware 16虚拟机软件 Matrix3靶机IP地址&#xff1a;192.168.132.145 Kali的IP地址&#xff1a;192.168.132.139 Matrix3靶机与…