Add experimental.globalFetch() Labs API

[pfrazee]

Traditional web applications are able to make cross-origin requests by proxying through their own servers. That's not a possibility for Dat's serverless apps, which is a problem for a lot of apps. For instance, what if you wanted to fetch "open graph" metadata for a site before posting it on a social profile app (ie fritter).

This PR solves this issue with a new Labs API called experimental.globalFetch. It is functionally similar to fetch() except for a few key differences:

• Currently only HEAD and GET are supported.
• A permission prompt is raised for each request to a new origin.
• CORS policies are not applied, and so the site can send a request to any possible service.
• Cookies/credentials are never sent.

For each new origin contacted, a new permission prompt will be created:

The permission will persist for every origin.

To use this API, add the globalFetch token to the experimental.apis array in the dat.json manifest:

{
  "experimental": {
    "apis": ["globalFetch"]
  }
}

You can then use the API exactly as Fetch is used:

var res = await experimental.globalFetch('https://beakerbrowser.com/about.html')
var body = await res.text()

[paul90]

Something to remember is that fetch is not just for getting content, request methods other than GET can be set via the optional init object.

It might be an idea to look at the request method being used, and reflect that in the permission prompt, but then it would also make sense to have separate set of permissions for fetching from and writing to a remote site.

[pfrazee]

@paul90 Yes that's true - right now globalFetch only supports HEAD/GET though.

[arni077]

maybe basic question but.. the var body in the example above is now holding as string ALL the text that written on about.html or just what about.html returns?

[pfrazee]

@arni077 it will contain all the text inside the about.html file, as served by https://beakerbrowser.com

[arni077]

@pfrazee cool, but what if a dat website wants to send simple string to https://beakerbrowser.com ? how we can do that?

[pfrazee]

@arni077 not yet supported

[RangerMauve]

arni077: You can include data in your query portion of the URL if you're the one creating the server.

I'll note that It's really frowned-upon to use GET requests like that.

e.g.

GET https://example.com/example?myvariable=wowcool

[arni077]

@RangerMauve what do you mean by "frowned-upon " ?

i dont understand how to send with the snippet you shared. suppose if i have this:
< form action=" " method="get" >
enter name: < input type="text" name="name" >
< input type="submit" value="Submit" >
< /form >

how to send with get method to example.com if i am a dat website?

[arni077]

@pfrazee when it will be supported? it is very important for my project.
do u have an idea how to circumvent this with what we got now?

[RangerMauve]

@arni077 "frowned-upon" means that people have found that it's a bad idea to use this method. It goes against how HTTP is supposed to work.

However, your example would look like fetch("https://example.com/?name="+whatevervalue) where whatevervalue is a variable holding the value you want to send as name to the server.

What language are you using for your server-side?

[arni077]

@RangerMauve i use node.js.

[RangerMauve]

Cool, in that case you can get the name field using var thename = req.query.name in your request handler if you're using express. The docs on that are here.

(Apologies to @pfrazee for derailing the thread so hard! 😅)

[pfrazee]

@RangerMauve No worries

@arni077 Basically I plan to add support for POST and etc, but just need to think it through. It's on the todo list.