Latihan - Mengamankan payload webhook dengan rahasia

  • 10 menit

Dalam latihan ini, Anda akan melindungi payload webhook dengan rahasia, dan mempelajari cara memvalidasi bahwa payload sebenarnya berasal dari GitHub dengan menggunakan Azure Function Anda.

Dapatkan kunci untuk Azure Function Anda

  1. Di portal Azure, kembali ke Aplikasi Fungsi yang Anda buat di latihan pertama dalam modul.

  2. Di panel menu kiri, di bawah Fungsi,pilih Fungsi. Panel Fungsi muncul untuk Aplikasi Fungsi Anda.

  3. Pilih HttpTrigger1 yang Anda buat. Panel HtttpTrigger1 muncul untuk Fungsi Anda.

  4. Di panel menu kiri, pada Pengembang, pilih Kode + Uji. Panel Kode + Uji muncul untuk Fungsi Anda.

  5. Dalam file JavaScript index.js, tambahkan referensi ke pustaka crypto-js di awal file, di atas pernyataan module.exports.

    const Crypto = require('crypto');

  6. Di bilah menu atas, pilih Simpan. Panel Log muncul di bagian bawah panel.

  7. Di panel menu sebelah kiri, di bagian Pengembang, pilih Tombol Fungsi. Panel Tombol Fungsi muncul untuk Fungsi Anda.

  8. Di bawah kolom Nilai , pilih tautan Perlihatkan nilai .

  9. Pilih ikon Salin ke clipboard, dan simpan kunci ini untuk digunakan di langkah berikutnya.

  10. Di panel menu kiri, pada Pengembang, pilih Kode + Uji. Panel Kode + Uji muncul untuk Fungsi Anda.

  11. Pada blok kode, setelah pernyataan context.log, tambahkan kode berikut. Ganti <kunci default> dengan kunci default yang baru saja Anda salin ke clipboard:

    const hmac = Crypto.createHmac("sha1", "<default key>");
const signature = hmac.update(JSON.stringify(req.body)).digest('hex');

    Kode ini menghitung hash kunci, menggunakan mekanisme yang sama seperti GitHub.

  12. Tambahkan const lain yang menambahkan sha1= ke awal kunci, sehingga cocok dengan format x-hub-signature di header permintaan. Tambahkan kode berikut ke fungsi Anda.

    const shaSignature = `sha1=${signature}`;

  13. Tambahkan kode berikut untuk mengambil tanda tangan GitHub dari header permintaan:

    const gitHubSignature = req.headers['x-hub-signature'];

  14. Bandingkan kedua string. Jika cocok, proses permintaan, sebagai berikut:

    if (!shaSignature.localeCompare(gitHubSignature)) {
    // Existing code
    if (req.body.pages[0].title) {
        ...
    }
    else {
        ...
    }
}

  15. Jika string tidak cocok, kembalikan respons HTTP 401 (Tidak Sah), dengan pesan yang memberi tahu pengirim bahwa tanda tangan tidak cocok.

    if (!shaSignature.localeCompare(gitHubSignature))
{
    ...
}
else {
    context.res = {
        status: 401,
        body: "Signatures don't match"
    };
}

    Fungsi yang diselesaikan akan terlihat seperti berikut:

    const Crypto = require('crypto');

module.exports = async function (context, req) {
    context.log('JavaScript HTTP trigger function processed a request.');

    const hmac = Crypto.createHmac("sha1", "<default key>");
    const signature = hmac.update(JSON.stringify(req.body)).digest('hex');
    const shaSignature =  `sha1=${signature}`;
    const gitHubSignature = req.headers['x-hub-signature'];

    if (!shaSignature.localeCompare(gitHubSignature)) {
        if (req.body.pages[0].title) {
            context.res = {
                body: "Page is " + req.body.pages[0].title + ", Action is " + req.body.pages[0].action + ", Event Type is " + req.headers['x-github-event']
            };
        }
        else {
            context.res = {
                status: 400,
                body: ("Invalid payload for Wiki event")
            }
        }
    }
    else {
        context.res = {
            status: 401,
            body: "Signatures don't match"
        };
    }
};

  16. Di bilah menu atas, pilih Simpan. Panel Log muncul dengan pernyataan Terhubung!.

Memperbarui rahasia webhook

  1. Beralih ke akun GitHub Anda di portal GitHub.

  2. Pilih repositori Anda.

  3. Di bilah menu atas, pilih Pengaturan. Panel Pengaturan muncul.

  4. Di bilah sisi, pilih Webhook. Panel Webhook muncul.

  5. Pilih Edit di samping webhook Anda.

  6. Dalam kotak teks Rahasia, masukkan kunci default dari fungsi yang sebelumnya Anda simpan dalam latihan ini.

  7. Gulir ke bawah ke bagian bawah halaman, dan pilih Perbarui webhook. Panel Webhook/Kelola webhook muncul.

Menguji webhook dan Fungsi Azure

  1. Pilih tab Pengiriman Terbaru.

  2. Pilih entri pengiriman terbaru (atas) dengan memilih tombol elipsis (...).

  3. Pilih Kirim Ulang. Pada kotak dialog Kirim ulang payload? yang muncul, pilih Ya, kirim ulang payload ini.

    Tindakan ini mensimulasikan Anda mengedit halaman Wiki lagi.

  4. Pilih entri pengiriman terbaru (atas) dengan memilih tombol elipsis (...).

  5. Di bagian Header, Anda akan melihat x-hub-signature. Anda juga akan melihat bahwa kode respons adalah 200, menunjukkan bahwa permintaan berhasil diproses.

    Request URL: https://testwh123456.azurewebsites.net/api/HttpTrigger1?code=aUjXIpqdJ0ZHPQuB0SzFegxGJu0nAXmsQBnmkCpJ6RYxleRaoxJ8cQ%3D%3D
Request method: POST
content-type: application/json
Expect:
User-Agent: GitHub-Hookshot/16496cb
X-GitHub-Delivery: ce122460-6aae-11e9-99d4-de6a298a424a
X-GitHub-Event: gollum
X-Hub-Signature: sha1=<hash of default key>

Menguji tanda tangan yang tidak valid

  1. Di portal GitHub, pada halaman webhook, pilih tab Pengaturan.

  2. Di kotak percobaan Rahasia, pilih Ubah Rahasia.

  3. Masukkan string acak, gulir ke bawah, lalu pilih Perbarui webhook.

    Kunci yang digunakan oleh webhook seharusnya tidak lagi cocok dengan yang diharapkan oleh fungsi Azure.

  4. Pilih tab Pengiriman Terbaru.

  5. Pilih entri pengiriman terbaru (atas) dengan memilih tombol elipsis (...).

  6. Pilih Kirim ulang, dan di kotak dialog Kirim ulang payload yang muncul, pilih Ya, kirim ulang payload ini.

  7. Kali ini, Anda akan melihat bahwa kode respons adalah 401, menunjukkan bahwa permintaan tidak diizinkan.

  8. Pilih entri pengiriman terbaru (atas) (pengiriman ulang) dengan memilih tombol elipsisnya (...).

  9. Pilih tab Respons, dan di bagian Isi, pastikan bahwa pesan "Tanda tangan tidak cocok" muncul.