安全基础第二天:http的header和referrer

一、form表单相关属性

 <form action="./a.php" enctype="multipart/form-data" method="post">
        用户名:<input type="text" name="submit-name" required minlength="4" maxlength="8" size="10"><br>
        另外的用户名: <input type="text" name="othername" pattern="[a-z]{3,6}"><br>
        密码; <input type="password" name="password"><br>
        文件:<input type="file" name="files"><br>
        <input type="submit" value="上传">
        <input type="reset" value="清除">
        <textarea name="neirong" id="neirong" cols="30" rows="5"></textarea>
 </form>
  1. action属性

给后端提交的一个地址

<form action="https://example.com/api"></form>
  1. method属性

传参的方法,一般用的是post传参

<form method="post"></form>
  1. enctype属性

上传一些文件

<form enctype="multipart/form-data"></form>
  1. required属性

限制输入长度

用户名:<input type="text" name="submit-name" required minlength="4" maxlength="8" size="10"><br>
  1. pattern属性

正则表达式限制

另外的用户名: <input type="text" name="othername" pattern="[a-z]{3,6}"><br>
  1. passwd属性

隐藏密码

密码; <input type="password" name="password" ><br>
  1. textarea属性

<textarea name="neirong" id="neirong" cols="30" rows="5"></textarea>

二、iframe(网页中嵌入其他网页)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div">aaaaaaa</div>
    <iframe src="./b.html" width="10%" height="200" frameborder="1" sandbox="allow-scripts allow-same-origin allow-modals"></iframe>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>hello world</h1>
</body>
<script src="./b.js"></script>
</html>
alert(document.cookie);
  1. <iframe>的一些属性

嵌入的网页默认具有正常权限,比如执行脚本、提交表单、弹出窗口等。如果嵌入的网页是其他网站的页面,你不了解对方会执行什么操作,因此就存在安全风险。

  1. sandbox属性

  • allow-forms:允许提交表单。

  • allow-modals:允许提示框,即允许执行window.alert()等会产生弹出提示框的 JavaScript 方法。

  • allow-popups:允许嵌入的网页使用window.open()方法弹出窗口。

  • allow-popups-to-escape-sandbox:允许弹出窗口不受沙箱的限制。

  • allow-orientation-lock:允许嵌入的网页用脚本锁定屏幕的方向,即横屏或竖屏。

  • allow-pointer-lock:允许嵌入的网页使用 Pointer Lock API,锁定鼠标的移动。

  • allow-presentation:允许嵌入的网页使用 Presentation API。

  • allow-same-origin:不打开该项限制,将使得所有加载的网页都视为跨域。

  • allow-scripts:允许嵌入的网页运行脚本(但不创建弹出窗口)。

  • allow-storage-access-by-user-activation:sandbox属性同时设置了这个值和allow-same-origin的情况下,允许<iframe>嵌入的第三方网页通过用户发起document.requestStorageAccess()请求,经由 Storage Access API 访问父窗口的 Cookie。

  • allow-top-navigation:允许嵌入的网页对顶级窗口进行导航。

  • allow-top-navigation-by-user-activation:允许嵌入的网页对顶级窗口进行导航,但必须由用户激活。

  • allow-downloads-without-user-activation:允许在没有用户激活的情况下,嵌入的网页启动下载。

三、referer(请求头包含了当前请求页面的来源页面的地址)

referrer-policy:其作用是为了控制请求头中的referrer的内容

  1. no-referrer

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

  1. no-referrer-when-downgrade

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

  1. origin

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

  1. origin-when-cross-origin

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

  1. same-origin

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

6 .strict-origin

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

发送 (HTTPS->HTTP)。

  1. strict-origin-when-cross-origin

对于同源的请求,会发送完整的URL作为引用地址;在同等安全级别的情况下,发送文件的源作为引

用地址(HTTPS->HTTPS);在降级的情况下不发送此首部 (HTTPS->HTTP)。

  1. unsafe-url

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

四、防盗链

  1. 防盗链的工作原理

通过Referer或者签名,网站可以检测目标网页访问的来源网页,如果是资源文件,则可以追踪到显示

它的网页地址 一旦检测到来源不是本站,即进行阻止或者返回指定的页面

  1. 如何绕过图片的防盗链(无referer信息)

(1) 方案一(strict-origin-when-cross-origin下的同源降级

(HTTPS->HTTP))

此实验需要在浏览器较低的版本实现,最新版本浏览器会自动拒绝同源降级

  1. 先利用openssl生成自签名证书

https://github.com/zxl925768661/Blog/tree/main/HTTP%E7%9B%B8%E5%85%B3/Demos/referer/demo03)

  1. 客户端的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, "OK");
      res.write(content, "binary");
      res.end();
    }
  });

}).listen(8080);

客户端的html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>client</title>
</head>
<body>
    <h1>client页面</h1>
    <div id="container">
        <!-- <img src="https://localhost:8000/" referrerpolicy="no-referrer"> -->
        <img src="http://192.168.192.128:9090">
    </div>
    <!-- <script src="js/fetchImg.js"></script> -->
</body>
</html>
  1. 服务端的js

