บันทึกการใช้ Cloudflare Worker เพื่อรับ Webhook จาก Github

สืบเนื่องมาจากผมใช้ giscus.app ที่เป็น Comment System โดยใช้ Github Discussions แต่ปัญหาคือ ผมไม่เคยได้ Notifications เวลามี activity ใน discussions เลย ทั้งที่ watch repository ไว้แล้ว เลยคิดว่า น่าจะต้องสร้าง Github Webhook โพสไป Slack น่าจะดี

สำหรับ Service Workers แนะนำ 2 เว็บนี้ เพื่ออ่าน พื้นฐาน เบื้องต้น

Cloudflare Workers Docs - Docs และ Examples Workers.
Cloudflare Playground - เอาไว้สำหรับลองเล่น Cloudflare Worker บนเว็บ

จริงๆ แล้ว ถ้าไม่ใช้ Github Webhook ก็สามารถใช้ Github App ใน Slack ได้เลย เพียงแค่ Add Github เข้า Channel แล้วกด subscribe ผ่าน command ได้เลย

/github subscribe user/repo discussions

แต่ประเด็นที่จะใช้ Github Webhook คือ เผื่อว่าเราจะไม่ได้ใช้แค่ Slack อาจจะให้ส่ง Email / ส่งเข้า Line / ส่งเข้า SMS หรือแล้วแต่เราต้องการ ก็ได้ เลยเป็นที่มาว่า ลองเขียนเป็น Cloudflare Worker ด้วยดีกว่า

สร้าง Cloudflare Worker

หน้า Cloudflare Dashboard เลือก Workers จากนั้นกด Create a Service ส่วน Select a starter จะเลือกเป็นอะไรก็ได้ เพราะสุดท้ายแล้ว เราก็จะ edit code อยู่ดี

ตัวอย่าง Worker ที่ response Hello World

หน้าตาแบบ Module Syntax

1
export default {
2
  async fetch(request, env) {
3
    return await handleRequest(request)
4
  }
5
}
6

7
async function handleRequest(request) {
8
  return new Response('Hello world')
9
}

หน้าตาแบบ Service Worker Syntax

1
addEventListener('fetch', (event) => {
2
  event.respondWith(handleRequest(event.request))
3
})
4

5
async function handleRequest(request) {
6
  return new Response('Hello world')
7
}

ใน Worker Service เราสามารถ เพิ่ม Environment variables ได้ โดยเลือก Service -> Settings -> Variables จากนั้น สามารถ access ได้เหมือนตัวแปร Global เลย

1
console.log(YOUR_VAR_NAME)

ในโค๊ดด้านล่าง จะเห็นมี GITHUB_SECRET และ SLACK_WEBHOOK_URL ก็คือ Environment variables ที่ผมเพิ่มไปนั่นเอง

handle event ของ Workers เริ่มต้นด้วย

1
addEventListener('fetch', (event) => {
2
  // your code here
3
})

เช็คว่า Request เป็น Method เป็น POST

1
const request = event.request
2

3
if (request.method.toUpperCase() === 'POST') {
4
}

การ return response ของ Worker

1
return event.responseWith(new Response('OK'))
2

3
// หรือ set status code
4
return event.respondWith(new Response('Unauthorized', { status: 403 }))

การเช็ค content-type ของ headers

1
const { headers } = request
2
headers.get('content-type')

การรับค่า POST Body เราจะใช้

1
const body = await request.json()

ตัว Worker สามารถใช้ fetch ได้ตรงๆเลย

1
const slackMessage = {
2
  text: 'Your message'
3
}
4

5
await fetch(SLACK_WEBHOOK_URL, {
6
  method: 'POST',
7
  body: JSON.stringify(slackMessage)
8
})

ตัว Webhook ของ Github จะส่ง X-Hub-Signature-256 มากับ Headers ด้วย ทำให้เราต้อง verify กับ GITHUB_SECRET ที่เราตั้ง เพื่อแน่ใจว่าคนที่ส่งข้อมูลมาเป็น Github จริงๆ

ใช้ req.payload และ GITHUB_SECRET เพื่อ verify ว่า hash ตรงกัน

