Firebase网站安全咨询及未登录用户页面预加载重定向需求

Hey there! Let’s tackle your two main concerns one by one—first, the "exposed redirect target" worry, and second, implementing pre-load redirects for unauthenticated users.

First: The "Exposed Redirect URL" Isn’t a Critical Security Flaw (But We Can Harden Things) #

First off, a key truth about front-end code: it’s always publicly visible. Trying to hide URLs or logic in client-side JS is a losing battle. The real security risk isn’t that someone knows home.html exists—it’s whether unauthenticated users can actually access the content of that page.

So instead of trying to obscure the redirect target, focus on securing access to the protected page itself. Here are two solid approaches:

1. Client-Side Check with Content Hiding (Quick Win) #

Even if someone types home.html directly into their browser, we can immediately check their auth state and redirect them before any content loads. To avoid a brief "flash" of the protected page, add this to the <head> of home.html:

/* Hide content until we confirm auth status */
body {
  display: none;
}

Then add this script before the closing </body> tag (or in a separate JS file loaded early):

firebase.auth().onAuthStateChanged(firebaseUser => {
  if (firebaseUser) {
    // User is logged in—show the page
    document.body.style.display = 'block';
  } else {
    // No valid user—redirect to login immediately
    window.location.replace('login.html');
  }
});

This way, unauthenticated users never see the protected content, even if they guess the URL.

2. Server-Side Authentication (Stronger Security) #

For bulletproof protection, use Firebase Hosting rewrites paired with a Cloud Function to validate the user’s session before serving the protected page. This ensures unauthenticated users never even receive the home.html file.

Step 1: Configure Firebase Hosting Rewrites

Update your firebase.json to route requests for home.html to a Cloud Function:

{
  "hosting": {
    "public": "public",
    "rewrites": [
      {
        "source": "/home.html",
        "function": "validateAuth"
      }
    ]
  }
}

Step 2: Create the Validation Cloud Function

Write a function that verifies the user’s ID token (stored in a secure cookie) before serving the page:

const functions = require('firebase-functions');
const admin = require('firebase-admin');
const path = require('path');

admin.initializeApp();

exports.validateAuth = functions.https.onRequest(async (req, res) => {
  // Get the ID token from the secure cookie
  const idToken = req.cookies.__session;

  try {
    // Verify the token is valid and not expired
    await admin.auth().verifyIdToken(idToken);
    // Token is valid—serve the protected page
    res.sendFile(path.join(__dirname, '../public/home.html'));
  } catch (error) {
    // Invalid or missing token—redirect to login
    res.redirect('/login.html');
  }
});

Step 3: Store the ID Token in a Secure Cookie

When the user logs in, save their ID token to an HttpOnly/Secure cookie so the server can access it:

firebase.auth().signInWithEmailAndPassword(email, password)
  .then(userCredential => {
    return userCredential.user.getIdToken();
  })
  .then(idToken => {
    // Set a secure cookie (only sent over HTTPS, not accessible to JS)
    document.cookie = `__session=${idToken}; path=/; secure; HttpOnly; SameSite=Strict`;
    window.location.replace('home.html');
  })
  .catch(error => {
    console.error('Login failed:', error);
  });

Second: Pre-Load Redirect for Unauthenticated Users #

The client-side and server-side methods above already handle this, but let’s clarify the best practices:

• For protected pages: Always run the auth check as early as possible—before any content renders. The client-side method with body { display: none; } prevents content flash.
• For public pages (like login/register): You can also add a check to redirect logged-in users away automatically:

  firebase.auth().onAuthStateChanged(firebaseUser => {
    if (firebaseUser) {
      // User is already logged in—send them to home
      window.location.replace('home.html');
    }
  });
  

Key Takeaway #

Never rely on hiding front-end logic for security. The goal is to ensure that only authenticated users can access protected resources, whether that’s via client-side checks (for better UX) or server-side validation (for true security).

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