Is there a way to create my own embed iFrame header?

Hi,

Just wondering if there is a way for me to use iFrame to embed my anvil app into one particular WordPress website?

I know the Publish app has a checkbox to allow embedding outside of anvil.works, but that option is broad. It allows my anvil.app to be embedded on any domain.

I am creating an app that I want to embed within a WordPress website and I only want that WordPress website to be allowed to show my anvil.app within an iFrame.

I think I can achieve this by adding my own header, using the Content-Security-Policy: frame-ancestors…

So is it possible for me to Bypass the anvil embed option and create my own header policy? And if so, where would I put this header and in what format? I am assuming it might be something I can upload into the assets area.

Thanks!

1 Like

Hello @Harlequin

I don’t know the answer to the question in your Subject line, but the following post contains clone links to an example app (Luke Skywalker) that allows embedding but supports varied responses to different embedding sites (with additional clone app examples for Ben Kenobi, Darth Vader, and “all other” websites.)

Unfortunately, to get the HTTPS and domain this approach uses a Javascript function that is not presently supported on either desktop Firefox or Android Firefox…

Hi @tomherden

Thank you for this :+1:. I will experiment and try to cobble something together.

Hi @Harlequin,

Although there are workarounds, I’ve moved this to Feature Requests because that would be neat!

2 Likes

Thanks @meredydd That would be fantastic!