1
// ตัว github ส่งมาคือ sha256=xxxx เลยต้อง substring เพื่อเอา sha256= ออก เหลือแต่ signature
2
const signatureStr = headers.get('X-Hub-Signature-256')?.substring(7)
3
const signature = hexToBytes(signatureStr)
4

5
const body = await request.json()
6
const bodyText = JSON.stringify(body)
7

8
const encoder = new TextEncoder()
9

10
const key = await crypto.subtle.importKey(
11
  'raw',
12
  encoder.encode(GITHUB_SECRET),
13
  { name: 'HMAC', hash: 'SHA-256' },
14
  false,
15
  ['verify']
16
)
17

18
const verified = await crypto.subtle.verify('HMAC', key, signature, encoder.encode(bodyText))
19

20
if (!verified) {
21
  return new Response('Invalid signature', { status: 403 })
22
}

จากข้อด้านบน เวลาที่ต้อง verify sha256 จำเป็นต้องใช้ ArrayBuffer / Buffer ก็เลยได้ utils function แบบนี้

ขอบคุณตัวอย่าง Source Code จากที่นี่

1
function hexToBytes(hex) {
2
  const bytes = new Uint8Array(hex.length / 2)
3
  for (let c = 0; c < hex.length; c += 2) {
4
    bytes[c / 2] = parseInt(hex.substr(c, 2), 16)
5
  }
6

7
  return bytes.buffer
8
}

Source Code ทั้งหมด ของ Worker

1
function hexToBytes(hex) {
2
  const bytes = new Uint8Array(hex.length / 2)
3
  for (let c = 0; c < hex.length; c += 2) {
4
    bytes[c / 2] = parseInt(hex.substr(c, 2), 16)
5
  }
6

7
  return bytes.buffer
8
}
9

10
async function handlePostRequest(request) {
11
  const { headers } = request
12
  const contentType = headers.get('content-type') || ''
13

14
  if (!contentType.includes('application/json')) {
15
    return new Response('Only JSON')
16
  }
17

18
  const body = await request.json()
19

20
  // verify that a request come from github
21
  // otherwise return 403
22

23
  let encoder = new TextEncoder()
24

25
  const signatureStr = headers.get('X-Hub-Signature-256')?.substring(7) // remove sha256= prefix
26
  const signature = hexToBytes(signatureStr)
27
  const bodyText = JSON.stringify(body)
28

29
  const key = await crypto.subtle.importKey(
30
    'raw',
31
    encoder.encode(GITHUB_SECRET),
32
    { name: 'HMAC', hash: 'SHA-256' },
33
    false,
34
    ['verify']
35
  )
36

37
  const verified = await crypto.subtle.verify('HMAC', key, signature, encoder.encode(bodyText))
38

39
  if (!verified) {
40
    return new Response('Invalid signature', { status: 403 })
41
  }
42

43
  const slackMessage = {
44
    text: `Your message`
45
  }
46

47
  await fetch(SLACK_WEBHOOK_URL, {
48
    method: 'POST',
49
    body: JSON.stringify(slackMessage)
50
  })
51

52
  return new Response('OK')
53
}
54

55
addEventListener('fetch', (event) => {
56
  try {
57
    const request = event.request
58
    if (request.method.toUpperCase() === 'POST')
59
      return event.respondWith(handlePostRequest(request))
60
    return event.respondWith(fetch(request))
61
  } catch (e) {
62
    return event.respondWith(new Response('Error thrown ' + e.message))
63
  }
64
})

เป็นครั้งแรกที่ลองใช้ Cloudflare Worker ซึ่งก่อนหน้านี้ใช้แค่เป็น Proxy ของ Plausible แต่ว่าไม่ได้อ่านโค๊ด Copy มาวางอย่างเดียว วันนี้ได้ลองเล่น ลองอ่าน Example และ Tutorial เบื้องต้น ถ้าเขียน JavaScript หรือ Node.js มาก่อน คิดว่าเข้าใจได้ไม่ยากครับ ทั้งหมด ผมโน๊ตไว้ที่ Repo ด้านล่างครับ

Source Code