How can I redirect to a new page from an embedded Anvil IFrame?

Anvil Q&A
1

What I’m trying to do:

I would like to have an appointment request form on my Wordpress website that redirects to a confirmation page once the form is complete. On my website, I have a code module where I can input HTML. I added the embedding code for my Anvil form:

<script src="https://anvil.works/embed.js" async></script>
<iframe style="width:100%;" src="https://*.anvil.app/*"></iframe>

In the Anvil app, I have a line like this:

anvil.js.window.top.location.href = 'https://www.google.com/'

which gets triggered when you hit the “Submit” button. This works when I run the Anvil app by itself. However, if I embed it into the IFrame, I get an error like:

`ExternalError: SecurityError: Blocked a frame with origin "*.anvil.app" from accessing a cross-origin frame.`

which probably makes sense for security reasons. However, I need a way to work around this. Does anyone have any ideas?

What I’ve tried and what’s not working:

I have tried a number of things. One of the most promising seemed to be the sandboxing concept. For example, doing something like:

<script src="https://anvil.works/embed.js" async></script>
<iframe style="width:100%;" src="https://*.anvil.app/*" sandbox="allow-same-origin allow-top-navigation allow-scripts allow-forms"></iframe>

to the IFrame. However, I still get the same error and cannot access the browser navigation.

In other places, people talk about postMessage a lot, but I have no idea how to apply it here.

Some other relevant links I have explored:

2

Have you tried anvil.js.window.parent.location.href ? It’s been a couple of years since I solved this problem for an app that unfortunately no longer exists, but I’m pretty sure I used the parent property.

3

Yep, tried that as well unfortunately. I can check again when I get home later.

EDIT: yes, I got home and confirmed that it still had the same issue with anvil.js.window.parent.location.href

4

Browser security is probably tighter now than it was back then. Ultimately, I moved away from the iframe route and went the Javascript-calling-HTTP-endpoints route because of other iframe headaches.