如何安全配置Firebase实时数据库规则？解决浏览量统计失效问题

核心问题分析 #

• 全公开的安全规则（.read和.write设为true）存在数据泄露、篡改风险，触发Firebase安全警告
• 直接收紧规则后，客户端失去合法读写权限，导致浏览量无法读取或更新

解决方案 #

1. 配置安全规则 #

设置路径级精细规则，允许公开读取浏览量，但仅允许合法的递增写入（防止恶意篡改）：

{
  "rules": {
    "pages": {
      "id": {
        "$postId": {
          // 允许所有用户读取浏览量数据
          ".read": true,
          // 仅允许递增更新value字段，其余字段禁止修改
          ".write": "newData.exists() && 
                     newData.hasChildren(['value', 'url', 'id']) && 
                     newData.child('value').val() === data.child('value').val() + 1 &&
                     newData.child('url').val() === data.child('url').val() &&
                     newData.child('id').val() === data.child('id').val()"
        }
      }
    }
  }
}

规则说明：

• 仅开放pages/id/{postId}路径的读写权限
• 写入时必须满足：仅将value字段递增1，url和id字段保持初始值不变

2. 调整JavaScript统计代码 #

（1）升级Firebase SDK（推荐）

旧版本SDK(v2.3.2)已停止维护，替换为最新Web SDK保证兼容性：

document.addEventListener("DOMContentLoaded", function() {
  const pvin = "tbt-postview-counter";
  if (!pvin) return console.error("Firebase URL not found!");
  
  // 加载Firebase核心库
  const script = document.createElement("script");
  script.src = "https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js";
  script.onload = () => {
    // 加载实时数据库模块
    const dbScript = document.createElement("script");
    dbScript.src = "https://www.gstatic.com/firebasejs/9.23.0/firebase-database.js";
    dbScript.onload = () => {
      const { initializeApp } = firebase;
      const { getDatabase, ref, onValue, runTransaction } = firebase.database;
      
      // 初始化Firebase
      const app = initializeApp({
        databaseURL: `https://${pvin}-default-rtdb.firebaseio.com/`
      });
      const db = getDatabase(app);
      
      // 处理每个文章的浏览量
      document.querySelectorAll(".post-view[data-id]").forEach(el => {
        const postId = el.getAttribute("data-id");
        const counterEl = el.querySelector("#postviews");
        counterEl.classList.add("view-load");
        
        const postRef = ref(db, `pages/id/${postId}`);
        
        // 读取当前浏览量
        onValue(postRef, (snap) => {
          const data = snap.val() || {
            value: 0,
            url: window.location.href,
            id: postId
          };
          counterEl.classList.remove("view-load");
          counterEl.textContent = `${data.value} views`;
          
          // 当前文章页面执行浏览量递增
          if (document.getElementById("real-post")?.contains(el)) {
            // 事务操作保证计数原子性，符合规则要求
            runTransaction(postRef, (currentData) => {
              if (currentData) {
                currentData.value = (currentData.value || 0) + 1;
              } else {
                return { value: 1, url: window.location.href, id: postId };
              }
              return currentData;
            });
          }
        });
      });
    };
    document.body.appendChild(dbScript);
  };
  document.body.appendChild(script);
});

（2）兼容旧SDK的修改（若不想升级）

保留旧SDK，将写入方式改为事务操作，适配规则的递增要求：

document.addEventListener("DOMContentLoaded", function() {
  var pvin = "tbt-postview-counter";
  if (!pvin) return console.error("Firebase URL not found!");
  let s = document.createElement("script");
  s.src = "https://cdn.firebase.com/js/client/2.3.2/firebase.js";
  s.onload = () => {
    $(".post-view[data-id]").each((_, el) => {
      const $el = $(el);
      const id = $el.attr("data-id");
      const $counter = $el.find("#postviews").addClass("view-load");
      const dbRef = new Firebase(`https://${pvin}-default-rtdb.firebaseio.com/pages/id/${id}`);
      
      dbRef.once("value", snap => {
        const data = snap.val() || {
          value: 0,
          url: location.href,
          id: id
        };
        $counter.removeClass("view-load").text(`${data.value} views`);
        
        if (document.getElementById("real-post")?.contains(el)) {
          // 事务执行递增，避免并发冲突同时符合规则
          dbRef.transaction(function(currentData) {
            if (currentData) {
              currentData.value = currentData.value + 1;
            } else {
              return { value: 1, url: location.href, id: id };
            }
            return currentData;
          });
        }
      });
    });
  };
  document.body.appendChild(s);
});

3. 验证规则有效性 #

部署规则后测试：

• 访问文章页面，确认浏览量正常递增
• 尝试手动修改数据库value值，确认被规则阻止
• 查看Firebase控制台规则监控，确认无权限错误

内容的提问来源于stack exchange，提问作者Mohammad Ibrahim