Embedded Forms Now Require HTTPS

Embedded Forms Now Require HTTPS
Userlevel 7
Badge +5
  • Tech Community Advocate
  • 12702 replies

Hello and happy mid-Summer (not to be confused with the movie, Midsommer) Typeform community!

 

From July 2021, all embeds must run over HTTPS only. Websites using HTTP will see the image above (or something similar depending on the browser used) and will be blocked from using the embed. 

 

Why is Typeform requiring HTTPS?

HTTP is insecure and unencrypted. HTTPS is the natural progression and the internet standard which replaces HTTP. The S in HTTPS stands for Secure (it's secured by encryption to protect your data when transferring between points on the internet). 

This is now our standard and another way to protect users as well as protecting our customers by encouraging a security-first mindset. 

To transition from HTTP to HTTPS, a user must update their website by obtaining an SSL certificate from the hosting company they use. This is a simple process but it will come at a cost, though usually a small cost. 

Why should you want an SSL certificate on your site? 

  • Using HTTPS deems you trustworthy and users are more likely to use your site and services 
  • HTTPS is more secure for both the site owner and the site user, a win-win
  • Search engines will severely penalize sites not using HTTPS in search ranking, so it's great for SEO
  • Many browsers and browser extensions will show a warning when navigating to your site to say the page is malicious and untrusted, that's no good 

Any questions? Let us know in the comments below. 


34 replies

Userlevel 7
Badge +5

Unfortunately when sandbox mode is enabled there are no responses created. Your onSubmit callback is invoked with responseId value of undefined.

@megmc88 above mentioned that some forms were working and others were not - we are experiencing this too and have tracked it down to a difference in CSP headers for forms within the same account.

  • One sends content-security-policy: with frame-ancestors http://localhost: https:;* - doesn't work on iOS (Ionic) - likely because Ionic sends ionic://
  • The other sends content-security-policy-report-only: with frame-ancestors https: - works on iOS (Ionic) - because it’s report only

Also see Recently stopped working inside Capacitor and Cordova Applications · Issue #311 · Typeform/embed (github.com)

Userlevel 7
Badge +5

Thanks for sharing this, @bigjump !!

Userlevel 7
Badge +5

Hello @bigjump 

you can contact our customer success team and they will be able to switch CSP headers for your typeforms to “report only”.

There will be a better solution in future, but for now feel free to use the form below:

https://www.typeform.com/help/contact/

Hello @bigjump 

you can contact our customer success team and they will be able to switch CSP headers for your typeforms to “report only”.

There will be a better solution in future, but for now feel free to use the form below:

https://www.typeform.com/help/contact/

Will do -thanks.

Userlevel 7
Badge +5

 

We updated the CSP headers for all typeforms:

content-security-policy: ... frame-ancestors http://localhost:* capacitor: ionic: https:;


There is no need to contact support anymore to make your typeforms available in your PWAs built with frameworks such as Capacitor or Ionic.

I built this sample PWA in Capacitor (it is served on capacitor://localhost/) and embedded typeforms work without any issues now. 

Note: I had to reinstall the app to clear the cached version of embed.js. If this is not an option for you, you could append a query parameter to the lib to force loading new version, eg embed.js?v=1.

 

Awesome - confirmed as working for us too.

Many thanks for turning this around so quickly. :)

I want to embedd the forms on my websites homepage but https protocols on my website not giving the access to typeform.

Kindly help and fix the issue, thanks,

Userlevel 7
Badge +5

Hello @joshmartin 

please share the code you use on your website and also where in the website do you expect it to be displayed.

How did you conclude the issue was with HTTPS protocol? 

Reply