Building an E2EE Chat App in Flask - Part 3: Keeping File Uploads Safe

#python #security #tutorial #webdev

Okay hi, so imagine you have a mailbox at your house. Anyone can put things in it, am I right or am I right? What if someone puts a bomb in there? Or trash? You need to check what goes in before it causes problems.

That's what file uploads are like. Users can upload anything. We need to stop the bad stuff.

The Problem: Bad Files

When I first built my chat app, I didn't think about what users could upload. They could upload:

Files with viruses hidden inside
Really huge files that break the app
Weird file types that cause problems
Files with tricky names designed to hack the system

It's like leaving your house door open and hoping bad people don't come in. Spoiler: they will.

My Solution: Check Everything

I learned to be a security guard for my app. Here's what I do:

1. Only Accept Certain File Types

First, I made a python Set of file types I actually want:

ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif', 'mp4', 'mov'}

I only allow images (png, jpg, gif) and videos (mp4, mov). That's it. No .exe files. No .zip files. Nothing unsafe.

Then I check every file:

def allowed_file(filename):
    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

All that code just says: "Does the file have a dot? Is it one of our allowed types? If yes, cool. If no, reject it."

2. Clean Up Bad Filenames

Here's something sneaky: attackers might upload a file named something like "../../../admin.php" to try to escape the upload folder and hack the system.

So I use a function that removes all the dangerous stuff:

from werkzeug.utils import secure_filename

filename = secure_filename(file.filename)

If someone uploads "../../admin.php", this function turns it into "admin.php" (harmless).

If someone uploads "file (1) [2023].jpg", it cleans it up too.

3. Organize Files by Type

After the file is safe, I check what type it is:

def get_file_type(filename):
    ext = filename.rsplit('.', 1)[1].lower()
    if ext in {'mp4', 'mov'}:
        return 'video'
    elif ext in {'png', 'jpg', 'jpeg', 'gif'}:
        return 'image'
    return 'file'

So if someone uploads a video, I store it in the videos folder. Images go in the images folder. Everything stays organized and safe.

Why This Actually Works

Think about it like airport security:

Whitelist = Only let through what's allowed (like a passenger list)
Clean names = Remove anything suspicious (like checking luggage)
Organize = Put things in the right place (like baggage claim)

If you don't do these checks, bad stuff gets through.

What Actually Happened

I built this without thinking about security. Then I realized: what if someone uploads a virus? What if they upload a 1GB file? What if they try to hack the system with a weird filename?

So I added these checks. Now my app is safer.