Answered

Prevent redirects from breaking out of iframe

  • 23 August 2021
  • 14 replies
  • 3587 views

Hi, 

 

I’m hoping someone can shed some light on an issue I’m having. 

 

I have a Typeform embedded on a site (form A) that uses redirect on completion to send the user to another typeform (form B). On form B, there are two endings. One is a true ending with no link, and one uses a button (not the redirect on completion feature) to lead back to the start of form B, passing a hidden field. 


Currently, when form A ends the redirect opens in the parent window and not within the iframe. I’d like to keep the entire form sequence within the embed. My problem sounds similar to this thread, except that I have full control of the page that hosts the embed. I’m moderately familiar with javascript and can use the embed SDK instead of the pre-made embed codes if needed.

 

Is it possible to do what I am trying to do? 

 

 

Here’s a summary of the situation: 

Context

Embedded form A redirects to form B

 

Current behavior

When form A ends the redirect opens in the parent window and not within the iframe.

 

Desired behavior

The entire form sequence remains within the iframe. 

 

Attempts at a solution

Implementation Result
Full page embed code from the share menu Redirect from form A opens in parent window
Standard embed code from the share menu Redirect from form A opens in parent window
iframe using Typeform url Redirect from form A opens in parent window
Nested iframes (embedding a second site that contains only a Typeform embed, with and without sandbox attributes). 

Various console errors

Unsafe attempt to initiate navigation for frame with origin
The frame attempting navigation is neither same-origin with the target, nor is it the target's parent or opener.
The frame attempting navigation is sandboxed, and is therefore disallowed from navigating its ancestors.
No 'Access-Control-Allow-Origin' header is present on the requested resource

 

 

 

icon

Best answer by mathio 25 August 2021, 11:14

View original

14 replies

Userlevel 7
Badge +5

Hello @Austin! It's great to have you here! :blue_heart:

I'm not sure if you can do that, so I'm tagging @mathio over here because he might be able to help you with that! Any thought on that?

Good luck! :four_leaf_clover:

Userlevel 7
Badge +5

Hello @Austin  and @Gabi Amaral ,

As far as I am aware we always redirect the parent (host) page of the embedded typeform.

However I like the idea of configuring where to redirect. Do you think this setting should be part of the embed snippet (an attribute) or it should be a setting in builder when setting up the redirect? To me it makes more sense to be part of embed code to be configurable for each embed separately.

Would you mind posting this feature request on our Github? https://github.com/Typeform/embed/issues

 

Thanks, @Gabi Amaral and @mathio! It’s good to know I wasn’t missing something obvious. I agree, I think the best case would be an embed attribute so that it can be configured as needed. I’ll post on Github. 

Hi y’all, was this solved? @mathio do you have an update perhaps? We’re looking to use the same feature.

Userlevel 7
Badge +5

​Hello @mmathieu if I remember correctly we never received a feature request on Github therefore this feature is not available. Feel free to post it on Github so our team can track this feature request.

Userlevel 7
Badge +5

Hello all, this feature was released today. See embed README file for details.

To keep the redirect in iframe yo can use data-tf-redirect-target=”_self” (or redirectTarget: “self” for JS embed code) in your embed code.

Userlevel 1

Hello @mathio ,

I have more than two Typeform it doesn't work. When it goes from the second to the third it already opens in the parent. 

The redirect from the first to the second works perfectly, but the next redirects don't work

Userlevel 7
Badge +5

Hi @midiazmartinez 

The redirect target is determined via a query parameter passed to your typeform at embed time. You can add this query param to the 2nd typeform URL manually (to the redirect URL when creating the form):

?typeform-embed-redirect-target=_self

See all available values in the embed docs.

Userlevel 1

@mathio 

Thanks for the answer, but I don't understand.

I explain what I have:

import { createWidget } from '@typeform/embed';

createWidget('FIRST_TYPEFORM', {
container: document.querySelector('#survey-typeform'),
iframeProps: {
title: 'Title survey',
id: 'survey-typeform-iframe'
},
redirectTarget: '_self',
onReady: this.onReadyWidget,
onSubmit: this.onSubmitWidget
});

I only create the first form and then the redirect embeds the rest of the blocks when they finish

Userlevel 7
Badge +5

When you build your typeform (in “Create” tab) you specify the redirect URL. You need to add the query param to specify redirect target there.

Userlevel 1

@mathio Thank you very much, I have already tested it and it works perfectly 👍

Userlevel 7
Badge +5

Happy it's working now, @midiazmartinez! By the way, why don't you share these forms with us so we can test on our end? We'd also love to take a look at them so we can give you some feedback! 😉

Userlevel 1

Hello,

I write again because the problem is now another.

The problem is that the onSubmit event is only fired the first time in the first form, in the second and third the onSubmit event is not fired and it is not possible to have control of the onSubmit event.

I need to retrieve the response_id of each form.

Any idea what could be happening or is it a bug?

Thanks

Hello,

I’m hoping someone will be able to assist me with this. I am attempting to use a Typeform as an iFrame within Framer, and I am using a URL redirect at the last page. The Typeform appears beautiful in Framer, but the redirect does not stay within the iFrame. 

 

I have attempted to follow these instructions, but the redirect still gets the user out of the iframe. Does anyone have thoughts on what I’m doing wrong? Below is the HTML embed code I’m using within framer. Adding the data-tf-redirect-target=”_self” doesn’t seem to do anything. Thanks so much!

 

<div data-tf-live="01H7JP27FDKY9RTYVRYR73HRA8" data-tf-redirect-target=”_self”></div>

<script src="//embed.typeform.com/next/embed.js"></script>

 

 

Reply