前端安全直传MinIO方案

目的：前端直接上传文件到Minio，不通过服务器中转文件。密钥不能在前端明文传输。

## 一、架构设计

```mermaid

sequenceDiagram

    前端->>后端: 1.请求上传凭证

    后端->>MinIO: 2.生成预签名URL

    后端-->>前端: 3.返回预签名URL

    前端->>MinIO: 4.使用URL直传文件

    MinIO-->>前端: 5.返回上传结果

```

---

## 二、服务端实现

### 1. 环境配置

```bash

# 安装依赖

npm install minio express dotenv cors

```

### 2. 安全凭证管理

```javascript

// .env文件

MINIO_ENDPOINT=your-minio.example.com

MINIO_PORT=9000

MINIO_USE_SSL=true

MINIO_ACCESS_KEY=your_access_key

MINIO_SECRET_KEY=your_secret_key

```

### 3. 预签名URL生成接口

```javascript

const Minio = require('minio')

const express = require('express')

const app = express()

require('dotenv').config()

const minioClient = new Minio.Client({

  endPoint: process.env.MINIO_ENDPOINT,

  port: parseInt(process.env.MINIO_PORT),

  useSSL: process.env.MINIO_USE_SSL === 'true',

  accessKey: process.env.MINIO_ACCESS_KEY,

  secretKey: process.env.MINIO_SECRET_KEY

})

// 生成预签名上传URL

app.get('/api/upload-token', (req, res) => {

  const fileId = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`

  const objectName = `uploads/${fileId}/${req.query.fileName}`

  const expiry = 15 * 60 // 15分钟有效期

  minioClient.presignedPutObject(

    process.env.MINIO_BUCKET,

    objectName,

    expiry,

    (err, presignedUrl) => {

      if (err) return res.status(500).json({ error: err.message })

      res.json({

        presignedUrl,

        objectUrl: `https://${process.env.MINIO_ENDPOINT}/${process.env.MINIO_BUCKET}/${objectName}`

      })

    }

  )

})

app.listen(3000, () => console.log('Server running on port 3000'))

```

---

## 三、前端实现

### 1. 获取上传凭证

```javascript

async function getUploadToken(fileName) {

  const response = await fetch(`/api/upload-token?fileName=${encodeURIComponent(fileName)}`)

  return response.json()

}

```

### 2. 文件上传组件

```html

<input type="file" id="fileInput" />

<button οnclick="uploadFile()">上传</button>

<script>

async function uploadFile() {

  const fileInput = document.getElementById('fileInput')

  const file = fileInput.files[0]

  // 获取上传凭证

  const { presignedUrl, objectUrl } = await getUploadToken(file.name)

  // 直传MinIO

  const result = await fetch(presignedUrl, {

    method: 'PUT',

    body: file,

    headers: {

      'Content-Type': file.type

    }

  })

  if (result.ok) {

    console.log('文件地址:', objectUrl)

  } else {

    console.error('上传失败')

  }

}

</script>

```

---

## 四、安全增强措施

### 1. MinIO存储桶策略

```json

{

  "Version": "2012-10-17",

  "Statement": [

    {

      "Effect": "Deny",

      "Principal": "*",

      "Action": "s3:*",

      "Resource": "arn:aws:s3:::your-bucket/*",

      "Condition": {

        "NumericGreaterThan": {"s3:signatureAge": "900"}

      }

    },

    {

      "Effect": "Allow",

      "Principal": "*",

      "Action": "s3:PutObject",

      "Resource": "arn:aws:s3:::your-bucket/uploads/*"

    }

  ]

}

```

### 2. 服务端安全中间件

```javascript

// 添加CORS限制

const cors = require('cors')

app.use(cors({

  origin: ['https://your-domain.com'],

  methods: ['GET', 'POST'],

  maxAge: 300

}))

// 请求频率限制

const rateLimit = require('express-rate-limit')

const limiter = rateLimit({

  windowMs: 15 * 60 * 1000,

  max: 100

})

app.use('/api/upload-token', limiter)

```

---

## 五、大文件分片上传

### 1. 前端分片处理

```javascript

async function uploadLargeFile(file) {

  const CHUNK_SIZE = 5 * 1024 * 1024 // 5MB

  const chunks = Math.ceil(file.size / CHUNK_SIZE)

  // 初始化分片上传

  const { uploadId } = await initMultipartUpload(file.name)

  // 并发上传分片

  const uploadPromises = []

  for (let i = 0; i < chunks; i++) {

    const chunk = file.slice(i * CHUNK_SIZE, (i + 1) * CHUNK_SIZE)

    uploadPromises.push(uploadChunk(uploadId, i + 1, chunk))

  }

  await Promise.all(uploadPromises)

  // 完成上传

  return completeUpload(uploadId)

}

```

### 2. 分片上传服务端支持

```javascript

// 初始化分片上传

app.post('/api/multipart-init', (req, res) => {

  const objectName = `uploads/${uuidv4()}/${req.query.fileName}`

  minioClient.initiateNewMultipartUpload(

    process.env.MINIO_BUCKET,

    objectName,

    (err, uploadId) => {

      if (err) return res.status(500).send(err)

      res.json({ uploadId, objectName })

    }

  )

})

// 获取分片上传URL

app.get('/api/multipart-url', (req, res) => {

  const presignedUrl = minioClient.presignedPutObject(

    process.env.MINIO_BUCKET,

    req.query.objectName,

    15 * 60,

    { partNumber: req.query.partNumber, uploadId: req.query.uploadId }

  )

  res.json({ presignedUrl })

})

```

---

## 六、监控与日志

### 1. MinIO操作日志

```bash

# 启用访问日志

mc admin config set myminio audit_webhook endpoint=http://log-server:3000/logs

```

### 2. 服务端监控指标

```javascript

const prometheus = require('prom-client')

const uploadCounter = new prometheus.Counter({

  name: 'file_uploads_total',

  help: 'Total number of file uploads',

  labelNames: ['status']

})

app.post('/api/upload', (req, res) => {

  uploadCounter.inc({ status: 'started' })

  // ...上传逻辑

})

```

---

## 七、方案优势

1. **零密钥暴露**：前端仅使用临时预签名URL

2. **高安全性**：15分钟有效期+IP限制+HTTPS

3. **高性能**：支持5GB+大文件分片上传

4. **可扩展**：轻松集成CDN和自动转码

5. **合规性**：满足GDPR和等保要求

---

## 八、部署注意事项

1. 启用MinIO的HTTPS访问

2. 定期轮换MinIO根密钥

3. 设置存储桶生命周期策略

4. 监控存储桶使用情况

5. 启用防病毒扫描

6. 配置自动告警规则

```bash

# MinIO客户端配置示例

mc alias set myminio https://minio.example.com your_access_key your_secret_key

mc mb myminio/secure-uploads

mc lifecycle set myminio/secure-uploads lifecycle.json

```

---

通过该方案，前端可直接安全上传文件到MinIO，无需在后端保存中转文件，同时确保敏感凭证不会暴露在前端代码中。实际部署时建议结合具体业务需求调整安全策略和性能参数。