How to get browser-side query to run?

💬 Queries and Resources
1
  • Goal: I would like to execute the a browser-side query using the following JavaScript code:
const url = 'https://internal-service.com/api/whoami';

fetch(url, {'credentials': 'include'})
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There was a problem with the fetch operation:', error);
  });

Currently, whenever I run this from a JS query, I ran into the following exception:

Access to fetch at https://internal-service.com/api/whoami from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

For context, I am running this on a self-hosted instance.

Why do I need this?
My org has a complicated authentication setup, so currently Retool backend queries to this service are not working for this service. As an alternative, we would like to do this using brower-side queries that will forward the user's credentials.

What have I tried?

  • JS queries (throws the error above)
  • Embedding the JavaScript in a custom component and configuring same-origin from iFrame. Surprisingly, this does work (the browser-side query is sent successfully).

I would like to avoid using custom components, so I am wondering if there is any way I can get this to work in JS queries? How can I get the origin to not be null?

1 Like
2

Hey @pablo.estrada! Thanks for reaching out.

I'm fairly certain that a custom component will be your best option to get this working, assuming you need everything to run client-side. All user-provided JS is executed in a relatively locked down iframe that specifically lacks the allow-same-origin tag, which is why the origin of your request is showing up as null.

Is there a particular reason that you're against using a custom component? And unless you think it's not worth rehashing, I'd be curious to see if it's possible to properly authenticate requests from the Retool backend.

1 Like
3

I have previously ran into weird UI issues with custom components. There is also increased development overhead in custom components as opposed to using the native Retool features.

I think it would be useful to allow this behavior for self-hosted deployments. I don't have any security concerns since I am running everything locally.

1 Like
4

That's fair! For more context, our docs have a good resource that specifically talks about the security implications of allow-same-origin access and recommended implementations.

I did ask around and we actually do have a relevant environment variable specifically for modifying the permissions of the iframe that handles user-defined JS, but I don't think it was ever capable of granting allow-same-origin access. Not to mention the fact that it seems to be broken since we upgraded our runtime. :sweat_smile:

All this to say - custom components are currently the best option for implementing this, but I'll talk to the team about fixing the CUSTOM_RETOOL_SANDBOX_RESTRICTIONS variable to work with our new runtime!

2 Likes