Getting invalid HTTP method/URL pair Error when trying to load Firebase Storage Image URL into meta tag

user_15197645 0
Viewed 1900

I am trying to include an image in my og:image meta tag that loads the image of a specific shop dynamically that is being shared by a user that is using my app when he wants to share the shop through WhatsApp so that it would show a thumbnail with the title, description, and image of the shop.

but it doesn't load so I went and opened developer tools and inspected the element of my meta tag I found that the URL leads to this error:

{
  "error": {
    "code": 400,
    "message": "Invalid HTTP method/URL pair."
  }
}

here is my code:

landing page of the shared link:

    <meta property="og:title" content="<?php echo $_GET["title"]; ?>" />
    <meta property="og:description" content="<?php echo $_GET["desc"]; ?>"/>
    <meta property="og:type" content="website"/>
    <meta property="og:url"  content=""/>
    <meta property="og:image" content ="<?php  echo $_GET["img"];?>"

Sent URL:

https://MyWebsiteName.com/share/?shop=xJbOcJDm1EOAkQdj0P3Q&title=Sorso&desc=Proudly%20Serving%20Gardelli%20Specialty%20Coffees&img=https://firebasestorage.googleapis.com/v0/b/myappname-9ff0f.appspot.com/o/Profile%20Image%2FxJbOcJDm1EOAkQdj0P3Q%2F125819259_2799019546979252_3099556570327477479_n.jpeg?alt=media&token=10450a78-d240-4f88-bb47-e809f91937c6

meta tag inspection:

<meta property="og:image" content="https://firebasestorage.googleapis.com/v0/b/myappname-9ff0f.appspot.com/o/Profile Image/xJbOcJDm1EOAkQdj0P3Q/125819259_2799019546979252_3099556570327477479_n.jpeg?alt=media"/>

What's the problem and how can I load the firebase storage image URL correctly into the meta tag?

EDIT:

including firebase storage token in the url passed but still getting the same error:

{
      "error": {
        "code": 400,
        "message": "Invalid HTTP method/URL pair."
      }
    }
<meta property="og:title" content="<?php echo $_GET["title"]; ?>" />
    <meta property="og:description" content="<?php echo $_GET["desc"]; ?>"/>
    <meta property="og:type" content="website"/>
    <meta property="og:url"  content="<?php echo $_GET["img"].""."&token=".$_GET["token"]; ?>"/>
    <meta property="og:image" content ="<?php echo $_GET["img"].""."&token=".$_GET["token"];?>"/>

i believe the problem is that the meta tag is converting the encoding for "/" symbol from %2F to "/" and thats why it is invalid. how do i make the meta tag not do that for my url?

whatsapp firebase-storage firebase meta-tags html
1 Answers

Recently I had a similar problem, and must save the picture through the backend and provide a public persistent url; after some reserch found this great article:

https://www.sentinelstand.com/article/guide-to-firebase-storage-download-urls-tokens

If the url should be generated at server-side

Basically, if the url is invalid (which could lead to the 400 error you posted) the issue could be related to the token url param: when you upload a file to Cloud Storage (don't know if also manually but surely with the SDK libraries) your file obtain automatically a token which is stored in the "firebaseStorageDownloadTokens" metadata key.

GCP Console file metadata

The correct public url could be generated with client SDK libraries, but server SDK seems not have the same feature (at least not all).

If you build your url adding this token then you should be able to publicly access your image. In the article I linked above there is an example in NodeJS, and I adepted the code to my needs (Golang)

func CreatePersistentDownloadUrl(
    ctx context.Context,
    object *gcs.ObjectHandle,
) (string, error) {

    attrs, err := object.Attrs(ctx)
    if err != nil {
        return "", err
    }

    token, ok := attrs.Metadata["firebaseStorageDownloadTokens"]
    if !ok {
        return "", errors.New("file token not found")
    }

    parsedName := url.QueryEscape(object.ObjectName())

    return fmt.Sprintf(
        "https://firebasestorage.googleapis.com/v0/b/%s/o/%s?alt=media&token=%s",
        object.BucketName(),
        parsedName,
        token,
    ), nil
}

The relevant parts on the code are 2:

  1. After the file is uploaded, fetch it's attributes and metadata in order to retrieve the assigned token
  2. Build your url in the form "https://firebasestorage.googleapis.com/v0/b/[bucket]/o/[file]?alt=media&token=[token]"

Don't forget to URL encode the file name!

If the url should be generated at client-side

Tht said, the client SDK libraries should be able to generate such url without manually fetching the file metadata, but if the url is invalid, you should first check the url itself, and verify the result with a browser, and then check if the problem could be the php parsing of the querystring.

Let's pretend your client generated an url formed like this and you already checked the url for correctness (note that the following url is already somewhat encoded, see the space encoded as "%20"):

https://firebasestorage.googleapis.com/v0/b/myappname-9ff0f.appspot.com/o/Profile%20Image/xJbOcJDm1EOAkQdj0P3Q/125819259_2799019546979252_3099556570327477479_n.jpeg?alt=media&token=10450a78-d240-4f88-bb47-e809f91937c6

before passing that URL to server I would encode like this in Javascript:

encodeURIComponent(url);

// Which gives you this
// https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fmyappname-9ff0f.appspot.com%2Fo%2FProfile%2520Image%2FxJbOcJDm1EOAkQdj0P3Q%2F125819259_2799019546979252_3099556570327477479_n.jpeg%3Falt%3Dmedia%26token%3D10450a78-d240-4f88-bb47-e809f91937c6

Now on the server-side you decode the querystring value to re-obtain the url:

$url = urldecode($_GET['img']);

// You should get this
// https://firebasestorage.googleapis.com/v0/b/myappname-9ff0f.appspot.com/o/Profile%20Image/xJbOcJDm1EOAkQdj0P3Q/125819259_2799019546979252_3099556570327477479_n.jpeg?alt=media&token=10450a78-d240-4f88-bb47-e809f91937c6
user_32287680
Related