[安全]: 浅谈文件上传之客户端安全问题

文章目录

• 攻击手段及原理
• 客户端问题(非第三方工具 NC Fidder等上传工具)
• 抵御方法
• 具体代码实例
• Vue
• element-ui upload组件

漏洞只能减少, 无法根除,
本文只初步介绍常见的攻击手段及客户端的基本防御

攻击手段及原理

• 上传文件是WebShell时，攻击者可通过这些网页后门执行命令并控制服务器；

• 上传文件是其他恶意脚本时，攻击者可直接执行脚本进行攻击；

• 上传文件是恶意图片时，图片中可能包含了脚本，加载或者点击这些图片时脚本会悄无声息的执行；

• 上传文件是伪装成正常后缀的恶意脚本时，攻击者可借助本地文件包含漏洞(Local File Include)执行该文件。如将bad.php文件改名为bad.doc上传到服务器，再通过PHP的include，include_once，require，require_once等函数包含执行。

客户端问题(非第三方工具 NC Fidder等上传工具)

• 文件上传检查不严, 没有进行文件格式检查
  • 例如: .php .Php .pHp等
• 文件名没有检查
  • 例如: xxx.php%00.jpg, (%00为十六进制的0x00字符, 对于服务器来说，因为%00字符截断的关系，最终上传的文件变成了xxx.php)
• 有修改文件名功能是带了后缀( 先传输.jpg后, 改文件名是把文件后缀更换为 .php)

抵御方法

• 检查文件名后缀(注意大小写, 可先统一转换小写或是大写)
• 重构文件名称(防止 xxx.php%00.jpg这种类型)
• 若是图片, 使用resize函数, 压缩方式更改其大小, 这样就算是脚本, 里面的代码也会被破坏导致无法使用
• 不可修改文件名后缀

具体代码实例

以市面上常见的框架及UI组件库

Vue

element-ui upload组件

<!--
 * @Descripttion: 上传组件
 * @version: 1.0.0
 * @Author: 仲灏
 * @Date: 2019-11-21 10:15:15
 * @LastEditors: 仲灏
 * @LastEditTime: 2019-12-09 14:13:13
 -->
<template>
  <el-upload
    ref="upload"
    :action="config.action"
    :headers="config.headers"
    :multiple="multiple"
    :data="file"
    :name="config.name"
    :http-request="handleHttpRequest"
    :show-file-list="showFileList"
    :drag="drag"
    :accept="accept"
    :list-type="listType"
    :file-list="fileList"
    :disabled="disabled"
    :limit="limit"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :on-success="handleSuccess"
    :on-error="handleError"
    :on-progress="handleProgress"
    :on-change="handleChange"
    :before-upload="handleBeforeUpload"
    :before-remove="handleBeforeRemove"
    :on-exceed="handleExceed"
  >
    <i v-if="listType === 'picture-card' && !drag" class="el-icon-plus" />
    <div v-if="(listType === 'picture' && !drag) || (!drag && listType === 'text')">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </div>

    <template v-if="drag">
      <div>
        <i class="el-icon-upload" />
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </div>
    </template>
    <el-dialog append-to-body :visible.sync="previewDialogVisible">
      <img width="100%" :src="dialogImageUrl" alt>
    </el-dialog>
  </el-upload>
