Cara membangunkan aplikasi yang melindungi daripada kelemahan muat turun fail menggunakan PHP dan Vue.js-tutorial php-php.cn

Cara membangunkan aplikasi yang melindungi daripada kelemahan muat turun fail menggunakan PHP dan Vue.js

王林

Lepaskan： 2023-07-05 22:06:02

asal

1336 orang telah melayarinya

Cara menggunakan PHP dan Vue.js untuk membangunkan aplikasi yang melindungi daripada kelemahan muat turun fail

Kerentanan muat turun fail ialah kelemahan keselamatan rangkaian biasa yang membolehkan penyerang mengakses dan memuat turun fail sewenang-wenangnya pada pelayan. Untuk memastikan keselamatan aplikasi, kami boleh menggunakan PHP dan Vue.js untuk membangunkan aplikasi yang melindungi daripada kelemahan muat turun fail.

PHP ialah bahasa skrip bahagian pelayan yang digunakan secara meluas yang boleh berinteraksi dengan pangkalan data dan menjana kandungan halaman dinamik, memberikan kemudahan yang hebat untuk membina logik bahagian belakang. Vue.js ialah rangka kerja JavaScript popular yang membantu kami membina antara muka pengguna dengan cara yang boleh dikomponen. Menggabungkan PHP dan Vue.js, kami boleh membangunkan aplikasi selamat dengan pemisahan bahagian hadapan dan belakang.

Berikut ialah contoh yang menunjukkan cara menggunakan PHP dan Vue.js untuk membangunkan aplikasi yang melindungi daripada kelemahan muat turun fail.

Backend Development

Buat fail skrip PHP bernama download.php untuk mengendalikan permintaan muat turun fail. download.php 的PHP脚本文件，用于处理文件下载请求。

<?php
$file = $_GET['file']; // 获取要下载的文件名
$path = 'path/to/files/' . $file; // 设置文件路径

// 判断文件是否存在并可读
if (file_exists($path) && is_readable($path)) {
 // 设置响应头，指定内容类型为二进制流文件
 header('Content-Type: application/octet-stream');
 // 设置响应头，指定文件名
 header('Content-Disposition: attachment; filename="' . $file . '"');
 // 读取文件并输出到浏览器
 readfile($path);
} else {
 // 文件不存在或无法读取时返回404错误
 header("HTTP/1.1 404 Not Found");
}

Salin selepas log masuk

创建一个名为 index.php 的PHP文件，用于处理前端页面请求。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>防御文件下载漏洞示例</title>
</head>
<body>
 <div id="app"></div>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script>
     // 创建Vue实例
     new Vue({
         el: '#app',
         data: {
             files: ['file1.txt', 'file2.txt', 'file3.txt'] // 可供下载的文件列表
         },
         methods: {
             downloadFile(file) {
                 // 发起文件下载请求
                 window.location.href = 'download.php?file=' + file;
             }
         }
     });
 </script>
</body>
</html>

Salin selepas log masuk

前端开发

在命令行中使用 Vue CLI 创建一个新的 Vue.js 项目。
```
vue create file-download-app
```
Salin selepas log masuk
进入项目目录，并添加一个用于显示文件列表和文件下载的Vue组件。
```
cd file-download-app
```
Salin selepas log masuk

在 src/components/FileDownload.vue 文件中添加以下代码：

<template>
  <div>
    <h1>文件下载</h1>
    <ul>
      <li v-for="file in files" :key="file">
        {{ file }}
        <button @click="downloadFile(file)">下载</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: ['file1.txt', 'file2.txt', 'file3.txt'] // 可供下载的文件列表
    };
  },
  methods: {
    downloadFile(file) {
      // 发起文件下载请求
      window.location.href = 'http://localhost/download.php?file=' + file;
    }
  }
};
</script>

Salin selepas log masuk

在 src/App.vue 文件中，把之前创建的组件引入并使用。

<template>
  <div id="app">
 <FileDownload/>
  </div>
</template>

<script>
import FileDownload from './components/FileDownload.vue';

export default {
  components: {
 FileDownload
  }
};
</script>

Salin selepas log masuk

运行应用程序

在命令行中，进入项目目录并启动开发服务器。
```
npm run serve
```
Salin selepas log masuk
打开浏览器并访问 http://localhost:8080rrreee
Buat fail PHP bernama index.php untuk mengendalikan permintaan halaman hadapan.

rrreee

Pembangunan bahagian hadapan

🎜🎜🎜Buat projek Vue.js baharu menggunakan Vue CLI daripada baris arahan. 🎜rrreee🎜🎜🎜Pergi ke direktori projek dan tambah komponen Vue untuk memaparkan senarai fail dan muat turun fail. 🎜rrreee🎜🎜🎜Tambahkan kod berikut dalam fail src/components/FileDownload.vue: 🎜rrreee

src/App.vue kod > Dalam fail, import dan gunakan komponen yang dibuat sebelum ini. 🎜rrreee🎜🎜🎜Jalankan aplikasi🎜🎜🎜🎜Dalam baris arahan, pergi ke direktori projek dan mulakan pelayan pembangunan. 🎜rrreee🎜🎜Buka penyemak imbas anda dan lawati <code>http://localhost:8080

Atas ialah kandungan terperinci Cara membangunkan aplikasi yang melindungi daripada kelemahan muat turun fail menggunakan PHP dan Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!