Skip to main content

From the https://www.typeform.com/help/a/using-hidden-fields-360052676612/

I understand that ‘hidden fields’ are just placeholders to parse and save the Query Parameters.

(I wish they were referred as ‘URL Query fields’! A hidden field is technically a field that would be in the html content but not be rendered on the UI)

Requirement: Decrypt a query parameter value

Business Justification: We pass sensitive information such as ClientID, first name and last name (say). While each member would get the url specifically crafted for him/her, it’s easy for the member to tamper the url and fill our the survey for another member.

Example:

https://tutorials.typeform.com/to/abc#clientinfo=asfoillwil23laisd

A hidden field 'clientinfo' would hold the value 'asfoillwil23laisd'
Now, I want to be able to decrypt the value into discrete user defined fields such
client_id=423232
first_name=John
last_name=Smith

All I need is decrypt and substring functions built into TypeForm

clientinfo_decrypted=Decrypt(client_id, decrypt key, base) # let's say returns -> 23232_John_Smith
client_id=substring(clientinfo_decrypted,0,indexof(clientinfo_decrypted,'_')) # Get the string before the first underscore→ returns 23232
first_name=substring to get the text between the first pair of underscores → returns John

last_name=substring to get the text after the 2nd underscore → return Smith
 

The ability to decrypt query parameter values and extract subtext from it will enable survey url to be more secure. Write now, the URLs are plain text and hackable.

Users can still edit the url with encrypted values, however, the decryption would not find any meaningful output. Plus, the decryption can always validate one of the fields to make sure that the query parameter values were not tampered.

Hi @jervin31 Oh this is an interesting feature request. I’ll share this with the product team. @mathio or @picsoung you don’t happen to know if there is a hacky way to do this by chance? 

Hello @jervin31 

to make hidden fields truly hidden and not display them in the URL you can embed your typeform in your website, then you can pass the values in code only. You can use our Embed SDK to achieve this:

// fetch your data
const searchParams = new URLSearchParams(window.location.search)
const clientInfo = searchParams.get('clientinfo')

// implement your own method 'fetchClientData'
const { client_id, first_name, last_name } = fetchClientData(clientInfo)

// render with React:
<Widget 
  id={formId}
  hidden={{
    client_id,
    first_name,
    last_name,
  }}
/>

// or vanilla JS:
window.tf.createWidget(formId, {
  container: document.querySelector('#wrapper-element'),
  hidden: {
    client_id,
    first_name,
    last_name,
  },
})

Embed SDK is the best tool to combine your typeform with custom business logic. You might even be able to avoid passing the “clientinto” in URL and fetch data based on your respondents session in your website (eg. cookie).

However please do keep in mind that since the data is fetched in browser, it can be reverse-engineered and retrieved by respondents, if they have sufficient technical skills.

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs