Clickable text links formatted with NocoderHQ HTML Renderer or Markdown Renderer do not resolve in PWA or Previewer
In my app, I have included a link for a photo credit at the bottom of a list block. The desired response is when the link is clicked, the in-app browser displays a remote HTML page and highlights the full photo credit from a long list of credits.
This action works correctly when my app is saved to the Home Screen of my iPhone using the QR code method.
The action does not work on my computer in Chrome or Safari, using the Adalo Editor Preview or the Share Previewer.
In my business use case, I need potential customers to come to the public Previewer site to explore the app, so the link to photo credits must properly highlight the credits file, which is publicly served from a directory on a web server from my app domain.
This happens because both NocoderHQ HTML Renderer and Markdown Renderer use a React Webview component that sets the header on the request to “SAMEORIGIN”. The renderer is essentially an iframe that is asking to display the remote content in itself.
The fix is on the remote server. If you do not control the remote server, like google.com for example, there is no fix. If you control the server, edit the global ‘.htaccess’ file to allow this request. If you have a shared hosting environment, create a new ‘.htaccess’ file in the directory where the remote content is located.
To serve all requests for “SAMEORIGIN” add this line to .htaccess:
Header always unset X-Frame-Options
To serve requests for “SAMEORIGIN” from a specific domain, add this line to .htaccess:
Header set X-Frame-Options: “ALLOW-FROM http://yourwebsite.com/”
There may be some syntax differences between Nginx, Apache, or LiteSpeed. This example is for LiteSpeed.
You can check your server by issuing a curl command: