App No Longer Working: iframe to parent Blocked by Anvil CSP

Anvil Q&A
1

What I’m trying to do

Hi All,
I’ve run into an issue with an app that has previously been working several weeks now, The app now fails to respond to an external request with the error:

Dev Tools/Network/Headers
Refused to frame ‘https://reliable-equatorial-heron.anvil.app/’ because an ancestor violates the following Content Security Policy directive: “frame-ancestors https://anvil.works https://py.space”.

The request is just a simple navigation request from a redirect i.e. open the page. No iframe embeddeding etc.

I dohave an iframe on another page of the same app, but this flow has been working perfectly.

The flow goes like this:

1)Anvil app 'log-in page - the page has a verification QR Code, which is embedded as an iframe
2) The User clicks the QR code and goes through verification via a 3rd party external api
3) If successful the User’s data is returned to a Data Table in the same Anvil App
4) The callback then redirects the User to the ‘Home’ page of the same Anvil app, using a server_route.

Now it’s as if Anvil detects the iframe in the page where the flow originated, and this iframe can no longer be escaped when it comes to the redirect.

What I’ve Tried
I’ve isolated the ‘home’ page which receives the redirect. Clean page. Now just a server route and a page that says Home. Same result
I’ve tried using only the iframe, i.e. from the site where that is hosted. Doing this I do get the home page.

So, the only thing I can think of is whether there have been any changes to Anvil’s Content Security Policy?

This issue is coincident in time with adding the M-3 dependency, which featured a migration opt-in of some sort (?) but probably this is irrelevant/another issue. Have deleted this for now due to MIME type issues errors.

Any feedback appreciated. I can think of workarounds - just wondering what to do that will be the very fastest fix. (longer term there will be a Python sdk!)

E.g. If it is a CSP issue, could download the yaml file, change the policy, and then push it back to Anvil?

Any feedback, appreciated.

Thanks a lot.

(longer term there will be a Python verification sdk!)

Oliver

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

Code Sample:

# this is a formatted code snippet.
# paste your code between ```

Clone link:
share a copy of your app

2

Hi Oliver,

If you want your app to work in an iframe, you need to go to Settings → Embedding and tick “Allow this app to be embedded in other pages”. Have you done this for this app?

1 Like
3

Hi Meredydd. Thanks for the quick reply. This is the solution! TLDR If dealing with iframes in either direction click the allow embedded button.
Hadn’t occured to me as I’m not actually trying to embed an Anvil app, but the opposite. I have an external iframe embedded in the Anvil app. I guess the ‘allow Anvil app to be embedded’ sets the CSP settings, and this works in either direction, somehow?
Anyway it works. Thanks again.

1 Like
4

Glad you’ve got it working!

The error message you pasted (“Refused to frame ‘https://reliable-equatorial-heron.anvil.app/’”) indicates that something, somewhere, is trying to put that URL on the inside of an iframe. Enabling embedding will have made that work!

1 Like