et https = require("https");
let fs = require("fs");
let url = require("url");
let path = require("path");
// 白名单
const whiteList = ["192.168.191.128:8080"];  //我们客户端请求的

const options = {
  key: fs.readFileSync("./keys/server.key"),
  cert: fs.readFileSync("./keys/server.crt"),
};


https
  .createServer(options, 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(9090);
  1. node client.js和node server.js

  1. 浏览器访问:https://192.168.191.128:8080

  1. 成功为

(2)方案二(设置meta标签)

头部加入<meta name="referrer" content="no-referrer">属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="referrer" content="no-referrer">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="data:image/jpeg;base64,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" alt="">
</body>
</html>

(3) 方案三(设置referrerpolicy="no-referrer")

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- <meta name="referrer" content="no-referrer"> -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img  referrerpolicy="no-referrer" src="data:image/jpeg;base64,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" alt="" >
</body>
</html>

(4) 方案四(XMLHttpRequest中setRequestHeader方法)

1.非同源情况下

// 通过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);
});

首先依旧是把百度贴吧的图片放在我们src中,之后把图片地址传递给loadimage这个函数,之后通过ajex把图片下下来,用到了promise异步下载,当下载成功调用resolve,下载失败调用的是reject,成功调用httprequest去请求url也就是百度图吧的图片,之后通过设置requestheade的referrer为空去限制,之后通过onload函数监听,把监听的结果返回给我们的resolve,resolve函数会把结果返回给.then(blob),其实reslove函数就是一个回调函数,之后把结果传递给handleBlob(blob)这个函数,这个函数建立了一个FileReader()对象,这个对象有一个监听的函数,并且还重建了一个img标签,最终把src从事件中拿了出来,把它放入到了container里面了,最后访问(不成功的原因在于我们的浏览器有些保留字段的设置,恰巧referer就是其中之一,所以就不让了)另外最终的图片是利用base64编码表示的,利用的接口函数就是readAsDataURL(blob)这个函数,在同源下是可以的

2.同源情况下

// 通过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("Referrer", ""); 
        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('tupian').appendChild(img)
    };
    reader.readAsDataURL(blob);
}

const imgSrc = "http://127.0.0.1/3/1.jpg";

loadImage(imgSrc).then(blob => {
    handleBlob(blob);
});
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- <meta name="referrer" content="no-referrer"> -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="tupian">aaaa</div>
</body>
<script src="./test.js"></script>
</html>

五、Burp Suite抓包工具

POST /2/a.php HTTP/1.1
Host: 10.4.136.247
Content-Length: 325
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1 Origin: http://10.4.136.247
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary5DaoJrBa0XD8Zxld
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
Referer: http://10.4.136.247/2/a.html
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9
Connection: close
------WebKitFormBoundary5DaoJrBa0XD8Zxld
Content-Disposition: form-data; name="submit-name"
admin
------WebKitFormBoundary5DaoJrBa0XD8Zxld
Content-Disposition: form-data; name="files"; filename="1.php"
Content-Type: application/octet-stream
<?php
var_dump["$username"]
------WebKitFormBoundary5DaoJrBa0XD8Zxld--
  1. POST /2/a.php HTTP/1.1

提交的方法是post,提交的地址是/2/a.php,利用的http协议是1.1

  1. Host: 10.4.136.247

请求的地址

  1. Content-Length: 325

请求的长度为325

  1. Cache-Control: max-age=0

缓存,无缓存

  1. Upgrade-Insecure-Requests: 1 Origin: http://10.4.136.247

来源地址

  1. Content-Type: multipart/form-data; boundary=----WebKitFormBoundary5DaoJrBa0XD8Zxld

文件的类型是form-data

  1. User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36

浏览器的内核版本

  1. Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7

支持的文件类型

  1. Referer: http://10.4.136.247/2/a.htmlAc cept-Encoding: gzip, deflate

referer请求访问的文件目录

  1. Accept-Language: zh-CN,zh;q=0.9

语言

  1. Connection: close
------WebKitFormBoundary5DaoJrBa0XD8Zxld
Content-Disposition: form-data; name="submit-name"

前端传输的名字,后端抓取的名字

  1. admin

------WebKitFormBoundary5DaoJrBa0XD8Zxld

抓取的名字是admin

  1. Content-Disposition: form-data; name="files"; filename="1.php"

抓取的是文件files,文件是1.php

  1. Content-Type: application/octet-stream

文件类型

  1. <?php
var_dump["$username"]

抓取的内容<?php var_dump["$username"]

六、cookies和session

存在客户端和服务端,当我们的用户去访问一个浏览器,我们需要注册账号和密码,当我们注册成功后,我们的服务器会将我们用户数据存储到数据库,数据库生成一个session文件,并将其返回给我们的客户端,我们客户端会将这个文件存储在我们的cookie中,当我们再次去登录服务器的时候,我们的服务器会将我们的cookie的值和我们的服务器的session值进行对比,如果相同就可以登陆,所以我们黑客常见的是想办法去盗取我们客户端的cookie。

七、同源和跨域

同源:协议相同、host相同、端口相同

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值