Member tips

How to debug Typeform webhooks

  • 8 August 2023
  • 7 replies
  • 119 views
How to debug Typeform webhooks
Userlevel 3
Badge

Webhooks are beautiful, but sometimes hard. Especially when using the security features

 

I spent a couple of hours trying to figure out why I couldn’t get the Typeform webhook signature to work - so I wrote a whole post explaining how I could debug and resolve the problem!

This uses:

  • Typeform: the source <3
  • Ngrok: to set up a proxy between the web and my machine
  • Fastify: node js backend library
  • Dashcam: to debug and create videos

https://dev.to/orliesaurus/debugging-typeform-webhooks-2m7j

 

TL;DR: There is an extra character in the signature calculation that you need to add

Here’s the code that fixes it!

 

  if (verifySignature(signature,`${JSON.stringify(request.body)}\n`)) {
reply.code(200).send({ status: 'ok' });
return
}

I am happy to answer any questions about the article, the method I used to debug the signature and anything else! 


7 replies

Userlevel 7
Badge +5

This awesome, thanks so much for sharing @okdashcam 😁 

Userlevel 7
Badge +5

Yeah, thanks a lot @okdashcam nice debugging! Have featured this one on the front page of our Community today for extra visibility. Hopefully folks will find this useful 😃

Userlevel 7
Badge +5

Agreed! Thank you for sharing this, @okdashcam ! I also shared this with some of the developers at Typeform. 😀

Userlevel 3
Badge

Thanks y’all 🙏 - that’s so nice to hear that you find this useful, I hope other devs in the community will find this topic and save them hours of trial and error (especially if they use node with fastify)!

Let me know if you want me to look into more issues in the future, I am happy to make some more content!

Userlevel 7
Badge +5

Hi @okdashcam You’re opening the flood gates - we always love content! 😂

Userlevel 7
Badge +5

Hello @okdashcam ,

that is a very nice article you posted! We really appreciate it.

 

Regarding the “issue” with trailing \n character - nice catch and workaround. I would suggest to use fastify-raw-body plugin to make sure you are calculating the signature from the actual body as it is sent in the webhook request.

Tech details: If you convert the body object to JSON string yourself you are striping out all whitespaces from the original request body. The body from webhook request contains trailing \n character which gets lost when the body is converted to object by Fastify framework. Currently there are no other whitespaces in our payload, however JSON specification allows for extra whitespaces and working with actual raw body will ensure you always calculate the signature from correct value.

Userlevel 3
Badge

Regarding the “issue” with trailing \n character - nice catch and workaround. I would suggest to use fastify-raw-body plugin to make sure you are calculating the signature from the actual body as it is sent in the webhook request.

Good point, I have actually used that plugin too in another version of my code, but I thought that for the sake of the explanation it would have been a couple of extra “steps” to install the dependency and configure it to only work on the route, I decided to follow K.I.S.S. - but you’re totally right! That library can help mitigate the need to figure out the extra spaces by just using the raw body from the request!

Thanks for pointing that out and it’s definitely a very valid alternative

Reply