</template>
<script>
import Cookies from 'js-cookie'
export default {
  name: 'ZUpload',
  props: {
    value: {
      type: Array,
      default: () => {
        return []
      }
    },
    label: {
      type: String,
      default: ''
    },
    tag: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: ''
    },
    prop: {
      type: String,
      default: ''
    },
    span: {
      type: Number,
      default: 24
    },
    readonly: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: ''
    },
    fileSize: {
      type: Number,
      default: 5
    },
    disabled: {
      type: Boolean,
      default: false
    },
    accept: {
      type: String,
      default: ''
    },
    listType: {
      type: String,
      default: ''
    },
    drag: {
      type: Boolean,
      default: false
    },
    showFileList: {
      type: Boolean,
      default: true
    },
    multiple: {
      type: Boolean,
      default: true
    },
    limit: {
      type: Number,
      default: 10
    },
    quality: {
      // 图片质量
      type: Number,
      default: 0.1
    }
  },
  data() {
    return {
      dialogImageUrl: '',
      previewDialogVisible: false,
      file: {
        name: new Date().getTime()
      },
      fileList: [],
      config: {
        headers: {
          Authorization: Cookies.get('Token')
        },
        action: '********************',
        name: 'resource_url'
      },
      compressFile: ''
    }
  },
  mounted() {
    this.fileList = this.value
  },
  methods: {
    handlePreview(file) {
      console.log('点击文件列表中已上传的文件时的钩子')
      this.dialogImageUrl = file.url
      this.previewDialogVisible = true
    },
    handleDownload(file) {
      console.log('点击文件列表下载文件时的钩子')
      if (file.response && file.response.record) {
        window.open(file.response.record.resource_url)
      }
    },

    handleBeforeRemove(file, fileList) {
      console.log(`文件列表移除之前的钩子`)
      // return this.$confirm(`确定移除 ${file.name}？`)
      return true
    },

    handleRemove(file, fileList) {
      console.log('文件列表移除文件时的钩子')
      if (file.response) {
        const {
          response: {
            record: { id }
          }
        } = file
        this.$api('resource', 'delete', id).then(res => {
          // console.log(res)
          this.fileList = this.fileList.filter(v => v !== file)
        })
      }
      this.$emit('input', fileList)
    },

    handleBeforeUpload(file) {
      console.log(`上传文件之前的钩子`)

      const typeIsSatisfy = this.accept.split(',').includes(file.type)

      const fileType = file.name.substring(file.name.lastIndexOf('.') + 1)
      // const typeIsSatisfy = this.accept.split(',').includes(fileType)

      let sizeIsSatisfy = null
      if (Array.isArray(this.fileSize)) {
        sizeIsSatisfy =
          file.size > this.fileSize[0] && file.size < this.fileSize[1]
      } else {
        sizeIsSatisfy = file.size < this.fileSize * 1024 * 1024
      }

      if (!typeIsSatisfy) {
        this.$message.error(
          `当前限制文件格式为 ${this.accept}，本次选择了文件格式为 ${fileType}`
        )
      }

      if (!sizeIsSatisfy) {
        this.$message.error(
          `当前限制小于 ${this.fileSize} M文件，本次选择了 ${(
            file.size /
            1024 /
            1024
          ).toFixed(2)} M大小的文件`
        )
      }

      return typeIsSatisfy && sizeIsSatisfy
    },

    handleProgress(event, file, filelist) {
      console.log(`文件开始上传时的钩子`)
    },
    // 自定义的上传实现函数
    handleHttpRequest(req) {
      console.log('触发上传行为函数方法')
      if (['image/jpeg', 'image/png', 'image/bmp', 'image/jpg'].includes(req.file.type)) {
        // 压缩图片
        this.compress(req.file, file => {
          const fileData = new FormData()
          fileData.append('resource_url', file)
          fileData.append('name', this.file.name)
          req.onProgress({
            percent: 0
          })
          req.onProgress({
            percent: 90
          })
          this.$api('resource', 'post', '', fileData)
            .then(res => {
              req.onProgress({
                percent: 100
              })
              req.onSuccess(res)
            })
            .catch(err => {
              req.onError(err)
            })
        })
      } else {
        const fileData = new FormData()
        fileData.append('resource_url', req.file)
        fileData.append('name', this.file.name)
        req.onProgress({
          percent: 0
        })
        req.onProgress({
          percent: 90
        })
        this.$api('resource', 'post', '', fileData)
          .then(res => {
            req.onProgress({
              percent: 100
            })
            req.onSuccess(res)
          })
          .catch(err => {
            req.onError(err)
          })
      }
    },
    handleSuccess(response, file, fileList) {
      console.log('文件上传成功时的钩子')
      console.log(response)
      if (response.code === 200) {
        this.fileList = fileList
        const fileArr = []
        fileList.forEach(v => {
          if (v.response) {
            let item = {}
            item = {
              name: v.response.record.id,
              url: v.response.record.resource_url
            }
            fileArr.push(item)
          } else {
            fileArr.push({ name: v.name, url: v.url })
          }
        })
        this.$emit('input', JSON.parse(JSON.stringify(fileArr)))
      }
    },

    // eslint-disable-next-line handle-callback-err
    handleError(err, file, filelist) {
      console.log(`文件上传失败时的钩子`)
      this.$message.error(err)
    },

    handleChange(file, fileList) {
      console.log(`文件状态改变时的钩子`)
    },

    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 ${this.limit} 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      )
    },

    /** 图片压缩，默认同比例压缩
     *  @param {Object} fileObj
     *  图片对象
     *  回调函数有一个参数，base64的字符串数据
     */
    compress(fileObj, callback) {
      const _this = this
      try {
        const image = new Image()
        image.src = URL.createObjectURL(fileObj)
        image.onload = function() {
          const that = this // 默认按比例压缩
          let w = that.width
          let h = that.height
          const scale = w / h
          w = fileObj.width || w
          h = fileObj.height || w / scale
          let quality = _this.quality // 默认图片质量为0.7 // 生成canvas
          const canvas = document.createElement('canvas')
          const ctx = canvas.getContext('2d') // 创建属性节点
          const anw = document.createAttribute('width')
          anw.nodeValue = w
          const anh = document.createAttribute('height')
          anh.nodeValue = h
          canvas.setAttributeNode(anw)
          canvas.setAttributeNode(anh)
          ctx.drawImage(that, 0, 0, w, h) // 图像质量
          if (fileObj.quality && fileObj.quality <= 1 && fileObj.quality > 0) {
            quality = fileObj.quality
          } // quality值越小，所绘制出的图像越模糊
          const base64 = canvas.toDataURL('image/jpeg', quality) // 压缩完成执行回调

          const file = _this.dataURLtoFile(base64)
          const blob = _this.base64ToBlob(base64)
          callback(file, blob, base64)
        }
      } catch (error) {
        console.log('压缩失败', error)
      }
    },
    // 将base64转换成file对象
    dataURLtoFile(dataurl, filename = this.file.name) {
      const arr = dataurl.split(',')
      const mime = arr[0].match(/:(.*?);/)[1]
      const suffix = mime.split('/')[1]
      const bstr = atob(arr[1])
      let n = bstr.length
      const u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], `${filename}.${suffix}`, { type: mime })
    },
    base64ToBlob(urlData) {
      const bytes = window.atob(urlData.split(',')[1]) // 去掉url的头，并转换为byte
      // 处理异常,将ascii码小于0的转换为大于0
      const ab = new ArrayBuffer(bytes.length)
      const ia = new Uint8Array(ab)
      for (let i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i)
      }
      return new Blob([ab], { type: 'image/png' })
    }
  }
}
</script>

