BUUCTF nextGen1 （小白能看懂）

最新推荐文章于 2025-09-12 14:39:04 发布

原创最新推荐文章于 2025-09-12 14:39:04 发布 · 978 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

题目中的提示所flag就藏在服务器的/flag.txt中，但是如果直接访问并没有得到flag，如下图所示

做web题我喜欢先查看源码看看有没有什么超链接点进去看看，其它超链接点进去没有发现有用的信息，可以看到这下面有一个超链接，最后一个超链接里面发现js代码查看一下意思

function myFunc(eventObj) {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("content").innerHTML = xhttp.responseText;
      }
    };
    xhttp.open("POST", '/request');
    xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhttp.send("service=" + this.attributes.link.value);
 
  }
 
  var dep = document.getElementsByClassName('department');
  for (var i = 0; i < dep.length; i++) {
    dep[i].addEventListener('click', myFunc);
  }

这段代码包含了不少前端开发的重要知识点。下面将从基础到高级逐步讲解每个部分的含义及知识点，先说一下这串代码的大致含义：当用户点击页面中具有 class="department" 的 HTML 元素时，触发 myFunc 函数，向服务器发送一个 POST 请求，并将响应内容显示到页面指定的元素中。

第一部分：获取按钮

var dep = document.getElementsByClassName('department');

作用是找出所有有class=“department”的按钮。

getElementsByClassName 是一个方法，用来通过类名找到页面上的元素。例如：

如果HTML中有这些内容：

<div class="department" link="service1">服务1</div>
<div class="department" link="service2">服务2</div>

那getElementsByClassName('department')会把这两个<div>都找到

第二部分：给每个按钮加一个点击事件：

for (var i = 0; i < dep.length; i++) {
  dep[i].addEventListener('click', myFunc);
}

作用对每个按钮，都添加一个"点击事件"。

for循环：逐个处理找到的按钮

addEventlistener:告诉按钮“当你被点击时，要执行下面的代码”，比如当你点击了第一个按钮，代码会运行一个myFunc的函数(下面会解释)

第三部分：点击后会做什么？

当点击按钮时，这段代码会运行：

function myFunc(eventObj) {
    var xhttp = new XMLHttpRequest();
    ...
}

myFunc是一个函数，点击按钮后它就会运行。

eventObj是一个事件的对象，里面存放着“点击事件”的信息，比如“谁触发了这个事件“（哪个按钮被点击了）

第四部分：创建一个请求

var xhttp = new XMLHttpRequest();

XMLHttpRequest是浏览器提供的一个工具，用来跟服务器通信（比如向服务器要数据）打个比方，你在手机上打开一个网页，浏览器会向服务器请求数据。这里的代码也是用它请求数据

第五部分：监听请求的状态

xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        document.getElementById("content").innerHTML = xhttp.responseText;
    }
};

这一段干的是写啥？

监听”请求进度“，直到请求完成，处理返回的数据。

this.readyState == 4 : 表示请求完成了。

this.status == 200 ：表示服务器成功返回数据（200是HTTP的状态码，表示成功）

responseText：这是服务器返回的数据。

innerHTML: 用返回的数据跟新网页类容

第六部分：发送请求

xhttp.open("POST", '/request');
xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhttp.send("service=" + this.attributes.link.value);

这些代码干了什么事情？

open：设置请求类型是POST，目标是/request（服务器的某个地址）。

setRequestHeader：告诉服务器，发送的数据格式是“表单格式”。

send：发送数据，数据内容是service=...,具体值从被点击的按钮里读取。

列如：如果你点击的按钮有link=“service1”，发送的就是service=service1

第七部分：服务器返回了什么？

假设服务器返回了：

<h1>服务1的详细信息</h1>
<p>这是服务1的介绍。</p>

那么这段代码会把这些类容插入到网页中，显示出来。

document.getElementById("content").innerHTML = xhttp.responseText;

我们注重看第六部分，使用的是post传参，那么我们就可以抓包构造一个假的severs=x

首先在网页上找到了按钮deparment点击的时候抓包，因为监听的是deparment按钮，然后将service=xxx改为service:file:///flag.txt,在旅行这个包，或者发送到Repeater中在发送都能看到flag