2

I have created a short url, let say https://my.short.link/foo, that is pointing to https://my.other.website/bar.

How can I retrieve this url with a javascript method inside the browser? (I'm using angular)

Raphaël Balet
  • 6,334
  • 6
  • 41
  • 78
  • 2
    You could try fetching it, but I don't know if that would give you the resolved URL or not? – evolutionxbox Apr 29 '22 at 07:10
  • @evolutionxbox - Astonishingly, yes, if the service does a simple redirect, the target URL is accessible as `response.url` (without the hash fragment, oddly). – T.J. Crowder Apr 29 '22 at 07:32

1 Answers1

2

It will depend on how my.short.link handles processing the URL when you request it.

  • Type 1: A really basic service might use a redirection response (HTTP 302, etc).
  • Type 2: Or it might use a successful response serving an HTML page with a <meta http-equiv="refresh" ...> tag in it.
  • Type 3: Or it might use a successful response serving an HTML page doing the redirection via JavaScript.

Browser

If you mean you want to do this in a browser, you might be able to get the information for service Type 1 above, but not for other services.

As evolutionxbox says, you could try fetch, and surprisingly (to me!) if the service handles requests with a simple redirection response, you do see a new URL in the response, but it wont have the hash fragment:

fetch("https://tsplay.dev/wEv6gN")
.then(r => {
    if (!r.ok) {
        throw new Error(`HTTP error ${r.status}`);
    }
    for (const [key, value] of r.headers) {
        console.log(`${key}: ${value}`);
    }
    console.log(r.url);
})
.catch(console.error);

That URL, https://tsplay.dev/wEv6gN, redirects to https://www.typescriptlang.org/play?#code/MYewdgzgLgBAJgQygmBeGB5ARgKwKbBQB0AZgE554BeeAFAN4CwAUDGzBCALZ4BcMARgBMAZgA0LdjAA24AOb96AIgRLeSrEoC+E1u2kBLaPwDaS4EoC6uqSBL8lSm+wRksBqGVcBPfmACu0tLObFAAFgZgchD8AkRCuloAlADcLCxQ3gAOePBICAD6ANZ43mgwJd52MJk51YjIacwsJP5ghAbg8CAA6iBkRbRF-A2FlUkwTHps0niwAG4I0v656KMmRZZNUgD0O0QHLFpAA via a 302 ("Moved Permanently") redirect response. In the code above, we only see https://www.typescriptlang.org/play?. But maybe that's enough for your purposes.

But that won't work for types 2 and 3 above. You'd have to be able to read and parse the HTML, and the Same Origin Policy will prevent code running on your origin from accessing that HTML. You could try opening it in an iframe (though I suspect you don't really want to visit the page, you just want to get its URL), but the same issue applies: Even when the iframe goes to the target location, you won't be able to access that because of the SOP.

Node.js Or Similar

If you mean in Node.js or some other non-browser environment, then:

  • For a Type 1 service, you could do an HTTP request and look at the redirection information.
  • For a Type 2 service, you could do the HTTP request, parse the HTML, and look for the tag.
  • For a Type 3, you'd need to use a headless browser (Puppeteer, etc.) to capture where it was going.
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • Thx for this amazing answer, initially, it was the `Type 1` inside a browser. but I do get a `301 strict-origin-when-cross-origin`. I still see in the Response Headers the location, which it what I would like to have, but I've read that I shall not access to it. Do you have any Idea ? I do think I'll have to go through the `Node.js Or Similar` step – Raphaël Balet Apr 29 '22 at 07:42
  • @RaphaëlBalet - No, no further ideas I'm afraid. I suspect you will need to go through a server. Happy coding! – T.J. Crowder Apr 29 '22 at 08:00
  • I'm also afraid so I'll go with Node.js and update you're answer accordingly. Thx again & Happy coding to ! – Raphaël Balet Apr 29 '22 at 08:08