Accessing URL of page/site hosting an embedded Anvil app

I’m considering licensing other websites to embed one of my Anvil apps and, toward that end, have been trying to learn how to identify the hostname of the website in which my app has been embedded (so that the form can throw up a notice if the site isn’t un-authorized to do so.)

Unfortunately, I’m getting the following error when the embedded app tries to access the information I want:

SecurityError: Failed to read a named property ‘window’ from ‘Location’: Blocked a frame with origin “[embeddable app URL appeared here]” from accessing a cross-origin frame.

I enabled Embedding before publishing the first app, and created (and used in the iframe construction in the host form) a route with both enable_cors and cross_site_session set to True. In the Form code, I’ve tried to access both top and parent, and used both notations (["host"] and .host], and the same for hostname and href. I’m out of ideas.

Am I missing something, or is this just not possible within an Anvil app, or…?

On Chrome, at least, the following works to get the URL of the parent (at least the HTTPS and domain part of it):

anvil.js.window.document.location.ancestorOrigins[0]

It looks like Firefox doesn’t support it, though: "ancestorOrigins" | Can I use... Support tables for HTML5, CSS3, etc

Edit: also, this isn’t an Anvil issue, but an iframe issue. The normal way around it is for the enclosing page to pass information into the iframe, or for the two pages to send messages back and forth. That obviously won’t work for your case, since anything the enclosing page sends it can lie about.

2 Likes

Thank you very much, @jshaffstall, for the explanation, the Javascript call that works in most browsers, and the link to caniuse!

I case it’d help anyone in future to see a simple worked example, the following table contains links to an app with Embedding enabled, and examples of how it presents differently when embedded within sites that have been Allowed, Forbidden, or are Unknown.

1 Like