组件的使用

<!--
 * @Descripttion:
 * @version:
 * @Author: 仲灏
 * @Date: 2019-12-05 13:41:14
 * @LastEditors: 仲灏
 * @LastEditTime: 2019-12-09 14:15:49
 -->
<template>
  <ZUpload
    v-model="content"
    :readonly="props.readonly"
    :size="props.size"
    :file-size="props.fileSize"
    :disabled="props.disabled"
    :accept="props.accept"
    :list-type="props.listType"
    :drag="props.drag"
    :show-file-list="props.showFileList"
    :multiple="props.multiple"
    :limit="props.limit"
    :quality="props.quality"
  />
</template>

<script>
import ZUpload from '@/components/ZUpload'

export default {
  name: 'Test',
  components: { ZUpload },
  data() {
    return {
      content: [],
      props: {
        label: '文件上传 upload',
        tag: 'z-upload',
        icon: 'iconfont icon-wenjianshangchuan',
        prop: 'elupload',
        span: 24,
        class: '',
        value: [],
        rules: [{ required: true, message: '请上传文件', trigger: 'blur' }],
        readonly: false,
        size: 'small',
        fileSize: 5,
        disabled: false,
        accept: 'image/jpeg,image/gif,image/png,image/bmp,image/jpg',
        listType: 'picture-card',
        drag: false,
        showFileList: true,
        multiple: true,
        limit: 10,
        quality: 1
      }
    }
  }
}
</script>