Bagaimana Menerapkan Header Aman menggunakan Pekerja Cloudflare?

Panduan langkah demi langkah untuk menerapkan header HTTP aman di situs web yang diberdayakan oleh Cloudflare menggunakan Pekerja Cloudflare.

Ada banyak cara untuk menerapkan header respons HTTP untuk mengamankan situs dari kerentanan umum, seperti XSS, Clickjacking, MIMI sniffing, cross-site injection, dan banyak lagi. Praktik yang diadopsi secara luas dan direkomendasikan oleh OWASP.

Sebelumnya saya pernah menulis tentang mengimplementasikan header di web server seperti Apache, Nginx, dan IIS. Namun, jika Anda menggunakan Cloudflare untuk melindungi dan menambah daya situs Anda, Anda dapat memanfaatkannya Pekerja Cloudflare untuk memanipulasi header respons HTTP.

Cloudflare Worker adalah platform tanpa server tempat Anda dapat menjalankan JavaScript, C, C++, kode Rust. Itu diterapkan di setiap pusat data Cloudflare, yang jumlahnya lebih dari 200 di seluruh dunia.

Implementasinya sangat mudah dan fleksibel. Ini memberi Anda fleksibilitas untuk menerapkan tajuk di seluruh situs, termasuk subdomain atau URI tertentu dengan a pola yang cocokn menggunakan Regex.

  Pengenalan DevOps untuk Pemula

Untuk demonstrasi ini, saya akan menggunakan kode oleh Scott Helme.

Mari kita mulaiβ€¦πŸ‘¨β€πŸ’»

  • Salin kode worker.js dari GitHub dan rekatkan ke editor Skrip
const securityHeaders = {
        "Content-Security-Policy": "upgrade-insecure-requests",
        "Strict-Transport-Security": "max-age=1000",
        "X-Xss-Protection": "1; mode=block",
        "X-Frame-Options": "DENY",
        "X-Content-Type-Options": "nosniff",
        "Referrer-Policy": "strict-origin-when-cross-origin"
    },
    sanitiseHeaders = {
        Server: ""
    },
    removeHeaders = [
        "Public-Key-Pins",
        "X-Powered-By",
        "X-AspNet-Version"
    ];

async function addHeaders(req) {
    const response = await fetch(req),
        newHeaders = new Headers(response.headers),
        setHeaders = Object.assign({}, securityHeaders, sanitiseHeaders);

    if (newHeaders.has("Content-Type") && !newHeaders.get("Content-Type").includes("text/html")) {
        return new Response(response.body, {
            status: response.status,
            statusText: response.statusText,
            headers: newHeaders
        });
    }

    Object.keys(setHeaders).forEach(name => newHeaders.set(name, setHeaders[name]));

    removeHeaders.forEach(name => newHeaders.delete(name));

    return new Response(response.body, {
        status: response.status,
        statusText: response.statusText,
        headers: newHeaders
    });
}

addEventListener("fetch", event => event.respondWith(addHeaders(event.request)));

Jangan simpan dulu; Anda mungkin ingin menyesuaikan tajuk berikut untuk memenuhi persyaratan.

Content-Security-Policy – ​​jika Anda perlu menerapkan kebijakan aplikasi, Anda dapat melakukannya di sini.

Mis – jika Anda perlu mencari konten melalui iFrame di beberapa URL, maka Anda dapat memanfaatkan frame-ancestors seperti di bawah ini.

"Content-Security-Policy" : "frame-ancestors 'self' gf.dev techking.id.com",

Di atas akan memungkinkan memuat konten dari gf.dev, techking.id.com, dan situs mandiri.

  Apa Arti β€œAFK”, dan Bagaimana Cara Menggunakannya?

X-Frame-Options – Anda dapat mengubah ke SAMEORIGIN jika Anda ingin menampilkan konten situs Anda di beberapa halaman dalam situs yang sama menggunakan iframe.

"X-Frame-Options": "SAMEORIGIN",

Server – Anda dapat membersihkan header server di sini. Letakkan apa pun yang Anda suka.

"Server" : "techking.id Server",

RemoveHeaders – apakah Anda perlu menghapus beberapa header untuk menyembunyikan versi guna mengurangi kerentanan kebocoran informasi?

Anda dapat melakukannya di sini.

let removeHeaders = [
	"Public-Key-Pins",
	"X-Powered-By",
	"X-AspNet-Version",
]

Menambahkan Header baru – jika Anda perlu meneruskan beberapa header khusus ke aplikasi Anda, Anda dapat menambahkannya di bagian securityHeaders seperti di bawah ini.

let securityHeaders = {
	"Content-Security-Policy" : "frame-ancestors 'self' gf.dev techking.id.com",
	"Strict-Transport-Security" : "max-age=1000",
	"X-Xss-Protection" : "1; mode=block",
	"X-Frame-Options" : "SAMEORIGIN",
	"X-Content-Type-Options" : "nosniff",
	"Referrer-Policy" : "strict-origin-when-cross-origin",
        "Custom-Header"  : "Success",
}

Setelah Anda selesai menyesuaikan semua tajuk yang Anda butuhkan, beri nama pekerja, dan klik Simpan dan Terapkan.

Besar! pekerja sudah siap, dan selanjutnya, kita perlu menambahkan ini ke situs tempat Anda ingin menerapkan header. Saya akan menerapkan ini ke situs lab saya.

  • Buka beranda/dasbor Cloudflare dan pilih situs.
  • Arahkan ke tab Pekerja >> Tambahkan rute.
  • Masukkan URL di Rute; Anda dapat menerapkan Regex di sini.
  • Pilih pekerja yang baru dibuat dan Simpan
  Cara Mengatur dan Menggunakan Rutinitas Di Rumah & Pergi dengan Asisten Google

Itu saja; dalam sedetik, Anda akan melihat semua tajuk diterapkan ke situs.

Inilah tampilannya dari Alat Dev Chrome. Anda juga dapat menguji tajuk melalui alat tajuk HTTP.

Saya tidak tahu mengapa header Server tidak tercermin. Saya kira Cloudflare mengesampingkan ini.

Anda lihat, implementasi keseluruhan memakan waktu ~15 menit, dan tidak diperlukan downtime atau restart seperti Apache atau Nginx. Jika Anda berencana menerapkan ini ke situs produksi, saya akan menyarankan pengujian pertama di lingkungan yang lebih rendah, atau dengan bantuan rute, Anda dapat mendaftar di halaman pengujian untuk memverifikasi hasilnya. Setelah puas, dorong ke mana pun Anda mau.

Ini luar biasa!

Terimakasih untuk Scott untuk kode.