为什么我会收到未经授权的 Firebase 存储错误？

Question

我的 Firebase 存储规则：

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read: if true;
      allow write: if resource.contentType == "image/svg+xml" && resource.size < 1 * 1024 * 1024;
    }
  }
}

我在我的网站上创建了一个上传表单，当我尝试上传以下文件时，我不断收到错误 403。错误代码是 storage/unauthorized，但我不明白为什么这是唯一的要求上传是它是一个小于 1 MB 的 SVG。 svg 约为 3kb。

function uploadFile() {

  var storageRef = firebase.storage().ref();
  var file = document.getElementById("file").files[0];

  var metadata = {
    contentType: "image/svg+xml"
  };

  var uploadTask = storageRef
  .child("path/" + file.name)
  .put(file, metadata);

  uploadTask.on(
    firebase.storage.TaskEvent.STATE_CHANGED,
    snapshot => {
         //do stuff
      },
    error => {
      switch (error.code) {
        case "storage/unauthorized":
          break;
        case "storage/canceled":
          break;
        case "storage/unknown":
          break;
      }
    },
    () => {
      //... do stuff
    }
  );
};

<form>
<input id="file" type="file" accept="image/svg+xml" /><br><br>
<button type="button" onclick="uploadFile()">
    Upload logo
</button>
</form>

我执行的另一项测试是通过 Firebase 控制台将文件直接上传到我的存储桶，然后使用安全规则游乐场模拟上传该文件。成功了，从截图可以看出：

<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="100" fill="#FDFBF5"/>
<path d="M37.2519 7.67798C68.1999 45.25 36.5859 45.8 40.1559 66.912C44.5559 92.938 81.0719 85.168 77.5099 64.08C79.9379 78.452 69.5359 91.044 54.2799 92.2C39.0239 93.356 24.6799 82.64 22.2459 68.268C17.5799 40.694 59.9679 37.742 37.2519 7.67798Z" fill="url(#paint0_radial)"/>
<path d="M70.1816 67.0919C75.3376 57.2319 72.5996 33.3219 39.9136 8.35791C63.3136 27.9579 52.7896 46.9459 45.6656 57.1679C37.1176 69.4299 59.2836 87.9199 70.1816 67.0919Z" fill="url(#paint1_radial)"/>
<path d="M70.3116 67.2001C75.4616 57.3521 72.7336 33.4701 40.0796 8.53613C63.4536 28.1081 56.4116 46.5361 49.2996 56.7501C40.7616 69.0001 59.4256 88.0001 70.3116 67.2001Z" fill="url(#paint2_radial)"/>
<path d="M37.248 7.67798C37.248 7.67798 52.286 24.18 36.13 39.328C18.79 55.586 20.244 65.508 25.318 76.886C30.392 88.264 52.422 98.686 67.628 87.586C82.834 76.486 77.028 62.786 77.028 62.786C77.028 62.786 82.56 78.522 58.692 85.122C58.692 85.122 37.368 89.304 33.146 66.018C28.924 42.732 63.09 46.504 37.248 7.67798Z" fill="url(#paint3_radial)"/>
<defs>
<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(49.7635 63.8117) rotate(175.684) scale(31.2973 29.7352)">
<stop offset="0.12" stop-color="#FFF200"/>
<stop offset="0.46" stop-color="#F7941D"/>
<stop offset="0.93" stop-color="#F15A29"/>
</radialGradient>
<radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(48.4093 43.2512) rotate(166.097) scale(27.7059 27.3118)">
<stop offset="0.12" stop-color="#00ADEE"/>
<stop offset="0.46" stop-color="#14A1DF"/>
<stop offset="0.93" stop-color="#222265"/>
</radialGradient>
<radialGradient id="paint2_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(322586 -45769.5) rotate(-115.837) scale(7112.64 16975.5)">
<stop offset="0.12" stop-color="#00ADEE"/>
<stop offset="0.46" stop-color="#14A1DF"/>
<stop offset="0.93" stop-color="#222265"/>
</radialGradient>
<radialGradient id="paint3_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(50.0191 50.0705) rotate(5.71) scale(36.224 27.5302)">
<stop stop-color="#F15A29"/>
<stop offset="0.3" stop-color="#F7941D"/>
<stop offset="0.57" stop-color="#F9ED32"/>
<stop offset="0.85" stop-color="#F7941D"/>
</radialGradient>
</defs>
</svg>

Answer 1

答案很简单，我没有打电话给request.resource：

allow write: if request.resource.contentType == "image/svg+xml" && request.resource.size < 1 * 1024 * 1024;