山东大学软件学院项目实训-创新实训-网络安全靶场实验平台（十六）

目录

一、什么是目录遍历漏洞？

二、后端实现

三、前端代码

四、效果图

---

前言：本篇博客主要记录目录遍历漏洞的实现。

一、什么是目录遍历漏洞？

目录遍历（也称为文件路径遍历）是一个Web安全漏洞，它使攻击者可以读取运行应用程序的服务器上的任意文件。这可能包括应用程序代码和数据，后端系统的凭据以及敏感的操作系统文件。在某些情况下，攻击者可能能够写入服务器上的任意文件，从而允许他们修改应用程序数据或行为，并最终完全控制服务器。

我做的目录遍历是针对图片浏览的，并将浏览文件先进行加密再展示出来。增加了做题难度。

并将flag写入图片，供做题者寻找。

二、后端实现

后端代码如下所示：

@RestController
public class PathTravelController {

    @Autowired
    DataSource dataSource;
    public String sql;

    @RequestMapping("/pathtravel")
    public Result pathtravel(@RequestParam("username") String username)
            throws IOException {

                // 获取BufferedImage对象
                BufferedImage image = createImage(flag);
                File file = new File("vue/src/assets/img/bugimg/pathtravel/flag");
                String fileName = "flag.jpg";
                File jpgFile = new File(file,fileName);
                if(!jpgFile.exists()) {
                    jpgFile.createNewFile();
                }
                // 创建图片输出流对象，基于文件对象
                ImageOutputStream imageOutputStream = ImageIO.createImageOutputStream(jpgFile);
                // 写入
                ImageIO.write(image,"jpg",imageOutputStream);
                // 关闭流
                imageOutputStream.close();
                System.out.println("图片写入完成，请查看！");
            }

            rs.close();
            connection.close();

        } catch (SQLException e) {
            System.out.println("输入内容错误，数据库查询错误 in flag");
            System.out.println(e.toString());
            //return "输入内容错误，数据库查询错误";
        }

        return Result.success();
    }

}

将字符串转换为BufferedImage对象

将字符串写入图片的代码如下：

    /*
     * @description: 将字符串转换为BufferedImage对象
     * @param: [strs]
     * @return: java.awt.image.BufferedImage
     * @author: fzj
     * @date: 2022/6/02 21:20
     */
    public static BufferedImage createImage(String str) {
        // 设置背景宽高
        int width = 1000, height = 400;
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        // 获取图形上下文对象
        Graphics graphics = image.getGraphics();
        // 填充
        graphics.fillRect(0, 0, width, height);
        // 设定字体大小及样式
        graphics.setFont(new Font("宋体", Font.BOLD,34));
        // 字体颜色
        graphics.setColor(Color.BLUE);
            // 描绘字符串
            graphics.drawString(str, 100,  100 );
        graphics.dispose();
        return image;
    }

三、前端代码

前端Vue界面代码如下：

<template>
  <div class="building">
    <div class="menu">
      <el-row>
        <!-- 按钮菜单部分 -->
        <el-col :span="24">
          <el-menu
              :default-active="mypath"
              class="el-menu-demo"
              mode="horizontal"
              background-color="#fff"
              text-color="#000"
              active-text-color="#FF9912"
              @select="handleSelect"
          >
            <el-menu-item index="/honeypot">  </el-menu-item>
            <el-menu-item index="/abilitypromotion"></el-menu-item>
            <el-menu-item index="/forum" ></el-menu-item>
            <el-menu-item index="/navigation" >风景</el-menu-item>
            <el-menu-item index="/coursemanagement" >美食</el-menu-item>
            <el-menu-item index="/usermanagement" >动物</el-menu-item>
            <el-menu-item index="/usermanagement" >人物</el-menu-item>
            <el-menu-item index="/usermanagement" >建筑</el-menu-item>
            <el-menu-item index="/usermanagement" >排行</el-menu-item>

          </el-menu>
        </el-col>
      </el-row>
    </div>

    <div style="">
      <el-row style="">
        <el-col :span="8">
          <el-card class="card" id="img1" @click="goto('img1.jpg')">
            <p style="font-size: 25px;text-align: right;background-color:gray;width:150px;margin-left: 250px;margin-top: 280px;">
              查看详情
              <i class="el-icon-right" style=""></i>
            </p>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="card" id="img2" @click="goto('img2.jpg')">
            <p style="font-size: 25px;text-align: right;background-color:gray;width:150px;margin-left: 250px;margin-top: 280px;">
              查看详情
              <i class="el-icon-right" style=""></i>
            </p>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="card" id="img3" @click="goto('img3.jpg')">
            <p style="font-size: 25px;text-align: right;background-color:gray;width:150px;margin-left: 250px;margin-top: 280px;">
              查看详情
              <i class="el-icon-right" style=""></i>
            </p>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div style="">
      <el-row style="">
        <el-col :span="8">
          <el-card class="card" id="img4" @click="goto('img4.jpg')">
            <p style="font-size: 25px;text-align: right;background-color:gray;width:150px;margin-left: 250px;margin-top: 280px;">
              查看详情
              <i class="el-icon-right" style=""></i>
            </p>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="card" id="img5" @click="goto('img5.jpg')">
            <p style="font-size: 25px;text-align: right;background-color:gray;width:150px;margin-left: 250px;margin-top: 280px;">
              查看详情
              <i class="el-icon-right" style=""></i>
            </p>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="card" id="img6" @click="goto('img6.jpg')">
            <p style="font-size: 25px;text-align: right;background-color:gray;width:150px;margin-left: 250px;margin-top: 280px;">
              查看详情
              <i class="el-icon-right" style=""></i>
            </p>
          </el-card>
        </el-col>
      </el-row>
    </div>


  </div>
</template>

四、效果图

为了避免将做题步骤展示出来，仅将靶场界面展示如下：