Software College of Shandong University Project Training - Innovation Training - network security range experimental platform (16)

Catalog

One 、 What is a directory traversal vulnerability ？

Two 、 The backend implementation

3、 ... and 、 The front-end code

Four 、 design sketch

---

Preface ： This blog mainly records the implementation of directory traversal vulnerability .

One 、 What is a directory traversal vulnerability ？

Directory traversal （ Also known as file path traversal ） It's a Web Security vulnerabilities , It allows an attacker to read arbitrary files on the server where the application is running . This may include application code and data , Back end system credentials and sensitive operating system files . In some cases , An attacker may be able to write to arbitrary files on the server , This allows them to modify application data or behavior , And ultimately take full control of the server .

The directory traversal I do is for image browsing , And the browse file is encrypted first and then displayed . It increases the difficulty of making questions .

And will flag Write picture , For the questioner to find .

Two 、 The backend implementation

The back-end code is as follows ：

@RestController
public class PathTravelController {

    @Autowired
    DataSource dataSource;
    public String sql;

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

                //  obtain BufferedImage object 
                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();
                }
                //  Create a picture output stream object , Based on file objects 
                ImageOutputStream imageOutputStream = ImageIO.createImageOutputStream(jpgFile);
                //  write in 
                ImageIO.write(image,"jpg",imageOutputStream);
                //  Closed flow 
                imageOutputStream.close();
                System.out.println(" Picture writing complete , Please check out ！");
            }

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

        } catch (SQLException e) {
            System.out.println(" Wrong input , Database query error  in flag");
            System.out.println(e.toString());
            //return " Wrong input , Database query error ";
        }

        return Result.success();
    }

}

Convert string to BufferedImage object

The code to write the string to the picture is as follows ：

    /*
     * @description:  Convert string to BufferedImage object 
     * @param: [strs]
     * @return: java.awt.image.BufferedImage
     * @author: fzj
     * @date: 2022/6/02 21:20
     */
    public static BufferedImage createImage(String str) {
        //  Set the width and height of the background 
        int width = 1000, height = 400;
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        //  Get the graphic context object 
        Graphics graphics = image.getGraphics();
        //  fill 
        graphics.fillRect(0, 0, width, height);
        //  Set font size and style 
        graphics.setFont(new Font(" Song style ", Font.BOLD,34));
        //  The font color 
        graphics.setColor(Color.BLUE);
            //  Draw string 
            graphics.drawString(str, 100,  100 );
        graphics.dispose();
        return image;
    }

3、 ... and 、 The front-end code

front end Vue The interface code is as follows ：

<template>
  <div class="building">
    <div class="menu">
      <el-row>
        <!--  Button menu section  -->
        <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" > scenery </el-menu-item>
            <el-menu-item index="/coursemanagement" > food </el-menu-item>
            <el-menu-item index="/usermanagement" > animal </el-menu-item>
            <el-menu-item index="/usermanagement" > figure </el-menu-item>
            <el-menu-item index="/usermanagement" > Architecture </el-menu-item>
            <el-menu-item index="/usermanagement" > Ranking </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;">
               Check the details 
              <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;">
               Check the details 
              <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;">
               Check the details 
              <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;">
               Check the details 
              <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;">
               Check the details 
              <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;">
               Check the details 
              <i class="el-icon-right" style=""></i>
            </p>
          </el-card>
        </el-col>
      </el-row>
    </div>


  </div>
</template>

Four 、 design sketch

In order to avoid showing the steps of doing questions , Only the range interface is shown below ：