0

I have a firebase app that needs to send 64x64 images less than 15kb to my firebase storage. (I got the idea for the size and dimension limits from this post: Check image width and height before upload with Javascript)

I tried to setup authKey in javascript but it didnt want to connect, it kept saying "Access Denied 403" even though I had my key to my storage system.

  var config = {
    apiKey: "643a2fea-f611-42c4-9745-47cea1eb03fc",
    authDomain: "typichead.firebaseapp.com/",
    databaseURL: "https://typichead.firebaseio.com/",
    storageBucket: "typichead.appspot.com"
  };

(these keys have all obviously been revoked and changed by now)

So I set the rule from != auth to == auth so that anyone and anything could read and write to the storage system.

This exposes so much security though.

Edit: I removed and changed the rules back to private because I was posting this publicly... cant have people spamming my limited storage can I

I want to change it so it can only send/recieve out of ONE url: https://typichead.web.app

I dont know how the "rules" work in firebase storage

Here are my current firebase storage rules:

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth == null;
    }
  }
}

Using this script, which takes the raw file input and detects for its image width/height, I can cut out images that are not the right dimensions or filetype.

using let uuid it grabs a uuid randomly, and uses it to name the file and send it to my firebase storage using string literals user/${uuid}.png

        if (img.width == "64" && img.height == "64") {
          let uuid = createUUID();
          let storageRef = firebase.storage().ref(`user/${uuid}.png`);

          storageRef.put(file);
        } else {
          alert("Only 64x64 images are allowed!");
        }

Entire working page source code: https://github.com/FunctFlow/Minecraft-HeadLoader/blob/master/public/index.html

Mister SirCode
  • 1,575
  • 14
  • 31
  • Security rules can't restrict access to a single site or app. That's just not possible to enforce securely. Rules apply to clients connecting from anywhere on the internet. You have to use Firebase Auth if you want to restrict to users of your app (but they still don't have to be coming directly from your site). – Doug Stevenson Apr 29 '20 at 15:56
  • How do I achieve this without rules then? I thought the api key wouldve been enough (as all the tutorials online have shown) but it doesnt function the same way for me – Mister SirCode Apr 29 '20 at 15:57
  • You can't do this securely, really. You can fake it by creating an API endpoint for users to call, but they call still call it from anywhere on the internet. You could try to make them provide a "password", but that will be visible to the world, and therefore not really a password. – Doug Stevenson Apr 29 '20 at 16:00
  • @DougStevenson Well the only reason I want to make this secure at all, is just to prevent people from overflowing my site with too much data. Im limited to 1GB unfortunately, so I have to block all files above a certain size, and obviously specific dimensions – Mister SirCode Apr 29 '20 at 16:02
  • You will need the help of some backend code to control the contents of the uploads. Security rules are not going to be sufficient to do what you want. – Doug Stevenson Apr 29 '20 at 16:08

0 Answers0