fix: Add Flagsmith signature header when testing webhook. (#3666)

Co-authored-by: kyle-ssg <[email protected]>

api/core/signing.py

@@ -3,6 +3,8 @@
 
 
 def sign_payload(payload: str, key: str):
+    # signPayload of frontend/web/components/TestWebHook on the frontend replicates this
+    # exact function, change the function there if this changes.
     return hmac.new(
         key=key.encode(), msg=payload.encode(), digestmod=hashlib.sha256
     ).hexdigest()

frontend/web/components/TestWebhook.tsx

@@ -8,34 +8,82 @@ import Button from './base/forms/Button'
 type TestWebhookType = {
   webhook: string
   json: string
+  secret: string
 }
 
-const TestWebhook: FC<TestWebhookType> = ({ json, webhook }) => {
+// from https://stackoverflow.com/questions/24834812/space-in-between-json-stringify-output
+const stringifyWithSpaces = (str: string) => {
+  const obj = JSON.parse(str)
+  let result = JSON.stringify(obj, null, 1) // stringify, with line-breaks and indents
+  result = result.replace(/^ +/gm, ' ') // remove all but the first space for each line
+  result = result.replace(/\n/g, '') // remove line-breaks
+  result = result.replace(/{ /g, '{').replace(/ }/g, '}') // remove spaces between object-braces and first/last props
+  result = result.replace(/\[ /g, '[').replace(/ \]/g, ']') // remove spaces between array-brackets and first/last items
+  return result
+}
+
+const signPayload = async (body: string, secret: string): Promise<string> => {
+  if(!secret) {
+    return ''
+  }
+  const enc = new TextEncoder()
+
+  const key = await window.crypto.subtle.importKey(
+    'raw',
+    enc.encode(secret),
+    {
+      hash: { name: 'SHA-256' },
+      name: 'HMAC',
+    },
+    false,
+    ['sign'],
+  )
+
+  const signature = await window.crypto.subtle.sign(
+    'HMAC',
+    key,
+    enc.encode(stringifyWithSpaces(body)), // We do this bc the python output is single line with one space before each value
+  )
+  const signatureUnsignedIntArray = new Uint8Array(signature)
+  return Array.prototype.map
+    .call(signatureUnsignedIntArray, (element) =>
+      element.toString(16).padStart(2, '0'),
+    )
+    .join('')
+}
+
+const TestWebhook: FC<TestWebhookType> = ({ json, secret, webhook }) => {
   const [error, setError] = useState<string | null>(null)
   const [loading, setLoading] = useState(false)
   const [success, setSuccess] = useState(false)
+
   const submit = () => {
     setError(null)
     setLoading(true)
     setSuccess(false)
-    data
-      .post(webhook, JSON.parse(json), null)
-      .then(() => {
-        setLoading(false)
-        setSuccess(true)
-      })
-      .catch((e) => {
-        if (e.text) {
-          e.text().then((error: string) => {
-            setError(`The server returned an error: ${error}`)
-          })
-        } else {
-          setError('There was an error posting to your webhook.')
-        }
-      })
-      .finally(() => {
-        setLoading(false)
-      })
+    signPayload(json, secret).then((sign) => {
+      const headers = {
+        'X-Flagsmith-Signature': sign,
+      }
+      data
+        .post(webhook, JSON.parse(json), headers)
+        .then(() => {
+          setLoading(false)
+          setSuccess(true)
+        })
+        .catch((e) => {
+          if (e.text) {
+            e.text().then((error: string) => {
+              setError(`The server returned an error: ${error}`)
+            })
+          } else {
+            setError('There was an error posting to your webhook.')
+          }
+        })
+        .finally(() => {
+          setLoading(false)
+        })
+    })
   }
   return (
     <div>

frontend/web/components/modals/CreateAuditWebhook.js

@@ -133,6 +133,7 @@ const CreateAuditWebhook = class extends Component {
                     <TestWebhook
                       json={Constants.exampleAuditWebhook}
                       webhook={this.state.url}
+                      secret={this.state.secret}
                     />
                     {isEdit ? (
                       <Button

frontend/web/components/modals/CreateWebhook.js

@@ -139,6 +139,7 @@ const CreateWebhook = class extends Component {
                     <TestWebhook
                       json={Constants.exampleWebhook}
                       webhook={this.state.url}
+                      secret={this.state.secret}
                     />
                     {isEdit ? (
                       <Button