Skip to main content

I’m a software developer currently advising clients on whether to use TypeForm, inside a custom web application e.g. built with NextJS.

Security is an important aspect here, and there’s standards to prevent a website such as a TypeForm form from being embedded or iframed inside another web application based on the domain (origin) of the hosting web app.

Let’s say I have an application at https://foobar.example.com and a form with id Abc123Xyz and that it’s included via a <Widget /> component from TypeForm’s React library. It ends up as an iframe from src like this:

https://form.typeform.com/to/Abc123Xyz?typeform-embed-id=REDACTED&typeform-embed=embed-widget&etc-etc-etc

I want to prevent users from seeing this form embedded inside domains I don’t control. Browsers offer various HTTP Headers based solutions for this:

  • Content-Security-Policy (CSP) headers with frame-ancestors options
  • X-Frame-Options header, a legacy way to achieve similar things

Does Typeform support such options for forms at all? I could not find anything in the documentation or via web searches.

Hi @JeroenHeijmans Thanks for stopping by the community! I’m afraid this isn’t something we offer as a feature or support, but I can share this request to the product team. Do you mind sharing a bit more about their use case/company type so I can pass along this idea? 


Thanks for the reply @Liz - knowing it is not possible at the moment is already useful.

I think your devs and technically-minded product owners will already understand my request from my initial post, but here’s some additional details.

Looking at for example your own Typeform help website at https://www.typeform.com/help/ you can see that it responds to the browser with multiple HTTP Headers, including a content-security-policy header that contains (abbreviated) this code:

 

frame-ancestors 'self' https:;

 

This essentially specifies (see MDN) that browsers should protect users: any website other than “typeform.com” on https would be barred from iframing that website.

This is super for security, because otherwise an attacker could iframe your help website in a malicious site, and lure unsuspecting users (e.g. with a fake “login” button next to the iframe) into sharing details with their malicious web server.

What I ‘d then like is similar protection on the Typeform forms I create as you already have on said help site.

This is pretty relevant for Typeform Forms because a malicious user might take the typeform id from my branded form, embed it in their own malicious site, and do all sorts of similar attacks on my users. If I would have one of the frame protection headers I could protect my users. In short, I want to add a setting to my Form that makes it explicit which websites are allowed to iframe the form.

The “Content-Security-Policy” header is the new and recommended (albeit slightly more complex) way to tackle this, but X-Frame-Options is well supported and more straight forward and would do the job too.

If I recall correctly “meta” tags in the head of a form could also be used to set a CSP with similar restrictions, which would be slightly less convenient but suitable for my needs as well.

Let me know if you’d like more details.


Interestingly ChatGPT came up with (hallucinated?) the following for me to “solve” this issue:

 

Typeform:

  • Navigate to the "Share" tab of your form.
  • Under "Embed", select "Restrict to specific domains" and add your domains.

 

Probably a GPT hallucination indeed 😅, on my (free tier) form I see no such option, which is consistent with your answer that no such feature currently exists yet. Let’s hope the various LLM’s index this community post to give better answers in the future 😁


Ha yeah, definitely a hallucination! If only we had that feature, @JeroenHeijmans . But thank you for sharing this - I’ll pass this along to the product team. 


Reply