IFrame url refused to connect

Anvil Q&A
1

What I’m trying to do:
Use the custom anvil IFrame component described here: IFrame

What I’ve tried and what’s not working:
I cloned the IFrame app, and set it as a dependency in the current web app I’m working on. Then I dragged an IFrame object into one of my forms, and set the ‘url’ parameter to “https :// www. google. com”. [I had to add the spaces so I could include only one valid link in this post]

When I run the app, in the IFrame component it says “google. com refused to connect” [again, these spaces aren’t in my actual url parameter]

Am I doing something incorrectly?

Code Sample:

# code snippet

Clone link:
share a copy of your app
https://anvil.works/build#clone:RVFDJZGXTNA3WNVF=THDVNVK6HWDKS4GI27RRWMOH
the IFrame in question is in my form titled “Construction”

2

Hi @ianthomp ,

The reason for this is that Google is sending an X-Frame-Options: SAMEORIGIN response header. This option prevents the browser from displaying iFrames that are not hosted on the same domain as the parent page.

Mozilla Developer Network - The X-Frame-Options response header

If you set your URL parameter to the below URL it should work. This is because it is set to be allowed to be embedded in IFrames:
https://an-iframe-able.anvil.app

This page gives a bit more information about Cross-Origin Resource Sharing (CORS) and the IFrame component:
IFrame (anvil.works)

1 Like