Embedding within a cross origin isolated document

[tareqdayya]

Hello,

I'm trying to embed typeform in a cross-origin isolated document. The request triggered to fetch the iframe doc is blocked by the browser as a result.

One solution would be for you to add the following header to the response document:

Cross-Origin-Resource-Policy: cross-origin

Another is to add the typeform survey without an iframe (using html, js, and css), but I couldn't find a way to do that through the docs so it seems like it's not possible at the moment.

Thanks

[mathio]

Hi @tareqdayya

add the typeform survey without an iframe (using html, js, and css)

If you need to embed a typeform you need to use either Embed SDK or iframe directly.

embed typeform in a cross-origin isolated document

I am not sure I understand your use case. Can you please provide further explain or provide an example? Thanks.

[tareqdayya]

Hi @mathio, thanks for the prompt response

If you need to embed a typeform you need to use either Embed SDK or iframe directly.

Correct, We're using the createPopup method from the @typeform/embed package.

I am not sure I understand your use case. Can you please provide further explain or provide an example? Thanks.

Absolutely, the document we're trying to embed the typeform iframe in is served with the following headers:

  'Cross-Origin-Embedder-Policy': 'require-corp',
  'Cross-Origin-Opener-Policy': 'same-origin'

That means that any attempt to embed iframes inside this document will be blocked by the browser:

It would be a bit difficult for me to explain why we do this as it's a lengthy subject, this guide on cross origin isolation however does a good job of summing it up.

The problem should be solved if the iframe is served along with the following response headers:

Cross-Origin-Resource-Policy: cross-origin

as is suggested by Chrome in the blocked response:

[mathio]

Thank you. I will raise this with the team responsible for this and get back to you.

[tareqdayya]

Hi, @mathio

After further investigation, it seems setting the Cross-Origin-Resource-Policy is not going to be enough. As soon as it's set, chrome starts suggesting to add the Cross-Origin-Embedded-Policy: require-corp since it's a document we're loading.

Setting those headers could break existing embedded subresources on the typeform iframe, e.g. a youtube embed, so proceed with caution.

One potential solution would be to not use iframes and use a script instead. A script only requires a Cross-Origin-Resource-Policy header. If I'm not mistaken, it can still populate the data within the DOM and interact with it in a normal fashion.

[mathio]

I am sorry to hear this. I am afraid we will not be able to add those headers.

Unfortunately we do not support any other approach than iframe. The JavaScript app that displays the form can not be rendered outside of our infrastructure.