0

I am using Firebase Dynamic Links REST API to generate short links.
If I paste that link into the browser it redirects and loads the appropriate image. But when I use the same link to load image in <img> tag in my webpage it fails.
I created a sample(codesandbox link below) trying to load the same image. I put two image tags, one with bit.ly shortener and one generated with the firebase dynamic links generator. The bit.ly link loads fine.

Sample codesandbox : https://codesandbox.io/s/using-img-tag-forked-ufnd31?file=/index.html

Sample short link for a image : https://files.flux.chat/vs4fy3cY7s1aMnS57

Create dynamic link payload
URL : https://firebasedynamiclinks.googleapis.com/v1/shortLinks?key=WEB_API_KEY
BODY : {
    "dynamicLinkInfo": {
        "domainUriPrefix": "https://files.flux.chat",
        "link": "https://firebasestorage.googleapis.com/v0/b/fluxchathq.appspot.com/o/business%2F5Nmu0449tlNVWVdOpo8h%2Fincoming%2FNA?generation=1654498929454543&alt=media&token=664c135f-48f3-4de8-8ba7-d75ca3a5362f",
        "navigationInfo": {
            "enableForcedRedirect": true
        }
    },
    "suffix": {
        "option": "UNGUESSABLE"
    }
}

HTML code

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div>
      <img class="image" src="https://files.flux.chat/vs4fy3cY7s1aMnS57" />
      <img class="image" src="https://bitly/3Lr8Bq1" />
    </div>
  </body>
</html>
D V Ramana
  • 1,136
  • 11
  • 13

1 Answers1

0

I don't have any experience with this, but I think shortened urls won't work as an image source-- they don't point to an image directly, they redirect to an image.

Here's an old answer that seems relevant: https://stackoverflow.com/a/27062627/954986

That is not possible unless you own the domain where you want the shortened URL. For example, to do that, you would need to own (or have access to) the website bit.ly.

bit.ly is not hosting your video or your image, it only redirects them to the real URL when you click on the link.

[...]

You will see that your image is NOT in the code. It only redirects to the page that DOES contain your image.

Perhaps you could make an XHR request in javascript, and see if it returns a 3** status with some other location, and use that as the source for the image? (edit: the short link doesn't have CORS enabled, so this probably won't work)

I just tested with curl (well, httpie which is far superior), and the sample shortlink you provided gives a 302, with the Location response header being the actual image.

edit: I tested your sandbox, and the flux.chat image source shows a GET request resulting in a 403 Forbidden status code in the browser console. Maybe it's because it's being called from localhost? But firebase sees something about the request it doesn't like (maybe origin being localhost, maybe it being in an image source, maybe ..?) and that's preventing it from loading.

Sorry I don't have anything more concrete for you, definitely a strange issue.

Nathan
  • 73,987
  • 14
  • 40
  • 69
  • 1
    I checked the logs for bit.ly link and it loads the image in one redirect. the firebase dynamic link goes to gstatic and has a couple of hops before it resolves to the actual URL. Yeah I too feel its something to do with the right headers. Not able to find out the right documentation for it though. If someone from firebase team can give their inputs that would be apt. – D V Ramana Jun 10 '22 at 05:52
  • I poked around on this for a while, and I think what's happening is that firebase is inferring (from some automatically send headers) that this is an image link, and is just refusing to serve it (403). They probably do that to avoid abuse or something. I couldn't find any documentation on this, I might open a support ticket with firebase, specifically asking why it's 403ing. If you figure this out let me know, I'm curious. – Nathan Jun 10 '22 at 05:55
  • https://firebase.google.com/docs/hosting/full-config?hl=en&authuser=0#headers I am fiddling around with this for now which allows me to automatically add headers to requests from a particular site(that I own and hosted on firebase hosting) – D V Ramana Jun 10 '22 at 06:00
  • Any luck here ?? – D V Ramana Jun 13 '22 at 15:48
  • 1
    Sorry, haven't looked into this any more. I'd recommend contacting support, as this seems to be some undocumented behavior. It looks like Firebase Dynamic Links is just refusing to serve (403) in the context of an load. – Nathan Jun 13 '22 at 16:04