Firebase Fix 403 Requests From Referrer Are Blocked Error

When setting up a new or existing Firebase Web App on a new domain (or subdomain), you may encounter errors (shown below) where most of them talk about requests being blocked by the referrer which is yoursite.com or sub.yoursite.com.

Errors

Errors or warnings of the following kind may be seen or observed.

Firebase config instantiation error:

FirebaseError: Installations: Create Installation request failed with error "403 PERMISSION_DENIED: Requests from referer [yoursite.com] are blocked.

Firebase Measurement ID fetch failed error:

@firebase/analytics: Failed to fetch this Firebase app's measurement ID from the server...

Measurement ID/Analytics related warning:

[Analytics: Dynamic config fetch failed: [403] Requests from referer [yoursite.com] are blocked. (analytics/config-fetch-failed).]

403 POST responses to identitytoolkit.googleapis.com API calls, for instance:

POST https://identitytoolkit.googleapis.com/v1/accounts:signInWithCustomToken?key=YOUR_API_KEY
PAYLOAD {"token": ..., "returnSecureToken": true}
{
  "error": {
    "code": 403,
    "message": "Requests from referer [yoursite.com] are blocked.",
    "errors": [
      {
        "message": "Requests from referer [yoursite.com] are blocked.",
        "domain": "global",
        "reason": "forbidden"
      }
    ],
    "status": "PERMISSION_DENIED",
    "details": [
      {
        "@type": "type.googleapis.com/google.rpc.ErrorInfo",
        "reason": "API_KEY_HTTP_REFERRER_BLOCKED",
        "domain": "googleapis.com",
        "metadata": {
          "consumer": "projects/...",
          "service": "identitytoolkit.googleapis.com"
        }
      }
    ]
  }
}

Solution

Basically, the first thing you should do is just read the API Keys for Firebase documentation page to get acquainted with the concept of client-side API keys in Firebase.

Then, in all likelihood, the solution to pretty much all the errors/warnings above is to set your web URL as an HTTP referrer for the Browser Key in use. This can be done in the APIs & Services > Credentials > API Keys section in your Google Cloud Console. This is what the section should look like:

APIs & Services > Credentials > API Keys

When you click on Browser key (auto created by Firebase) link seen in the image above, you should see HTTP referrers (web sites) selected under the Application restrictions section. If that is the case, go to the Website restrictions section below it and add yoursite.com or sub.yoursite.com to the list.

APIs & Services > Credentials > API Keys > Browser key

Once saved, your problem should be solved.

Leave a Reply

Your email address will not be published. Required fields are marked *