Since Retool currently does not have NFC communication, I am trying to use my browser's NDEFReader API.
However, I have found that when I use parent.NDEFReader (this API must be used in a top-level frame) on a self-hosted site, I can get the object correctly, but I have a "cross-origin" problem in your cloud.
Does anyone have a solution?
Hi @gscc!
The Retool web app currently does not support the NDEFReader API, and that's mainly because it is currently only supported on a small number of mobile browsers.
What you can do, however, is create a Retool Mobile application which has a new NFC reader component. (keep in mind that you can only test this component when the app is running on your device natively or on a supported mobile browser).
1 Like
@shawntax I have successfully used NDEFReader API on a self-hosted site with a custom component.
But I'm running into cross-origin problems when I build the same custom component in your cloud, which should be a problem you have to solve, after all it's very strange to have different behavior in different environments.
@gscc Retool's runtime runs all user-defined code in a custom sandbox, and as such there are certain browser capabilities that are not supported -- you should not expect one-to-one capability with browser features you can access in a self-hosted environment.
How are you implementing the custom component? Does it iframe the self-hosted site you created?
This problem has nothing to do with the NDEFReader API, the point is that the custom component cannot communicate with the parent even if the Storage and cookies setting is enabled.
I will now provide you with an example app.
ParentTest.json (3.8 KB)
You can test the app on the self-hosted site or your cloud.
I can see this in the console at the self-hosted site.
But in your cloud, even if I enable that option, I only see the following error message.
In your cloud, even though the iframe has the allow-same-origin attribute, your iframe src is simply at https://retool-edge.com, so how do you get the same-origin?
Or do you actually think that if you have the allow-same-origin attribute, you don't care about the iframe src?
The short answer is: you cannot. The custom component will always be hosted on https://retool-edge.com and your Cloud Retool app on https://[domain].retool.com, so you cannot configure the iframe to interact with the parent via JS directly.
The "Storage and Cookies" setting specifically allows for cross-origin data storage access -- it will not allow access for the majority of browser APIs.
Retool has it's own APIs for sending and receiving data from the custom component iframe to the parent app, described in our docs.