Xác thực loại tệp chính xác bằng kỹ thuật Magic Numbers trong thư viện Uppy

Trong phát triển web, tính năng tải lên tệp tin có vẻ đơn giản nhưng tiềm ẩn nhiều rủi ro bảo mật. Người dùng độc hại có thể giả mạo phần mở rộng tệp để vượt qua kiểm tra hệ thống, đưa mã độc hoặc script nguy hiểm lên máy chủ dưới dạng tệp thường. Đây là lý do tại sao việc xác định chính xác loại tệp trở nên cực kỳ quan trọng. Thư viện Uppy, một công cụ tải lên tệp nguồn mở cho trình duyệt web, sử dụng kỹ thuật Magic Numbers để giải quyết vấn đề này, đảm bảo độ chính xác và an toàn trong quá trình nhận diện loại tệp.

Kỹ thuật Magic Numbers là gì?

Magics Numbers là phương pháp xác định loại tệp dựa trên việc kiểm tra các byte đầu tiên của tệp, thay vì chỉ dựa vào phần mở rộng tên tệp. Mỗi loại tệp đều có chuỗi byte đặc trưng riêng, ví dụ như tệp JPEG bắt đầu bằng 0xFFD8, tệp PNG bắt đầu bằng 0x89504E47. Thông qua việc phát hiện các chuỗi byte đặc trưng này, Uppy có thể xác định đúng loại thật sự của tệp, ngăn chặn hiệu quả việc tải lên tệp độc hại.

Cơ chế xác định loại tệp trong Uppy

Chức năng xác định loại tệp trong Uppy được thực hiện thông qua hàm determineFileType, nằm trong tệp packages/@uppy/utils/src/determineFileType.ts. Hàm này áp dụng các chiến lược khác nhau tùy thuộc vào nguồn gốc và thuộc tính của tệp:

1. Với tệp từ xa, Uppy tin tưởng trực tiếp kiểu MIME được khai báo
2. Với tệp cục bộ, Uppy ưu tiên sử dụng kiểu MIME do trình duyệt cung cấp
3. Nếu kiểu MIME không khả dụng hoặc không đáng tin cậy, Uppy sẽ suy luận từ phần mở rộng tệp
4. Cuối cùng, Uppy kết hợp với kỹ thuật Magic Numbers để xác minh, đảm bảo độ chính xác của loại tệp

Cách Uppy xử lý các loại tệp khác nhau

Uppy hỗ trợ nhận diện đa dạng loại tệp, bao gồm hình ảnh, âm thanh, video và tài liệu phổ biến. Trong tệp kiểm thử determineFileType.test.ts, chúng ta thấy Uppy có thể xác định chính xác MP3, YAML, MKV, DICOM và WebP:

expect(determineFileType(audioFile)).toEqual('audio/mp3')
expect(determineFileType(yamlFile)).toEqual('text/yaml')
expect(determineFileType(videoFile)).toEqual('video/x-matroska')
expect(determineFileType(dicomFile)).toEqual('application/dicom')
expect(determineFileType(webpFile)).toEqual('image/webp')

Dù tên tệp là chữ hoa hay chữ thường, Uppy vẫn nhận diện đúng loại tệp nhờ cơ chế kiểm tra phần mở rộng không phân biệt chữ hoa-thường.

Sử dụng chức năng xác định loại tệp trong Uppy

Để tích hợp chức năng xác định loại tệp của Uppy vào dự án, trước tiên cần cài đặt thư viện:

git clone https://github.com/transloadit/uppy
cd uppy
npm install

Sau đó thêm Uppy và các plugin liên quan vào mã nguồn:

import Core from '@uppy/core'
import DragDrop from '@uppy/drag-drop'
import XhrSender from '@uppy/xhr-upload'

const uploader = new Core()
  .use(DragDrop, { 
    target: '.drop-area',
    locale: {
      strings: { chooseFile: 'Chọn tệp' }
    } 
  })
  .use(XhrSender, { 
    endpoint: '/api/upload' 
  })

Uppy tự động xử lý việc xác định loại tệp, bạn cũng có thể cấu hình giới hạn các loại tệp được phép tải lên:

const uploader = new Core({
  constraints: {
    allowedFileTypes: ['.jpg', '.png', '.pdf', '.docx']
  }
})

Ưu điểm của cơ chế xác định loại tệp trong Uppy

1. Bảo mật cao: Sử dụng kỹ thuật Magic Numbers để ngăn chặn tệp độc hại
2. Độ chính xác cao: Kết hợp nhiều phương pháp xác định để đảm bảo kết quả chính xác
3. Dễ sử dụng: Sẵn sàng sử dụng mà không cần cấu hình phức tạp
4. Khả năng mở rộng tốt: Hỗ trợ quy tắc nhận diện loại tệp tùy chỉnh
5. Tương thích rộng rãi: Hỗ trợ hầu hết các loại tệp phổ biến